PeopleSoft Fluid User Interface

 With the latest release of PeopleTools 8.54  , Oracle has introduced  the Fluid User  Interface experience.

The Fluid UI provides the users with the ability to access PeopleSoft applications across a variety of form factors from smart phones to tablets to desktops/laptops. Fluid also provides a common user experience on variety of devices regardless of the screen size. Through this responsive design, browser will resize itself depending on device size.

Lets have  a look at the home page that is rendered after the latest peopletools has been used.

The important features of home pages are as below:

•  Home Pages
•  Tiles
• PeopleSoft Search widget
•   Notifications widget
• Actions widget
• Navigation Bar widget.

The fundamental feature of the Fluid Model is the Home Page which provides the base for the users or the customers to navigate and carry out the respective works.

In a way Fluid home pages are similar to the current home pages but  fluid model provides the end user with the new User experience that renders well on the dashboard or the home pages.

Tiles/Grouplets are lifeline of Fluid UI page. Tiles help the user to navigate to a fluid page or classic PIA page.

Business Benefits

•  Device independent
• Gives the response based on user device
• Can be personalized based on needs e.g. Tiles can be added or deleted from homepage based on personal needs

      Development Steps 

Let us design a simple fluid UI page for following requirement..

• To create a fluid homepage for Recruiter
• To add a tile for Applicant search

      1) Development of Fluid Home Page

Developing a fluid home page is fairly easy and is done through PIA.

Navigation:  Peopletools> Structure and Content>Fluid Structure and Content>Fluid Homepages.

Add a new homepage. Usage Type should be Landing Page as shown in figure below.

       2)      Development of a Fluid Component

Development of a fluid component goes in the same traditional PeopleSoft way- creation of fields, record, page, component, menu and finally creating the content reference. Fluid properties are defined at page and component level.

Step1: Create a new fluid page

While creating a new fluid page, choose Layout Page. Layout page is the template page for a fluid UI page.

Step2: Select Fluid UI Page Properties

After page is created, fluid UI properties can be set in Page properties.

In Page properties, user should focus more on Form Factor Override and Suppress Form Factor.

Form Factor Override: Overrides the style of page based on device size.

Suppress Form Factor: Suppresses the page from displaying based on device size. E.g.  If Small is checked, page will not appear on most smart phones.

Step 3: Create a new component.

Creating a new fluid component works in the same traditional PIA way. But the search pages are not displayed for fluid applications.

Step 4: Set component fluid properties

As shown in above figure, there are two main checkboxes, Fluid mode and Small Form Factor Optimized

Step6: Add the Tile in home page

Navigation: Main Menu>Fluid Home>Homepage 

1. Click on Action Widget
2. Click on Personalize
3. Click on Add Tile
4. Select the content reference which has to be added as a tile.

  Fluid UI is ready for test.

Clicking on tile 'Applicant List' will open  the designed Fluid UI page.

Best Practices:

 Always check Display on Small form Factor Homepage while creating the content reference. This will show the tile on small devices

.

Limitations:

• Classic PIA search for a component does not work in Fluid. User should create a separate search by selecting the correct layout.
• Currently, only light weighted applications can be deployed in fluid mode e.g. components like add a person, job data which demands heavy data entry are not suited for fluid mode.
• Currently, some features, like spell check, rich text editor, Find In for grids, Download to Excel, modal movement or re-sizing, are not available in fluid.

         Author: Madhur Mohini

  Kovaion-Peoplesoft Consulting Practice

         Email: madhur.mohini@kovaion.com