Thursday, 8 January 2015

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
  • 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


  1. is it possible to change the tile image at run time in fluid mode?

    1. Yes, but you aren't exactly changing a tile image, but rather the representation of the tile. Tiles do not need to be images. They can be page fragments or iScripts. If your tile is a page fragment (group box) or an iScript, then you can use PeopleCode to determine what content to display in the "Tile."

  2. I have personally used several WP landing page creator software, but I liked using InstaBuilder2.0 the most, because of its user friendly interface that allows total freedom of making experiments.

  3. Is the fluid component able to support component interface tool and web services?

  4. Hi, Can I just say what a relief to find someone who actually knows what theyre talking about on the internet. You definitely know how to bring an issue to light and make it important. More people need to read this and understand this side of the story. I cant believe youre not more popular because you definitely have the gift.

  5. Utilizing an exposition composing administration or employing somebody who can compose your paper could appear to be paper writers for hire somewhat obscure from the outset however have confidence that that multitude of papers are composed by experts and are totally lawful.

  6. Curiously, recruiting somebody to finish your work isn't an infringement of intellectual Write Essays For Money Uk property regulation in the us and the uk, so understudies can not be expected to take responsibility for a common or criminal offense. Simultaneously, affirmation necessities make editing a sort of copyright infringement as well.