PeopleTools | Displaying multiple fields on the same line in fluid
A. The Fluid Approach
Any newcomer to fluid soon discovers that the fluid way of doing things requires a completely new approach to development. In particular, simple things that you might have taken for granted in the classic interface now prove to be a real challenge in fluid. A perfect example is having to display more than one field on the same line.
To understand why this can be a challenge, set up four fields on a fluid page and then view the page in the browser. Regardless of how the fields appear in App Designer – whether they are listed under each other or listed side-by-side or scattered all over the page – the resulting fluid display will look something like this:
The default style of fluid is to display all fields one-under-the-other in a single column. However, in some cases, you might want to display two fields on the same line, such as setting up a ‘related display’. The first field shows the Employee ID, while the second field shows the employee name. By custom, PeopleSoft classic pages show both fields on the same line. Your users might be keen to follow the same approach in fluid.
To see how this problem is resolved, we will take a systematic approach. Style classes will be added one-at-a-time so we can see the effect of each class. If I displayed the solution to you all in one go, you would not understand the effect of each style. Fluid is largely about understanding the style classes and in what circumstances they should be implemented.
Also with fluid, there is no such thing as a single, definitive solution. Most requirements can be addressed in a number of ways, so the solution below shouldn’t be seen as the best or only option. In future ‘BareFoot PeopleSoft’ posts, I hope to explore some of the alternative ideas further, such as displaying fields in a table and column structure.
B. A Note on Group Boxes
Most training materials on fluid highlight the need to enclose fields in group boxes. Even a single individual field is often enclosed in a group box of its own. The styles are then added to the group boxes – and not the fields – meaning that each field included in the group box will inherit the same style.
Such an approach is certainly useful when you want to apply the same style to multiple fields, however in the example below, we will stick to a simple solution that doesn’t require the use of group boxes. The style classes will instead to be added to the fluid properties of each individual field.
I mention this as some people familiar with fluid might expect to see group boxes included as part of the solution. However, group boxes are not strictly necessary in all cases.
C. Multiple Fields Step-by-Step
So let’s start with the example used earlier – the four fields displayed down the page in a single column. We’ve been asked to display Field 2 and Field 3 on the same line. The label for Field 3 must also be hidden.
Here’s the App Designer page definition as it currently stands:
And here, as a reminder, is the result it produces:
So let’s go ahead and try to get Field 2 and Field 3 sitting together on the same line. To do this, we have to understand a bit about HTML styling.
There are two main ways that an element can be displayed on a HTML page: block or inline. ‘Block’ starts on a new line and takes up the entire page width; ‘inline’ uses the current position on the page and only takes up as much space as necessary. For more information on the difference between the two types, refer to the link at the bottom of this post.
By default, fluid fields are displayed using the ‘block’ approach. We want to change this to ‘inline’ for the fields in question.
From the fluid style guide (refer to second link below), we find that the relevant style class for displaying inline items is “psc_display-inline” (when entering a style, be very careful in noting the difference between the hyphen (-) and the underscore (_) : unfortunately PeopleSoft style classes are not consistent in their usage).
Let’s open up the fluid properties for Field 2 on the page and add the inline style class:
The page now appears as follows:
This hasn’t done a great deal, apart from reducing the space between Field 2 and Field 3. So let’s add the same “psc_display-inline” style class to Field 3. The page now comes out as follows:
Promising… but it’s pushed Field 3 right to the edge of the page. This is because the browser has reserved a whole heap of space to display the field label. However, we don’t actually want to see the label in this case, so we can go ahead and find the relevant style class to suppress a label. From the style document, we discover it is “psc_label-none”.
This is added to the Field 3 properties:
This results in the following display:
An improvement, but we’re still not quite there. We need to do some tidying up.
We’ll start by giving Field 4 a bit more room for display, instead of being squashed up below Field 2. We will add the customary 10 pixels difference between fields. This is done via the “psc_padding-top10px” style. (Note that the padding styles allow any value to be added to the style name. In this case, we have chosen a padding space of 10 pixels.)
After we add the padding style to Field 4’s fluid properties, we check the result:
Great, that looks much better now.
Finally, Field 2 and Field 3 (without the label) are too close together now. So let’s add some more padding, this time to separate the two fields. As you might have guessed, this is similar to the ‘padding’ command previously mentioned. In this case, we will add the style class “psc_padding-left20px” to Field 3. And here’s the result:
Perfect… I think that’s the basic requirement done. Our page is done and dusted.
To summarise the style classes for each field:
Field 1: (none required)
Field 2: psc_display-inline
Field 3: psc_display-inline psc_label-none psc_padding-left20px
Field 4: psc_padding-top10px
See Also:
For more information on the difference between HTML inline and block formatting, refer to:
https://www.w3schools.com/html/html_blocks.asp
For information on the style classes available in PeopleSoft fluid, refer to:
https://it.umn.edu/sites/it.umn.edu/files/peoplesoft_fluid_ui_css_guide_v01.pdf