Developing with Fluid UI – The Fluid Home Page

The first place to start with Fluid UI is with the FluidHome Page.Sometimes it’s referred to asthe landing page, but it’s formally called the Fluid Home Page.It’s delivered with PeopleTools 8.54, and thenice thing about it is, it’s a component.That’s one thing you’ll discover with Fluid UI.Fluid UI is built int PeopleTools with FluidUI.The Home Page is a component, thetiles or grouplets are group boxes, and the search and prompt pages are just pages.It makes it easy to find things, customizeand brand the applications (and of course to see what’s going on) when you canopen it in AppDesigner.

To see what makes a component fluid, let’s start with theFluid Home Page.It’s a component calledPT_LANDINGPAGE.You can open it inAppDesigner and see what’s unique and different about Fluid UI.If you open the Component Properties dialog,you’ll see a new tab called Fluid

On the Component Properties Fluid tab you’ll see the mostimportant checkbox of all, Fluid Mode.That is the one flag that will tell PeopleSoft if the component is Fluid(responsive, dynamic layout) or classic (pixel perfect).Now that you know it’s a single flag, youknow that a component can’t be both Fluid UI and Classic at the same time, it’sone or the other.

There are some other interesting fields on this page.The Small Form Factor Optimized field tellsus whether or not to display this on a small device (think smarphone).Header Toolbar Actions offer standard optionsthat are set at the component level so you have complete control of thecomponents header bar.

You’ll notice that the PT_LANDINGPAGE has got some PostBuildPeopleCode.That’s to build the groupletsthat are used to launch Fluid UI Pages (more about those later).Probably not a good idea to mess with thatcode!

The next thing to look at is the Page Definition for thePT_LANDINGPAGE component.When you openthe page PT_LANDINGPAGE it will look different than anything you’ve everseen.You’re probably thinking “What’sup with all the group boxes”?That iswhere Fluid UI is so different.Inclassic PeopleSoft, you put a button, field, group, any control on a page andthat’s where it shows up, no questions asked.With Fluid UI, everything is positioned relative to something else.That’s why there are so many containers (youknow them as group boxes).They are UIobjects that are used for dynamic positioning.

The Fluid Home Page has some special behavior and specialsettings.The first is in the WebProfile Configuration settings (Main Menu->PeopleTools->WebProfile->Web Profile Configuration from the main menu).There are two checkboxes that control thebehavior of Fluid UI.Disable Fluid Modeand Disable Fluid On Desktop.

Disable Fluid Mode prevents any Fluid UI component frombeing run from this installation.Thisis a web profile setting for users that want to run later versions ofPeopleTools but only want to run Classic PeopleSoft pages.The second setting, Disable Fluid On Desktopallows the Fluid UI to be run on mobile devices such as smartphones andtablets, but prevents Fluid UI from running on a desktop computer.

Fluid UI settings are also make in My Personalizations (MainMenu->My Personalizations from the Main Menu), in the General Optionssection.In that section, each user hasthe choice to determine the home page for their desktop and for tablets.

Now that you know the Fluid UI landing page is just acomponent, and the profile and personalization settings, you should be able tolaunch one.It’s pretty easy to add amenu using Structure and Content, just make sure the proper security is set up.You’ll have to run a Fluid UI supportedbrowser in order to see it.Latestversions of Chrome, Firefox and IE will do.Check the certification page on MOS for all the details.

When you open the first Fluid Landing Page, there’s not muchthere.Not to worry, we’ll get somecontent on it soon.Take a moment tonavigate around and look at some of the header actions that were set up fromthe component properties.The homebutton takes you back to the classic system.You won’t see any notifications and the personalization doesn’t have anycontent to add.The NavBar icon on thetop right has a lot of content, including a Navigator and Classic home.Spend some time looking through what’savailable.

Stay tuned for more.Next up is adding some content.

Join the discussion

Comments ( 1 )

Aman Pratap Monday, June 5, 2017

I need more knowledge about the add action in the component , as I have search functinality in place after making changes