Mastering Universal Theme with corporate design from Union Investment

Mastering Universal
Theme with
Corporate Design
from Union Investment
Oliver Lemm
APEX World
31th of march 2017

 Oliver Lemm
 since february 2007 working for MT AG in Ratingen
 Competence Center Leader APEX & Service Center Leader APEX
 Diploma applied computer science at the university of Duisburg-Essen
 Projectleader, IT-Architect and Developer
 working with Oracle Databases and Oracle Application Express since 2007
 Blog http://oliverlemm.blogspot.de
 Twitter https://twitter.com/OliverLemm
2
about me
@OliverLemm

Union Investment Group…
■ one of the biggest german trustee for privat and institutional investor with an overall
managed asset of 275 billions €*
■ Headquarter in Frankfurt am Main
■ Branches in Luxembourg, Austria, Poland and Hongkong
■ more than1.150 funds*
■ ~ 2.750 Employee*
■ part of finance group
the customer
*figures by end of may 2016
3

Fonds
4
what means funds business?
investment company pound
client
manages stocks
Monetary transactions
holds shares
buys shares
informs
€
Renten
GeldmarktImmobilien
Aktien
@OliverLemm

Fundsprofil „UniSuperInvest“
• issued 15.11.2016
• invest in
• 20-30% stocks
• 20-30% bonds
• 20-30% real estates
• 20-30% finance market
• hands off funk bonds!
• benchmark: bankbook
• cost: low
• Appropriation of earnings: distributing
• other agreements: performance only
positive ;-)
5
what is a fundsprofil?
bonds
finance
market
real estate
stocks
@OliverLemm

■ FondsProfiler is used by 950 users and holds 12.900 fundsprofiles (1790 active)
■ User survey results in these changes:
■ intuitive control
■ less mouse clicks
■ faster approval process (4-eyes)
■ faster entry and addional functions
■ easier input
■ use of mobile devices
■ using the new corporate design of Union Investment
motivation for FondsProfiler 2.0 ?
6@OliverLemm

facts & figures
Independent Technology House
with Cross-Industry Expertise
Headquarter
Ratingen
(North Rhine – Westphalia)
180
Employees
Founded
1994
Branches
Dortmund, Cologne,
Frankfurt
Top Company
for Trainees &
Students
Privately-
Owned
Corporation
Oracle
Platinum
Partner
28 Mio. Euro
Revenue
7@OliverLemm

 APEX 4.1.0
 Theme 22
 100 Pages
 ~ 4000 lines of JavaScript
 ~ 1000 lines of CSS
 ~ 2000 database objects
8
starting in 2011
@OliverLemm

10
Reset & No Match
@OliverLemm

 APEX 4.x => ~ 50 templates modified
 APEX 5 => 4 templates „modified“
only 4 adjusted templates
Templates
13@OliverLemm

 standard icon
 customer
loading icon
 solution
.u-Processing {
display:none!important;
}
hide
15@OliverLemm

16
Loading Icon
function addSpinnerToAjaxCalls() {
$(".fpp-spinner-span").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxStop", function() {
$(this).hide();
}).bind("ajaxError", function() {
$(this).hide();
});
}
@OliverLemm

17
one font size for all standard elements
font size
body { font-size: 17px; }
@OliverLemm

standard vs customized
Header
@OliverLemm

.t-Header {
background-image: url(/i/uit/fpp/img/handshake_start.png),
url(/i/uit/fpp/img/handshake_repeat.png);
background-repeat: no-repeat, repeat-x;
}
image
Header
header {
background-color: #ffffff;
background-size: auto 120px;
height: 176px;
}
.t-Header-branding {
background-color: rgba(0,0,0,0);
position: static;
}
21@OliverLemm

navigation bar
Header
22@OliverLemm

.t-NavigationBar-item {
display: list-item;
padding: 0px;
}
navigation bar
Header
t-Header-navBar {
text-align:left;
float:right;
margin-top:5px;
}
.t-NavigationBar-item .t-Button--header {
padding: 6px!important;
top: 5px;
}
23@OliverLemm

.t-Header-controls {
top: 137px;
}
set navigation tree icon
Header
.t-PageBody--leftNav .t-Body-nav,
.apex-side-nav .t-Body-nav,
.apex-side-nav .t-Body-actions,
.apex-side-nav .t-Body-title {
top: 176px;
}
24@OliverLemm

 lov is visible when
deactivated
 one modal page for all
 adding icon on page load
 open modal dialog
by dynamic action
list of values
modal dialogs

custom icons
corporate design by Union Investment
27@OliverLemm

28
custom icons

<button class="t-Button t-Button--icon #BUTTON_CSS_CLASSES#" #BUTTON_ATTRIBUTES#
onclick="#JAVASCRIPT#" type="button" id="#BUTTON_ID#">
<span class="t-Icon t-Icon--left #ICON_CSS_CLASSES#" aria-hidden="true"></span>
<span class="t-Button-label">#LABEL#</span>
<span class="t-Icon t-Icon--right #ICON_CSS_CLASSES#" aria-hidden="true"></span>
</button>
button template
<button class="t-Button t-Button--icon fpp-uicd-icon-button #BUTTON_CSS_CLASSES#"
#BUTTON_ATTRIBUTES# onclick="#JAVASCRIPT#" type="button" id="#BUTTON_ID#">
<span data-icon="#ICON_CSS_CLASSES#" class="t-Icon t-Icon--left" aria-hidden="true"></span>
<span class="t-Button-label">#LABEL#</span>
<span data-icon="#ICON_CSS_CLASSES#" class="t-Icon t-Icon--right" aria-hidden="true"></span>
</button>
standard
customized
229@OliverLemm

adjusted template
CSS class of custom icon
buttons
30@OliverLemm

31
enlarge
navigation tree
http://max-tremblay.blogspot.de/2016/01/accordion-like-navigation-menu.html
@OliverLemm

32
template
navigation tree
missing target attribute?
@OliverLemm

 defining width => works (but max 220px?) 
 use no icons => customized & works 
 defining opening status => customized & works 
 opening subtree by clicking text => customized & works 
 adjustment in color by adding class => customized & works 
 adding new attributes in tree => doesn‘t work 
navigation tree
33@OliverLemm

 changing and adding template options not possible
on subscribed Universal Theme templates
 adding new template groups not possible when subscribed to Universal Theme
 using template options and Universal Theme?
template options?
not useable 
in future ?
34@OliverLemm

Standard
custom
custom vs standard
footer
35@OliverLemm

standard UT 5.0 vs UT 5.1
footer
<footer class="t-Footer">
release 2.0
<a href="f?p=14541:1:111065369566416:SET_SESSION_SCREEN_READER_ON::::">
Set Screen Reader Mode On
</a>
</footer>
<footer class="t-Footer">
<div class="t-Footer-body">
<div class="t-Footer-content"></div>
<div class="t-Footer-apex">
<div class="t-Footer-version">release 1.0</div>
<div class="t-Footer-customize"></div>
<div class="t-Footer-srMode"><a href="f?p=156:1:1682863063487:SET_SESSION_SCREEN_READER_ON::::">Set S
</div>
</div>
<div class="t-Footer-top">
<a href="#top" class="t-Footer-topButton" id="t_Footer_topButton" title="Start of page"><span class="a-Icon icon-up-che
</div>
</footer>

.t-Footer {
visibility: hidden;
}
right bottom
footer
.fpp-dialog-footer-region {
padding: 12px;
}
.fpp-app_version {
float:right;
font-size:11px;
visibility: visible;
}
.t-Body-topButton {
display:none;
}
Custom region on global page
with css class “fpp_app_version”
37@OliverLemm

same item arrangement
grid layout
 overall layout needs more room
 item arrangment „problem“
38@OliverLemm

 subregions
 custom CSS like
„fpp-no-grid-on-row“
 individual CSS
 JavaScript
„solve“ it with
grid layout
.fpp-no-grid-on-row .col-1,
.fpp-no-grid-on-row .col-11
.fpp-no-grid-on-row .col-12 {
width: auto!important;
}
339@OliverLemm

 Universal Theme with Corporate Design is possible
 good CSS Knowledge
 need of complex CSS & jQuery selector
 use modal dialogs
 staying with Theme Subscription works,
 but release subscription would make some changes easier
 Grid Layout is a big change
conclusion
41@OliverLemm

APEX Generator
The Clone Wars
Moritz Klein
more from MT AG
Affordable Workflow Options
for your APEX App
Niels de Bruijn
42@OliverLemm

9.-11. Mai 2017
in Berlin
apex.doag.org

thank you
see you in berlin
@OliverLemm http://oliverlemm.blogspot.de/ http://de.linkedin.com/in/OliverLemm

Mastering Universal Theme with corporate design from Union Investment

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Mastering Universal Theme with corporate design from Union Investment

Similar to Mastering Universal Theme with corporate design from Union Investment (20)

More from Oliver Lemm

More from Oliver Lemm (20)

Recently uploaded

Recently uploaded (20)

Mastering Universal Theme with corporate design from Union Investment