Step by Step - "Hello World" Fluid Application

PeopleTools 8.54 delivers Fluid, a complimentary new user interface designed for mobile and desktop devices (see it in action here). If you don't already have tools 8.54 installed grab Image 008 for HCM or FSCM  (see Doc ID 164184.2 on MOS) and follow this simple step by step guide to create your first Fluid application.  If you know Application Designer then all of this will be familiar.

You'll need access to a PeopleTools 8.54 environment and Application Designer.  I hope some find this useful.

Step 1 - Enable the Fluid Homepage

In the FSCM 008 image and maybe the HCM image the link to the Fluid Homepage is not visible (even though it exists in the Portal Registry).  Follow this video to enable the link .  Basically you just need to create a new content reference link based on the existing Fluid Homepage link.

Step 2 - Create a Fluid Page 

Note the new definition type of Page (Fluid).  However, a Fluid Page is just a Standard type Page with the Fluid checkbox ON in Page Properties / Use. 


You'll be prompted to select a Layout Page.  Layouts (as the name suggests) control the page framework. A Fluid Layout page is a Page of type Layout. For this sample app we'll use a simple, predefined layout called PSL_APPS_CONTENT which gives us a simple, single frame view.


Name the page and SAVE.  It will prompt to copy PeopleCode but this page layout has no PeopleCode so it won't matter what you select here.



Let's put a button and a description field on our page.  When the button is clicked we want to display "Hello World".  So, create a work record and add ACCEPT_BTN and DESCR fields along with some PeopleCode on FieldChange event of the button field.

GRS_FLUID_WRK.DESCR = "Hello World";



Now we'll just set the button link properties to tidy up the display,





Step 3 - Create a Fluid Component

Now we'll create a Component and add the new page.


And now the "magic sauce".... TICK the Fluid Mode property on the Fluid TAB.  It's this property that tells PIA to render this component in Fluid rather than "Classic" mode.


Our sample application won't be displaying any data so we'll set the search record to the commonly used INSTALLATION table.

Step 4 - Add Component to Menu

Save your new component and Add to a menu.  As with all other components the purpose of adding to a menu is to allow permission lists to grant security access.




Step 5 - Register the Component

Now, with the Component open click the Register Component button to invoke the portal registration wizard.



To keep things simple we're going to add our Fluid application to the portal folder PTFL_PEOPLETOOLS. You can of course create your own portal folders to organise Fluid Applications or add them to existing folders.


Again, just to keep things in this walk through simple I'm using the ALLPAGES permission list to grant access for my user (in this case VP1) .


Step 6 - Add the new Application Tile to your Homepage

Access the Fluid Home Page. 


Use the Personalize menu item to add a new Tile to your homepage.



Here's what your new Tile should look like.  The icon and label are set in the Structure & Content / NUI Attributes TAB.  (See Appendix below)



 Click the Tile and test your application.

You may notice that it doesn't seem to matter where on the page you place the fields - the layout will always be the same.  This is because unlike the "pixel perfect" Classic interface the Fluid UI is designed to be "responsive" to the size of the display device and so will control the layout of page objects in a free-flow style.  What's controlling the field sequence on the page is the Field Order.

App Designer shows Description following Button
but Field order has Button following Description and so....

Fluid renders according the the Field order.

Appendix - How to control Tile Display

The Tile contents, Size and Behaviour can be set using the NUI Attributes on the CREF in Structure and Content.  The contents can be either 
  • a static label and icon
  • HTML returned by an iScript
  • results from any component
  • results from a PeopleSoft URL
Tile Caption
Tile Dimensions and Content Controls

1 x 2 size Tile




Comments

GoBipUser said…
Hi Graham!

I am using a scroll area in a fluid page, but , the scroll area doesn't show the Navigation toolbar. Do you know why?

Thanks.!
Tony said…
The control buttons of scroll are are not currently supported in Fluid applications. You may have to create your own control buttons.

-Tony
We are having tiles on the landing pages and they're getting crowded.

Is there a way to group the tiles in order to organize them?
Graham said…
@fracturedfingertips Fluid is not just a new look to PeopleSoft but a whole new navigation paradigm. So the short answer to your question "can tiles be grouped" is NO, they can't. However, checkout the PeopleSoft Fluid Navigation Standards White Paper (Doc ID 2063602.1) on MOS. It has a ton of information about this new (and emerging) paradigm. It talks about the use of a concept called "Application Start Pages". Also, Navigation Collections will be supported in 8.55.

Good luck ... and keep the discussion going.

Graham
PS. Sorry I missed your comment and am late in replying. :-)
Unknown said…
Hi Graham,

I created a copy of PTS_NUI_SEARCH page and add it into my component for custom search page but clicking on the button over there is not working. Any suggestions?
Unknown said…
Hi Graham,

We have recently upgraded to PT8.54 and we have started developing the Fluid Interface. We have developed few self service pages and we absolutely do not have any problem with this. But when we try to develop a page with Search in it, we are lost. We cloned the classic page and enabled the fluid mode and we find that the search page is not working as expected. I went through some blogs and found that we need to install a SES server and do a lot of stuff to have a search page enabled. But my question here is that is it all mandatory to install a SES server jus for the purpose to have a Fluid page with search? is there not an alternative to it?

Regards,
Vinoth Kanna
CPDESK said…
This comment has been removed by a blog administrator.