Template Options Power Options

Jorge Rimblas

Senior Principal

@rimblas

rimblas.com/blog

Contributor to "Expert Oracle Application Express, 2nd Edition"
with "Themes & Templates" chapter
Oracle DB since 1995
APEX since it was HTMLDB in 2004
Always involved in web technologies
jrimblas in OTN Forums

Global systems integrator focused on the Oracle platform

Established in August, 2004

Headquartered in Dallas, Texas

Consultants average 15+ years of Oracle experience

Worldwide leader in Exadata implementations

12 Oracle ACE members

Joined Accenture June, 2014

Agenda

Template Changes
What are Template Options?
Demo
Organization
Defining your own
Not just for styling
APEX Dictionary

Background

Templates

2 - Builder Blue

22 - Bluejay

24 - Cloudy

26 - Productivity

Applications

25 - Blue

Responsive

107

Universal Theme ?

42 - Universal Theme

26 - Productivity

Applications

25 - Blue

Responsive

107

Spot the Differences

?

They all use the

Standard template

Template Options add an extra degree of configuration (or styling) to just about any template.

It's an elegant, simple and yet powerful approach to styling templates with developer defined options.

CSS Classes

.t-Region--hideHeader>.t-Region-header {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.t-Region--accent1>.t-Region-header {
  background-color: #ff2d55;
  border-bottom: 1px solid #ff607e;
}

.t-Region--accent1>.t-Region-header .t-Region-title {
  color: #fff;
}

.t-Alert--success .t-Alert-icon {
  color: #4cd964;
}

.t-Region--scrollBody>.t-Region-bodyWrap>.t-Region-body {
  background-repeat: no-repeat!important;
  background-size: 100% 12px,100% 12px,100% 6px,100% 6px!important;
  background-attachment: local,local,scroll,scroll!important;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.t-LinksList--showArrow .t-LinksList-link {
  padding-right: 32px;
}

.t-Button--warning {
  background-color: #fc0;
  color: #000;
}

.t-Button--hot {
  background-color: #2578cf;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.1);
}

.t-Button--large {
  padding: 1.4rem 1.6rem;
  line-height: 1.6rem;
  font-size: 1.4rem;
}

.t-MediaList--showBadges {
  display: table-cell;
}

.t-Cards--colorize .t-Cards-item:nth-child(2n)
 .t-Card-icon .t-Icon
, .t-Cards--colorize .t-Cards-item:nth-child(2n)
 .t-Card-wrap:before {
  background-color: #007aff;
}

.t-BadgeList--circular .t-BadgeList-value a {
  display: block;
  border-radius: 100%;
  text-decoration: none;
  transition: box-shadow .1s,color .1s,background-color .3s;
}

Each option adds one or more

CSS Classes

to the region.

apex.oracle.com/ut

Universal Theme Sample Application

Demo

apex.oracle.com/ut

Universal Theme Sample Application

apex.oracle.com/pls/apex/f?p=42

Template Options are to UI what Dynamic Actions are to JavaScript.

Organization

Template Option Groups

Some Template Options are Global

Some Template Options are Component Specific

Defining your own Template Options

Unsubscribing a Theme

WARNING!

Unsubscribing the Universal Theme will prevent it from receiving future upgrades.

Vote AMV6

apex.oracle.com/vote

Template Options are an APEX 5 Feature

Even upgraded applications get this feature!

Enabling "Other" Functionality

Use Template Options to drive JavaScript functionality

Demo

Carousel Region

Carousel

Carousel Options

Demo:

tts on previous themes

APEX Dictionary


APEX_APPL_TEMPLATE_OPTIONS


select REGION_TEMPLATE_OPTIONS
  from APEX_APPLICATION_PAGE_REGIONS
 where application_id = 89361
   and page_id = 5
   and name = :NAME

REGION_TEMPLATE_OPTIONS
-------------------------------------------------
#DEFAULT#:c-Region--Border:t-Form--stretchInputs


select apex_view_name || '.' || column_name result
from apex_dictionary
where column_name like '%TEMPLATE_OPTION%'

--------------------------------------------------------
APEX_APPLICATION_PAGES.PAGE_TEMPLATE_OPTIONS              
APEX_APPLICATION_PAGES.NAV_LIST_TEMPLATE_OPTIONS          
APEX_APPLICATION_PAGE_REGIONS.REGION_TEMPLATE_OPTIONS     
APEX_APPLICATION_PAGE_REGIONS.COMPONENT_TEMPLATE_OPTIONS  
APEX_APPLICATION_PAGE_BUTTONS.BUTTON_TEMPLATE_OPTIONS     
APEX_APPLICATION_PAGE_ITEMS.ITEM_TEMPLATE_OPTIONS         
APEX_APPLICATION_TEMP_BC.DEFAULT_TEMPLATE_OPTIONS         
APEX_APPLICATION_TEMP_BC.PRESET_TEMPLATE_OPTIONS          
APEX_APPLICATION_TEMP_BUTTON.DEFAULT_TEMPLATE_OPTIONS     
APEX_APPLICATION_TEMP_BUTTON.PRESET_TEMPLATE_OPTIONS      
APEX_APPLICATION_TEMP_LABEL.DEFAULT_TEMPLATE_OPTIONS      
APEX_APPLICATION_TEMP_LABEL.PRESET_TEMPLATE_OPTIONS       
APEX_APPLICATION_TEMP_LIST.DEFAULT_TEMPLATE_OPTIONS       
APEX_APPLICATION_TEMP_LIST.PRESET_TEMPLATE_OPTIONS        
APEX_APPLICATION_TEMP_PAGE.DEFAULT_TEMPLATE_OPTIONS       
APEX_APPLICATION_TEMP_PAGE.PRESET_TEMPLATE_OPTIONS        
APEX_APPLICATION_TEMP_REGION.DEFAULT_TEMPLATE_OPTIONS     
APEX_APPLICATION_TEMP_REGION.PRESET_TEMPLATE_OPTIONS      
APEX_APPLICATION_TEMP_REPORT.DEFAULT_TEMPLATE_OPTIONS     
APEX_APPLICATION_TEMP_REPORT.PRESET_TEMPLATE_OPTIONS      
APEX_APPL_TEMPLATE_OPTIONS.TEMPLATE_OPTION_ID             
APEX_APPL_USER_INTERFACES.NAV_LIST_TEMPLATE_OPTIONS       
APEX_APPL_USER_INTERFACES.NAV_BAR_TEMPLATE_OPTIONS        


 23 rows selected

Q&A

Template Options

Power Options

Jorge Rimblas

@rimblas

apex.world 
Your one stop for
 everything APEX