Monday, February 22, 2016

Fluid - Custom Development - Small Form Factor and Viewport Considerations

While many of us are well underway in either implementing or supporting some of the delivered Fluid applications, it is not very common yet to hear about widespread custom Fluid development. This post might be a handy tip for those embarking on such activities currently or in the future. I also found that Javier has written a post on a similar issue.

As always, I find some really good learning opportunities in the Oracle Technology Network forums. In one such example, someone asked a question related to a custom Fluid page which does not render properly on a small form factor (SFF) device whereas delivered pages seem to be detecting the SFF and displaying correctly.

I realized that I had the exact same issue on one of my test Fluid pages. Here is the problem:

Delivered Fluid page in small form factor works as expected:

Custom Fluid page in small form factor does not display correctly:

The reason my custom fluid page was not rendering correctly is because it does not have appropriate viewport meta set in the code.

I fixed this by adding the following code in the Component PostBuild event:

Note: Click here for latest delivered code 8.55+.

Declare Function SetViewport PeopleCode PTLAYOUT.FUNCLIB FieldFormula;
SetViewport(""); /* apply the system default viewport setting */

The delivered SetViewport function either uses the viewport setting passed in as parameter or the default viewport setting for SFF/iOS.

The viewport information is added as a meta tag using the delivered AddMetaTag function.

We could also pass a custom viewport setting to the function as follows:

Declare Function SetViewport PeopleCode PTLAYOUT.FUNCLIB FieldFormula;
SetViewport("width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0"); /* apply the system default viewport setting */

Or simply use the AddMetaTag function directly as follows:

AddMetaTag("viewport", "width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0");

Result of adding viewport meta tag to my custom Fluid page:

It seems to me that using the delivered function SetViewport (with appropriate viewport parameter) might be the better way to go in general. This would take care of maintaining any default viewport values specific to certain devices.

PeopleTools 8.55+ (Updated on 03/17/2018)

The above delivered code (SetViewport function) which was originally located in PTLAYOUT.FUNCLIB FieldFormula has moved to PT_PAGE_UTILS API (App Package). Please use the following code if you are on PeopleTools 8.55+.

For Example:


  1. It worked perfectly! I really appreciate your help , I lost a lot of time with it.

  2. Thanks so much for this. Saved our team LOOOTS of time trying to fix same issue. :)

  3. Seriously?!? This is NOT automatically added when a new component is marked as fluid??
    WTF? Shame on PeopleSoft!!!
    Many hours wasted trying to solve this issue.
    Thank you, thank you, thank you!!

  4. Another super helpful post addressing and resolving our exact issue. Thank you!

  5. Hello, We recently went live with PT 8.56 and we are facing a peculiar issue. For some of the users, one of delivered page 'Manage Job Opening' (classic mode) is rendering in a small area of the Web Browser. Could you please let me konw what could be the issue?

    1. Is this issue occurring on a Homepage?

      Can you navigate to 'My Preferences' under Root in Navigator? Then, set "Automatic Menu Collapse" to No. Test and let us know if it helps.