The Basics of Fluid Component/Page Design
Author: Stephen Brawn, Northwestern University
Blog Series Overview:
The Campus Solutions 9.2 Blog Series is sponsored and hosted by the HEUG Campus Community Advisory Group, with the intention to assist and educate the user community on features and functionality specific to Campus Solutions 9.2. To view other articles in the series, please go to the Article Index for the Campus Solutions 9.2 Blog Series.
Article Overview:
The intent of this article is to overview fluid PeopleSoft components/pages and fluid design, as well as provide tips and references to get you started on a new way of thinking.
Article:
Starting with PeopleTools 8.54, PeopleSoft developers have had the ability to develop fluid components/pages instead of the classic (pixel perfect) pages that have been a part of the PeopleSoft product for many years. Additionally, in Campus Solutions 9.2, Oracle has been delivering many fluid pages and making them available in PUM images. As many institutions are starting to plan and develop for their Campus Solutions 9.2 upgrade, common questions have been arising, such as: What is fluid design? How do fluid components/pages differ from classic components/pages? How should we be thinking about fluid design differently than we are used to? And, are there any new development skills required to build fluid components/pages? In this article, we will give an overview of fluid design, offer tips for an approach, discuss the new PeopleSoft objects available, and overview the skills required to build fluid components/pages.
What Is Fluid Design
Fluid design is similar to its more widely known siblings, adaptive design and responsive design, but unlike in adaptive design – where the content on a page adjusts to the size of the applicable viewport – and responsive design – where content on the page adjusts based on defined break points - in fluid design, content on a page flows to occupy available space while taking up the same percentage of space regardless of the screen size/viewport. Fluid design is in contrast to classic design, which is pixel perfect and designed for a specific screen size.
How Do You Design A Fluid Page?
In order to design fluid pages effectively, you will need to think very differently than you would when designing a classic page that would always use a large screen.
Firstly, you should always design from the smallest device out. This will enable you to think about what the most important functionalities or navigation are on the page. Remember, that in fluid design, a key component is that more functionality - or navigation - will often be hidden for smaller form factors and visible on larger form factors. So, determining the most important functionality or navigation for a page is very important – especially if you expect that this page will often be accessed on a mobile device.
Secondly, you should make a conscious effort to put all of the most important functionality at the top of the page. When accessing pages on mobile devices, users tend to be concentrated on performing one or two small tasks that they need to do in a hurry or on the go, and often they do not take the time to search around a page or scroll down to the bottom to look for the task they intend to complete. So, placing the most important functionalities of a given page at the top, will allow for more ease of use by your constituents using mobile devices on the go.
Should All Classic Pages Be Converted To Fluid Pages?
Not all pages need to be – or should be - fluid pages. A good strategy to deciding what pages in your system should be converted to fluid, is to determine what pages are used most often. In Campus Solutions, a good place to start would be on the self-service pages, since most institutions have far greater numbers of self-service users than administrative users. Additionally, you may want to focus first on pages that contain content that have a high potential to be accessed by a mobile device, such as a class schedule, a grade view page, a payment page, or a map to locate classrooms. For consistency purposes, you may also want to consider converting pages that link off of other fluid pages.
Just because the ability to develop fluid pages exists, does not necessarily mean that you should deprecate – or stop developing – classic pages. Classic pages still provide a good option for pages that do not need to be used on smaller devices and need to contain more complex functionality, such as many administrative page. Additionally, classic pages – in many cases – will take less time to design and develop due to their pixel perfect nature.
New PeopleSoft Objects for Fluid Components/Pages
Fluid components and pages are built in Application Designer just like their classic counterparts, however instead of using a classic page object, a developer will need to use a new fluid page object. There is no new fluid component object – the classic component object is still used – however, this object now contains a new “Fluid” tab where the component needs to be fluid enable in order to enable it as a fluid component. Note that fluid enabled components can only contain fluid pages. Additionally, while the ability to use a class subpage inside a fluid page exists, it is not recommended since some page field level properties are not cross-compatible. Thus, for the best results and functionality, fluid pages should only contain fluid subpages. PeopleCode, however, can be safely cloned from a classic component/page to a fluid page, but don’t forget to update the names of any classic components or pages that are referenced in the PeopleCode to use their newly created fluid counterparts.
Additional Development Skills for Fluid Design
Fluid design uses CSS3 (Cascading Style Sheets), HTML5, and JavaScript to render the fluid page and provide mobile like functionality. While Institution’s PeopleSoft developers do not necessarily need to know CSS3 and HTML5 - because this framework and fluid style sheets are already delivered by Oracle - and your developers could develop fluid components/pages in PeopleSoft without these skills, this will limit your ability to customize the delivered fluid capabilities or create your own functionality. In fluid design, CSS3 handles the positioning of elements at run time, while HTML5 allows you to access more mobile specific functions, such as the phone’s GPS, accelerometer, or camera.
Oracle’s Approach to Delivering Fluid Pages
Oracle plans to deliver the fluid user experience for high-value, role-based users on an ongoing basis with PeopleSoft/Campus Solutions Update Images, for selection and implementation with the PeopleSoft Update Manager (PUM). Many fluid pages – mostly self-service – have already been delivered by Oracle in Campus Solutions 9.2 PUM images 1-4. Please note that for the PeopleSoft Fluid User Interface to be fully operable, you need to be on PeopleTools version 8.55.
References:
Converting Classic PIA Components to Fluid
An Oracle Red Paper on Converting Classic PIA Components to PeopleSoft Fluid User Interface can be found on the Oracle Support website by using the following Document ID: Doc ID: 1984833.1.
PeopleSoft Fluid UX Standards
The following Oracle website is a great resource and provides guidance on recommended fluid development standards. http://docs.oracle.com/cd/E65859_01/fluid_ux/index.html
PeopleSoft CS 9.2 PUM Update Image 4
CS 9.2 PUM Update Image 4 is now available from the PeopleSoft Update Manager (PUM) Home Page (MOS Doc ID 1641843.2) by selecting the Update Image Home Pages tab, choosing Campus Solutions Update Image Home Page and expanding the section CS Update Image Link.
The Campus Solutions Update Image Home Page Additional Documentation section contains convenient links including The PeopleSoft Campus Solutions 9.2 Documentation Home Page (Doc ID 2013381.1), PeopleSoft CS 9.2 Update Image Overviews (Doc ID 2116071.1) and PeopleSoft 9.2: Campus Solutions Update Image Documentation (Doc ID 2117001.2).
CS 9.2 PUM Image 4 contains Campus Solutions Fluid UI features which are highlighted in the video: PeopleSoft Fluid UI Campus Solutions 9.2 PUM Image 4 Video Feature Overview.
PeopleSoft CS 9.2 PUM Update Image 3
CS 9.2 PUM Update Image 3 is now available from the PeopleSoft Update Manager (PUM) Home Page (MOS Doc ID 1641843.2) by selecting the Update Image Home Pages tab, choosing Campus Solutions Update Image Home Page and expanding the section CS Update Image Link.
The Campus Solutions Update Image Home Page Additional Documentation section contains convenient links including The PeopleSoft Campus Solutions 9.2 Documentation Home Page (Doc ID 2013381.1), the PeopleSoft CS 9.2 Update Image Overview (Doc ID 2116071.1) and PeopleSoft 9.2: Campus Solutions Update Image Documentation (Doc ID 2117001.2).
CS 9.2 PUM Image 3 contains a number of Campus Solutions Fluid UI features which are highlighted in the video: Campus Solutions 9.2 Fluid UI PUM Image 3 Video Feature Overview
PeopleSoft CS 9.2 PUM Update Image 2
The CS 9.2 PUM Update Image 2 is now available from the PeopleSoft Update Manager (PUM) Home Page (MOS Doc ID 1641843.2) by selecting the Update Image Home Pages tab, choosing Campus Solutions Update Image Home Page and expanding the section CS Update Image Link.
The PeopleSoft Campus Solutions 9.2 Documentation Home Page (Doc ID 2013381.1) section on CS 9.2 Release Documentation contains links to the PeopleSoft CS 9.2 Update Image Overview (Doc ID 2116071.1), the PeopleSoft Campus Solutions Cumulative Feature Overview tool, and CS 9.2 Online Help.
CS 9.2 PUM Image 2 contains a number of Campus Solutions Fluid UI features which are highlighted in the video: Introducing the PeopleSoft Fluid UI in Campus Solutions 9.2.
PeopleSoft CS 9.0 to 9.2 – PeopleTools 8.55 Upgrade
The CS 9.2 Upgrade for PeopleTools 8.55 is available via My Oracle Support, PeopleSoft Campus Solutions Upgrade Home Page (Doc ID 2078564.2). This MOS site contains documentation and an important video for performing the CS 9.2/PT 8.55 upgrade. A reminder: the process of obtaining the upgrade template has changed with PeopleTools 8.55 so we encourage you to review Getting Started on Your PeopleSoft Upgrade (with PeopleTools 8.55) available on the MOS site Getting Started on Your PeopleSoft Upgrade (using Change Assistant) (Doc ID 739129.1).
PeopleSoft CS 9.2 PUM Update Image 1
The CS 9.2 PUM Update Image 1 is now available from the PeopleSoft Update Manager (PUM) Home Page (Doc ID 1641843.2) by selecting the Update Image Home Pages tab, choosing Campus Solutions Update Image Home Page and expanding the section CS Update Image Link. The PeopleSoft Campus Solutions 9.2 Documentation Home Page (Doc ID 2013381.1) section on CS 9.2 Release Documentation contains links to the PeopleSoft CS 9.2 Update Image Overview (Doc ID 2116071.1), the PeopleSoft Campus Solutions Cumulative Feature Overview tool, and CS 9.2 Online Help.
PeopleSoft Planned Features and Enhancements
Information on currently planned new features and functionality can be found on the PeopleSoft Planned Features and Enhancements page (Doc ID 1966243.2).
Advisor Webcasts: Campus Solutions 9.2 Upgrade and PUM Image Updates
Campus Solutions technical users, functional users, and system administrators can stay informed with this one-hour advisor webcast recording that provides an overview of our latest upgrade path to CS 9.2 and the latest CS 9.2 PUM Update Image. This recording can be found on My Oracle Support using Doc ID (1456265.1).