Wednesday, May 25, 2016

Changing the page title in Fluid at run-time

One of our customers asked us to implement nested landing pages, in which some tiles would open a second landing page and eventually a third one and so on. Let me illustrate the use case with some screenshots (I apologise as they are in Spanish, but it should be useful anyway). This would be how the main landing page would look like:


By clicking the "FormaciĆ³n y Desarrollo" tile, a new landing page will be displayed:


And eventually, you can click a tile in this landing page which opens a third one. Let's pick "FormaciĆ³n Acceso al Puesto" for instance:


Unfortunately, the customer could not take advantage of the Master - Detail Framework as they are on PeopleTools 8.54 and this functionality is only available in release 8.55 (which is more complex to upgrade to as Crystal Reports are no longer supported).

So, we decided to build a custom component for our nested landing pages. The component would be called again and again with different URL parameters, in such a way the history could be maintained and the user could go to the previous step instead of going back all the way through the top landing page.

As we were reusing the same component, we needed to adjust the page title in PeopleCode. There involved not only updating the page title itself, but also making sure the back button showed the title of the previous page.


Changing the Navigation Bar Title

By default, the title is set to the component label in the menu. Luckily, there is a good number of examples in the standard functionality on which the title is set at run time, so this one was not particularly difficult to implement. The code that makes the trick is the following:

PTLAYOUT.PAGETITLE_GROUPBOX.Label = &title;

This code needs to be placed in the page activate event. If placed anywhere else, the standard PT_HEADERPAGE Activate code will override the title back to the default one.

Another option is to create a custom header page and add it to the component, but at least from the back button functionality point of view, it did not seem an easy solution.

Changing the Back Button Title

This one was trickier. PeopleSoft maintains a navigation history stack in Javascript which is populated with the default page title at load time using the following Javascript call:

AddToHistory('Cns Navgrppage', '', '', 'CNS_NAVGRPPAGE', 1, 27);

So, in order to keep the right page title in the navigation stack, we needed to update it. Fortunately, there is another Javascript function provided by PeopleSoft called UpdateHistory. The PeopleCode function AddOnLoadScript is particularly helpful when trying to run Javascript functions after the page is loaded. This is the way we implemented the call also in the page activate PeopleCode event:

AddOnLoadScript("UpdateHistory('" | &title | "', undefined, undefined, undefined, 1);");









3 comments:

Sasank Vemana said...

Javier - Great post. :)

I played with the Back button a few months ago and found out about the AddToHistory function. But I don't recall running into the UpdateHistory function. Thanks for sharing!

Here is a link to my experiments with the Fluid 'Back' button.
https://pe0ples0ft.blogspot.com/2016/04/fluid-ui-custom-development-back-button.html

Javier Delgado said...

Thanks Sasank for your comments. Your blog post looks very thorough. Too bad I didn't see it before my post!

Anonymous said...

Thanks for the post, Javier! Great information.

Do you have any ideas on how to append a value (such as environment name or user id) to the page title globally? I'd like to append the environment name to identify a Test environment versus Production.

Based on your post, it sounds like the PT_HEADERPAGE.Activate is controlling the default page title. I modified the code and appended the environment name (%DbName) to the page title. However, this PT_HEADERPAGE.Activate seems to fire on some pages (like the search results page), but not most. If I navigate via a homepage tile or Navigator, the page title remains unchanged - it still reflects the cref label.

Let me know if you have any ideas based on your findings. Thanks!