PeopleSoft - Working on Fluid Pages Style Sheets

On the Continuation to my previous post here i am going to tell about the custom style sheet in Fluid.

The layout of all page elements in a fluid application is controlled by free from style sheets using CSS 3.0 standards. This is one of the most critical differences to consider when comparing classic PIA applications to fluid applications. With each control that you add to a page, PeopleTools automatically applies a style class to that control structure, and that style class enables that control to behave and render successfully on a fluid page.

Below are some of the main style sheets provided by the PeopleSoft fro the Fluid Pages and Controls.

Style Sheet	Description
PSSTYLEDEF_FMODE	General style sheet for fluid applications (included on every page), containing the majority of fluid style classes.
PTNUI_NAVBAR_CSS	Contains the styling used for the Navigation Bar (NavBar).
PTPN_NOTIFYWIN_CSS	Notification/Alerts styling. Included on every page where notifications are enabled.
PTNUI_PINTO_CSS	Controls the styling for the “Add to…” functionality. Included on pages with the Add to feature enabled.
PTS_NUI_FFSTYLE	Used by both global search and component search features.
PTPG_MENUSTYLE	Used by pivot grid search features.
PTPG_NUI_GRID_CSS	Used by pivot grid display.

If we want to use the CSS to render the page then we need to create the Style sheet. We have to include our CSS code to add the Styles or to change width or to change the look and feel of page to the newly created style sheet. Add the CSS name to the Page control properties --Fluid tab.

Or add the code in the component post build to add the custom style sheet to the fluid page.

AddStyleSheet(StyleSheet.TEST_FLUID_CSS);

Demo:

Let me demo on how to add the CSS to the Fluid pages. I am taking simple page where i have only the employee id field. I would like to show the Name of the Empid to the right of the Empid Field. For that i am using the display control field.

The above is designed by adding a sub page to the Fluid page. In Sub page i have placed the Emplid field and related content field to show name.

Place a Group box in the Sub page as shown as above. Add the Group boxes to each field.
Add one group box for Emplid and another Group box to the Display field. Add the delivered class PSC_INLINE to the group boxes to make them show side by side.

By adding the class PSC_INLINE make the group boxes to display in blocks. You can check the class used and the style properties of that class by Developer tool provided by the Chrome.

Thanks,
VPN PS Team.

PeopleSoft - Fluid Pages In Five Steps

Introduction:
The PeopleSoft Fluid User Interface is a brand new, dynamic, and evolving PeopleTools technology which provides mobile compatibilty to Peopleosft pages. 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. 

This document is created for the beginners who doesn't have any idea of Fluid.

Below are the Prerequisites to develop Fluid pages.

• PeopleSoft Application Designer
• PeopleCode
• PeopleTools Portal Technology
• PeopleSoft Pure Internet Architecture
• HTML 5.0
• Cascading Style Sheets 3.0 (Need to have idea for making UI Rich)
• JavaScript

How to Create a New Fluid Page:
Step -1 : In Application Designer, select File, New. Select Page (Fluid) on the New Definition dialog box, and click OK.

Step -2 : Select the initial layout page of the fluid page. This will open a new blank page.
PSL_APPS_CONTENT:  Used as the basis for any page. It contains a single group box container that can contain all additional elements in the page. The group box has the PS_APPS_CONTENT style class applied. 

Step-3 :  Save the page with appropriate name. On saving it will ask for the save the PeopleCode associated with the layout page for your new page (Yes/No). Click Yes.

Step-4 : On click of OK Button, it creates blank page.

Step-5: Add the fields as per the requirement. Mostly we need to keep the fields inside the group box. PeopleSoft Fluid UI is mostly based on the Group Boxes and the style sheets.

In My next post will talk more about the Fluid Homepages, Tiles and so on...

Thanks,
VPNPS Team.