USING THE POWER OF FLUID TO BUILD MODERN

USING THE POWER OF FLUID TO BUILD MODERN SELFSERVICE FUNCTIONALITY – PART 2 (TECHNICAL) SESSION 37045 Wed, Oct 12, 2016 (01: 30 PM - 02: 30 PM) EMEA ALLIANCE 11 -12 OCTOBER 2016

PRESENTERS Christien Krens Menno Kuipers Thijs Steenbergen Functional /Technical consultant Functional /Technical developer Functional /Technical consultant Sa. NS Expertise Centrum christien. krens@sans- menno. kuipers@sans. Functional/Technical developer ec. nl consultant Oracle/Peoplesoft ec. nl Oracle/Peoplesoft since 2003 since 2004 thijs. steenbergen@sans- Functional/Technical ec. nl consultant Oracle/Peoplesoft since 2007 EMEA ALLIANCE 11 -12 OCTOBER 2016

Sa. NS Expertise Centrum Shared People. Soft Campus Solutions Maintenance, Development and Innovation EMEA ALLIANCE 11 -12 OCTOBER 2016

EMEA ALLIANCE 11 -12 OCTOBER 2016

AGENDA 1 The fluid projects, classic vs fluid design 2 Learning curve 3 Technical aspects, styling and examples 4 Results so far, how does it look on desktop, tablet or smartphone? 5 Some thoughts. . EMEA ALLIANCE 11 -12 OCTOBER 2016

THE FLUID PROJECTS Oracle 12 C Peopletools 8. 55. 09 Peoplesoft 9. 0 Bundle#41 ML EMEA ALLIANCE 11 -12 OCTOBER 2016

THE FLUID PROJECTS Self Service Faculty Members Self Service Students ATI Project (Admission based on EMS) EMEA ALLIANCE 11 -12 OCTOBER 2016

CLASSIC VS FLUID DESIGN SELFSERVICE FACULTY MEMBERS EMEA ALLIANCE 11 -12 OCTOBER 2016

CLASSIC VS FLUID DESIGN SELFSERVICE STUDENTS EMEA ALLIANCE 11 -12 OCTOBER 2016

FLUID DESIGN ATI PROJECT (ADMISSION, BASED ON EVALUATION MANAGEMENT SYSTEM EMS) EMEA ALLIANCE 11 -12 OCTOBER 2016

FRAMEWORK GROUP BOXES, CONTAINERS ACCESSIBILITY Screenreader EMEA ALLIANCE 11 -12 OCTOBER 2016

And some say it’s so easy…. . . . And some say it’s so easy…. . • LEARNING CURVE • • Selfservice Faculty members (Hv. A) Selfservice Students (Hv. A) ATI (Leiden) EMEA ALLIANCE 11 -12 OCTOBER 2016

LEARNING ASPECTS 1 Responsive design for desktop, tablet, smartphone 2 Searching and filtering, template 3 New coding approach 4 Styling: CSS, HTML 5 5 Navigation 6 Related actions 7 Master/detail pages vs two panel 8 Dynamic and static Tiles EMEA ALLIANCE 11 -12 OCTOBER 2016

SOME NEW VOCABULAIRY LEARNED WHILE DEVELOPING IN FLUID And some say it’s so easy…. . EMEA ALLIANCE 11 -12 OCTOBER 2016

SOME EMOTIONS WHILE DEVELOPING IN FLUID And some say it’s so easy…. . EMEA ALLIANCE 11 -12 OCTOBER 2016

TECHNICAL ASPECTS, STYLING AND EXAMPLES • • • Selfservice Faculty members (Hv. A) Selfservice Students (Hv. A) ATI (Leiden) EMEA ALLIANCE 11 -12 OCTOBER 2016

SEARCH, FILTER AND SORTING TEMPLATE Define standards and (re) use in pages Bulk action men u Extra buttons (info, popup for population selection) Free search Filter Sort EMEA ALLIANCE 11 -12 OCTOBER 2016

SEARCH, FILTER AND SORTING FILTERING ON SPECIFIC ROWS IN THE GRID Press Secondary page EMEA ALLIANCE 11 -12 OCTOBER 2016

SEARCH, FILTER AND SORTING FILTERING ON SPECIFIC ROWS IN THE GRID Ø Only rows shown that meet the filtercriteria Ø Filter button is given a color to indicate that filters are set (style psc_on) Ø Selected filter(s) are shown on the right and can be easily removed Selected filters EMEA ALLIANCE 11 -12 OCTOBER 2016

SEARCH, FILTER AND SORTING CALLING SECONDARY PAGE Ø Modal display options (fullscreen, width, height, auto close on click etc) Ø Use settransferattributes to make sure popup is not added to browser history EMEA ALLIANCE 11 -12 OCTOBER 2016

NEW CODING APPROACH FLUID DEVELOPMENT Ø No more what you see is what you get Ø Completely new design of components / pages / Peoplecode Browser Ø Use (lots of) groupboxes for positioning and styling view Application designer view EMEA ALLIANCE 11 -12 OCTOBER 2016

NEW CODING APPROACH FLUID DEVELOPMENT Presentation defined by adding styles to fluid tab or in peoplecode EMEA ALLIANCE 11 -12 OCTOBER 2016

NEW CODING APPROACH FLUID DEVELOPMENT Make suitable for different browsers / devices EMEA ALLIANCE 11 -12 OCTOBER 2016

STYLESHEETS AND CSS BRANDING OBJECTS Ø New features (navigation) Ø Using CSS / Stylesheet / Images Add custom stylesheet to component EMEA ALLIANCE 11 -12 OCTOBER 2016

STYLESHEETS AND CSS BRANDING OBJECTS Using custom classes or pre-defined classes Oracle CSS guide Custom CSS classes SNS_body { font-family: "Open Sans", Helvetica, sans-serif; font-size: 15 px; line-height: 22. 5 px; color: #000000; background-color: white; } EMEA ALLIANCE 11 -12 OCTOBER 2016

STYLESHEETS AND CSS BRANDING OBJECTS Ø Editing Stylesheet online vs app designer Ø Use one way of editing or you could loose the formatting EMEA ALLIANCE 11 -12 OCTOBER 2016

STYLESHEETS ANDWithout CSS WORKING WITH MULTIPLE COLUMNS With CSS EMEA ALLIANCE 11 -12 OCTOBER 2016

STYLESHEETS AND CSS WORKING WITH PARENT CHILD RELATIONS Alter standard classes only in certain combinations !!! Example: Altering the textcolor of “not published” button to RED EMEA ALLIANCE 11 -12 OCTOBER 2016

STYLESHEETS AND CSS WORKING WITH PARENT CHILD RELATIONS Using the browsers HTML element inspector, look for the class to modify EMEA ALLIANCE 11 -12 OCTOBER 2016

STYLESHEETS AND CSS WORKING WITH PARENT CHILD RELATIONS Solution: Make a unique combination of classes, look for the parent classes per HTML element: . pts_breadcrumblabel >. ps-button-wrapper >. psbutton >. ps-text{ color: red; } Add this to your stylesheet EMEA ALLIANCE 11 -12 OCTOBER 2016

NAVIGATION EXECUTE PEOPLECODE ON ROW Navigation using execute peoplecode on row click EMEA ALLIANCE 11 -12 OCTOBER 2016

NAVIGATION RADIO BUTTONS Using radio buttons as page tabs - Mulitple grids on page Subpage withradio button and groupbox style ps_button_bar On pressing radio button you hide 1 grid and show the other EMEA ALLIANCE 11 -12 OCTOBER 2016

RELATED ACTIONS ANOTHER WAY OF NAVIGATION EMEA ALLIANCE 11 -12 OCTOBER 2016

RELATED ACTIONS DEFINING RELATED ACTIONS: SETUP (1) Note: If related action is not setup correctly, the drop-down menus show no action items; instead, “No Actions Available” is shown. On the General page of the Web Profile you are using, enter a value for the Authentication Domain EMEA ALLIANCE 11 -12 OCTOBER 2016

RELATED ACTIONS DEFINING RELATED ACTIONS: SETUP (2) For each active Node (defined under Integration Broker folder under People. Tools), in the Portal page, enter values for the Content and Portal servlets URIs Do not forget to bounce the application and web servers after making modifications !! EMEA ALLIANCE 11 -12 OCTOBER 2016

RELATED ACTIONS DEFINING RELATED ACTIONS: CONFIGURATION (1) Define content service for menu item (component to transfer to) EMEA ALLIANCE 11 -12 OCTOBER 2016

RELATED ACTIONS DEFINING RELATED ACTIONS: CONFIGURATION (2) Define related action menu items in manage related content service - Map page field to service parameter (emplid) - Map page field that will contain the menu EMEA ALLIANCE 11 -12 OCTOBER 2016

MASTER DETAIL VERSUS TWO PANEL LAYOUT - Default page template in app designer - Every page in a component must have this layout - Transfer to page causes complete refresh of left side (part of page) EMEA ALLIANCE 11 -12 OCTOBER 2016

MASTER DETAIL VERSUS TWO PANEL LAYOUT MASTER DETAIL - Another way of creating twopanel layout components recommended by Oracle - Master/detail component contains at least 1 master and 1 detail page Master page (type side page 1) Detail page (type md target) - The master contains the menu. Standard package available for loading content references. (CS 92 CS 9. 0) - Detail page is a empty groupbox with special style in which the reference (page) is loaded through javascript. EMEA ALLIANCE 11 -12 OCTOBER 2016

MASTER DETAIL VERSUS TWO PANEL LAYOUT WITH CUSTOMIZED SETUP Left side menu with dynamic setup Customized table for the menu item collections In prebuild peoplecode an application class is called that loads the collection. The name of the collection is passed as parameter to the app class EMEA ALLIANCE 11 -12 OCTOBER 2016

MASTER DETAIL VERSUS TWO PANEL LAYOUT EXPERIENCES SO FAR Two panel Master detail Left side copied on every page in components. Contents loaded again on every mouseclick Left side only in the master page and loaded once. Only content in detail page changes at mouse click Left side with menu refreshed when clicking new menu item No refresh of left side when clicking new menu item Objects on left side can be easily changed Difficult to make changes to left side based upon action in detail page (Javascripting needed) Better use when left side should be changed dynamically Excellent use with simple navigation collections EMEA ALLIANCE 11 -12 OCTOBER 2016

LABELING USING HRMS TEXT CATALOG Dyamically change a label in the page Custom functionality using HRMS text catalog Must become “Period” EMEA ALLIANCE 11 -12 OCTOBER 2016

LABELING USING HRMS TEXT CATALOG Change label in text catalog by giving component name and record field You need to now the record field that represents the column (in this case a groupbox) EMEA ALLIANCE 11 -12 OCTOBER 2016

TILES STATIC, DYNAMIC AND TO OTHER PAGE WITH TILES EMEA ALLIANCE 11 -12 OCTOBER 2016

HOW DOES IT LOOK ON DESKTOP, TABLET AND SMARTPHONE • • • Selfservice Faculty members (Hv. A) Selfservice Students (Hv. A) ATI (Leiden) EMEA ALLIANCE 11 -12 OCTOBER 2016

HOW DOES IT LOOK ON DESKTOP, TABLET AND SMARTPHONE Fluid demo student self service. MOV Fluid demo instructor self service. MOV EMEA ALLIANCE 11 -12 OCTOBER 2016

SOME THOUGHTS. . • • • Selfservice Faculty members (Hv. A) Selfservice Students (Hv. A) ATI (Leiden) EMEA ALLIANCE 11 -12 OCTOBER 2016

SOME THOUGHTS. . ØFar more work then expected !! ØUser interface should be clear at start (do not underestimate design!) ØComplete redesign of components / pages / peoplecode ØTesting needed on diversity of devices and browsers ØStyling, styling…. ØFunctional, technical and styling specialist(s) needed ØDesign and agree on a generic template and……STICK TO IT ! Ø……. EMEA ALLIANCE 11 -12 OCTOBER 2016

QUESTIONS? ? EMEA ALLIANCE 11 -12 OCTOBER 2016

PRESENTERS Christien Krens Menno Kuipers Thijs Steenbergen Functional /Technical consultant Functional /Technical developer Functional /Technical consultant Sa. NS Expertise Centrum christien. krens@sans- menno. kuipers@sans. Functional/Technical developer ec. nl consultant Oracle/Peoplesoft ec. nl Oracle/Peoplesoft since 2003 since 2004 thijs. steenbergen@sans- Functional/Technical ec. nl consultant Oracle/Peoplesoft since 2007 ALLIANCE PRESENTATIONS WILL BE AVAILABLE FOR DOWNLOAD FROM THE CONFERENCE SITE EMEA ALLIANCE 11 -12 OCTOBER 2016

THANK YOU! EMEA ALLIANCE 11 -12 OCTOBER 2016