Responsive Design using PeopleTools

8.54CES Developer 2015 – BYU-Hawaii

Eliando Kentjana Putra

• In Mid 2014, Oracle-PeopleSoft made a major breakthrough in PeopleTools Technology and PeopleSoft Internet Architecture (PIA). With PeopleTools 8.54, Developers can now have an option to build applications in Fluid UI.

• Fluid UI enables PeopleSoft MAP (Mobile Application Platform) to create a responsive design that will conform to the user’s devices, PC/laptop, tablets and smart phones.

• Fluid UI uses modern web technology such as HTML5, CSS3, Ajax, jQuery, Javascript, etc.

• Fluid UI moves away from the concept of pixel-perfect page layout, that means no more <table>, use more <div> in the HTML source.

Fluid UI Introduction

• Groupbox is your primary tool to create div tag container for your HTML source and use it generously.

• Save time by creating a fluid page from a layout page as a template. There are some delivered templates that you can use or if you prefer to build one yourself, you can save it as a layout page for future reference.

• Understand and know when to use delivered PeopleSoft commonly used style classes (Refer to Appendix 4 of the Oracle Red Paper: Converting Classic PIA Components to PeopleSoft Fluid User Interface.

• Create a custom application class which extends to the application class fluid masterlist.

Fluid UI Tips and Tricks

Fluid UI Browser Compatibility

• PC (minimum browser version)• Internet Explorer 11• Firefox 24• Chrome 35

• Mobile (minimum browser version)• Internet Explorer 11 for Windows 8.1 (tablets only, not smartphones)• Safari on iOS7 • Chrome on Android 4.4

• PeopleTools 8.54: Fluid Documentation Update• PeopleTools 8.54: Fluid User Interface Developer’s Guide• Oracle

Red Paper: Converting Classic PIA Components to PeopleSoft Fluid User Interface

• PeopleBooks References:• PeopleSoft PeopleTools 8.54: Fluid User Interface Developer’s Guide• PeopleSoft PeopleTools

8.54: Applications User’s Guide, “Working With PeopleSoft Fluid User Interface”

Fluid UI Helpful Docs

Let’s See It