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: