6 Minute Read
Posted by Arvind Rajan

Tags: Fluid UI

Proficient young male employee with eyeglasses and checkered shirt, explaining a business analysis displayed on the monitor of a desktop PC to his female colleague, in the interior of a modern office
PeopleSoft page composer enables your administrators to design the content and layout of fluid approval pages based on your business needs using a desktop, laptop or smartphone. No need to code or customize PeopleSoft application pages and the system makes real-time changes.
In this blog, we will modify a page on a desktop system and show you how these changes appear on a mobile device. Before we make any changes let’s take a look at the page using a mobile device.
  • The page we want to change is in approvals, so tap the approval tile to start. 
  • We’re going to make a change to the expense approvals page so expand the left pane to see more details. This shows you all of your pending approvals group types.
  • Click on the expense report type and select an expense report waiting for approval.
PeopleSoft Page Composer for Approvals

Three changes to this page using page composer are as follows:

 1. Adding a new field label creation date to the summary section.
 2. Change the name of the description field to the expense report.
 3. Highlight the name of the person submitting the report in red


PeopleSoft Page Composer for Approvals

Now let’s modify the page from a desktop using Page composer.

Navigation: Enterprise components > Page composer

Select Definition as Approvals. object type as a component , and Fluid approvals component as ExpenseReport Approval and search.

Page composer

Click on the Header detail page on the left panel. Now we are able to edit the page.
Page composer
Change #1:
 By default, the page is optimized for desktop displays but it imports different layouts for different devices, in our case we want to use a mobile device to be to pay. So we’ll expand the toolbox section and select small form factor. The right pane refreshes and you can see a one column layout which is appropriate for a smartphone.

PeopleSoft Page Composer

Now let’s add a new field called creation date.  After you open the list of available fields just drag and drop the new field into the right pane.Then enter a label for the new field.
 PeopleSoft Page Composer

click the edit icon in search the people tools data dictionary for the label and select the label as created on.

PeopleSoft Page Composer
PeopleSoft Page Composer

Change #2:

The second change to make is to change the label for the report description field. In this case, the new label is too long for mobile screens so will select the short label type.

PeopleSoft Page Composer

Change #3:

Our third change is to highlight the name of the person submitting the expense report in red color and save the changes.

PeopleSoft Page Composer

Now we will verify the changes in the mobile device.

  • A new field for the creation date of the expense report.
  • The description field appears as the expense report field.
  • The name of the person submitting the report is highlighted in red.

PeopleSoft Page Composer

Using People Soft page composer you can easily modify the content layout and format of fluid approval pages based on your business requirements, without making expensive customizations.

Arvind Rajan

Arvind Rajan

Arvind Rajan is Co-Founder and CEO of Astute Business Solutions. He is leading the expansion of Astute services to include Cloud Managed Services, Disaster Recovery on Cloud, and Integration and Process Automation using Platform Cloud Services.