1. Responsive Design using PeopleTools 8.54
CES Developer 2015 – BYU-Hawaii
Eliando Kentjana Putra

2. Fluid UI Introduction
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.

3. Fluid UI Tips and Tricks
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.

4. 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

5. Fluid UI Helpful Docs 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”

6. Let’s See It