Developing with Fluid UI – The Fluid Home Page
- by Dave Bain
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
The first place to start with Fluid UI is with the Fluid
Home Page. Sometimes it’s referred to as
the landing page, but it’s formally called the Fluid Home Page. It’s delivered with PeopleTools 8.54, and the
nice 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 Fluid
UI. The Home Page is a component, the
tiles or grouplets are group boxes, and the search and prompt pages are just pages.
It makes it easy to find things, customize
and brand the applications (and of course to see what’s going on) when you can
open it in AppDesigner.
To see what makes a component fluid, let’s start with the
Fluid Home Page. It’s a component called
PT_LANDINGPAGE. You can open it in
AppDesigner 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 most
important 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, you
know that a component can’t be both Fluid UI and Classic at the same time, it’s
one or the other.
There are some other interesting fields on this page. The Small Form Factor Optimized field tells
us whether or not to display this on a small device (think smarphone). Header Toolbar Actions offer standard options
that are set at the component level so you have complete control of the
components header bar.
You’ll notice that the PT_LANDINGPAGE has got some PostBuild
PeopleCode. That’s to build the grouplets
that are used to launch Fluid UI Pages (more about those later). Probably not a good idea to mess with that
code!
The next thing to look at is the Page Definition for the
PT_LANDINGPAGE component. When you open
the page PT_LANDINGPAGE it will look different than anything you’ve ever
seen. You’re probably thinking “What’s
up with all the group boxes”? That is
where Fluid UI is so different. In
classic PeopleSoft, you put a button, field, group, any control on a page and
that’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 (you
know them as group boxes). They are UI
objects that are used for dynamic positioning.
The Fluid Home Page has some special behavior and special
settings. The first is in the Web
Profile Configuration settings (Main Menu->PeopleTools->Web
Profile->Web Profile Configuration from the main menu). There are two checkboxes that control the
behavior of Fluid UI. Disable Fluid Mode
and Disable Fluid On Desktop.
Disable Fluid Mode prevents any Fluid UI component from
being run from this installation. This
is a web profile setting for users that want to run later versions of
PeopleTools but only want to run Classic PeopleSoft pages. The second setting, Disable Fluid On Desktop
allows the Fluid UI to be run on mobile devices such as smartphones and
tablets, but prevents Fluid UI from running on a desktop computer.
Fluid UI settings are also make in My Personalizations (Main
Menu->My Personalizations from the Main Menu), in the General Options
section. In that section, each user has
the choice to determine the home page for their desktop and for tablets.
Now that you know the Fluid UI landing page is just a
component, and the profile and personalization settings, you should be able to
launch one. It’s pretty easy to add a
menu using Structure and Content, just make sure the proper security is set up. You’ll have to run a Fluid UI supported
browser in order to see it. Latest
versions 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 much
there. Not to worry, we’ll get some
content on it soon. Take a moment to
navigate around and look at some of the header actions that were set up from
the component properties. The home
button takes you back to the classic system. You won’t see any notifications and the personalization doesn’t have any
content to add. The NavBar icon on the
top right has a lot of content, including a Navigator and Classic home. Spend some time looking through what’s
available.
Stay tuned for more. Next up is adding some content.
Normal
0
false
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin-top:0in;
mso-para-margin-right:0in;
mso-para-margin-bottom:8.0pt;
mso-para-margin-left:0in;
line-height:107%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
