peoplesoft-fluid-user-interface

Understanding PeopleSoft Fluid User Interface

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 smartphones to tablets to desktops/laptops. Fluid also provides a common user experience on a variety of devices regardless of screen size. Through this responsive design, the browser will resize itself depending on device size.

The PeopleSoft Fluid UI is aimed at providing a modern and user-centric experience for PeopleSoft application users. It delivers a responsive, mobile-friendly interface with intuitive navigation, personalization options, and touch-optimized interactions, enabling users to efficiently perform tasks and access information from various devices.

 

Some of the applications of Peoplesoft Fluid:

  • Pages
  • Pivot grids
  • Components of applications

Let’s have a look at the home page that is rendered after the latest Peopletools has been used.

 

PeopleSoft Fluid User Interface - 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 the fluid model provides the end user with a new User experience that renders well on the dashboard or the home pages.
Tiles/Grouplets are the lifelines of the 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 the user’s device.
  • Can be personalized based on needs e.g., Tiles can be added or deleted from the homepage based on personal needs.

 

Development Steps

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

  • To create a fluid homepage for the 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. The usage Type should be Landing Page as shown in the figure below.

 

PeopleSoft-Fluid-User-Interface

 

2) Development of a Fluid Component

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

PeopleSoft-Fluid-User-Interface

 

Steps for developing a new fluid page in PeopleSoft

Step 1: Create a new fluid page

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

 

Step 2: Select Fluid UI Page Properties

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

PeopleSoft-Fluid-User-Interface

In-Page properties, users should focus more on Form Factor Override and Suppress Form Factor.
Form Factor Override: Overrides the style of a page based on device size.

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

 

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

PeopleSoft-Fluid-User-Interface

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

 

Step 5: Add the Tile on the home page

Navigation: Main Menu > Fluid Home > Homepage

  • Click on Action Widget
  • Click on Personalize
  • Click on Add Tile
  • Select the content reference which has to be added as a tile.
  • Fluid UI is ready for testing.

 

PeopleSoft-Fluid-User-Interface

 

  • Clicking on the tile ‘Applicant List’ will open the designed Fluid UI page.

 

PeopleSoft Fluid User Interface | Development of a Fluid Component | Applicant List

 

Best Practices:

  • Always check Display on the 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. The 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 adding a person, and job data that demand 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 the fluid.

 

Author: Madhur Mohini, CSM
Email: madhur.mohini@kovaion.com

PeopleSoft Services

Implement, Enhance, Update & Support PeopleSoft at Zero Cost!

Read More