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

http://oliverlemm.blogspot.de/

https://twitter.com/OliverLemm




Union Investment Group…

■ one of the biggest german trustee for privat and institutional investor with an overallmanaged 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

marketreal 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




9

Themes

@OliverLemm




10

Reset & No Match

@OliverLemm




Buttons

Matching

12

Migration Helper?

APEX 4.x => ~ 50 templates modified

APEX 5 => 4 templates „modified“

only 4 adjusted templates

Templates

13@OliverLemm




14

Themeroller

Live CSS

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




18

UT – Grid Bug

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

http://rtgsrv1uit01:2309/i/uit/fpp/img/handshake_start.png

http://rtgsrv1uit01:2309/i/uit/fpp/img/handshake_repeat.png




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




list of values

modal dialogs

lov is visible whendeactivated

one modal page for all

adding icon on page load

open modal dialogby 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 possibleon 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 Screen Reader Mode On</a></div>

</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-chevron"></span></a>

</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

http://de.linkedin.com/in/OliverLemm

http://de.linkedin.com/in/OliverLemm








Mastering Universal Theme with corporate design from Union Investment

Technology

Transcript of Mastering Universal Theme with corporate design from Union Investment