There were some interesting requirements posted by a reader in the following blog post.
Refer: Fluid UI - Working with Grids
Requirement 1: How to align the elements in a column to 'top' in a Stacked Grid
Let us say, we have a two Stacked columns with different number of elements/fields in each Stack as shown in example - Responsive Flex Grid with 2 Columns. As we can see in the screenshot below, the first Stacked column contains 3 fields and the second Stacked column contains 2 fields.
Since the second Stacked column only contains 2 fields and they are centered from a vertical position point of view, they don't line up with the fields in the first Stacked column.
If we want to align the fields in the second Stacked column to the top, we can achieve that with the following CSS.
I really like the nth-child() CSS3 selector. The idea is to only apply the CSS to a particular child element and not all. In our case, I only wanted to apply the CSS to the second column <td> element with "ps_grid-cell" class as shown below.
You can find more details on the nth-child() selector in the following blog post.
https://support.awesome-table.com/hc/en-us/articles/115001393209-Add-style-to-specific-columns-or-rows-in-your-Table-view
Note: The CSS provided above is added to the page using the following Page Activate PeopleCode.
Requirement 2: How to align specific fields (elements) in a Stacked Column to the Right
Let us say, we want to right justify specific fields in a Stacked Column. For example, we want to right justify the EFF_STATUS field.
We can achieve this by simply identifying the the id value (or part of it) and apply a wildcard CSS selector that contains this value as shown in the following CSS.
The wildcard for the id is required in this case due to the window and grid row numbering that is prefixed and suffixed to the record field name to generate the id value.
Requirement 3: How to align a specific Stacked Column to the Right
Let us extend the previous requirement and say that we want to align the entire second Stacked column (including the Label) to the right.
We can simply achieve this by using the following updated CSS:
Result
Project Details
All examples in this blog post were built on the project provided in Fluid UI - Working with Grids.
Refer: Fluid UI - Working with Grids
Requirement 1: How to align the elements in a column to 'top' in a Stacked Grid
Let us say, we have a two Stacked columns with different number of elements/fields in each Stack as shown in example - Responsive Flex Grid with 2 Columns. As we can see in the screenshot below, the first Stacked column contains 3 fields and the second Stacked column contains 2 fields.
Since the second Stacked column only contains 2 fields and they are centered from a vertical position point of view, they don't line up with the fields in the first Stacked column.
If we want to align the fields in the second Stacked column to the top, we can achieve that with the following CSS.
I really like the nth-child() CSS3 selector. The idea is to only apply the CSS to a particular child element and not all. In our case, I only wanted to apply the CSS to the second column <td> element with "ps_grid-cell" class as shown below.
You can find more details on the nth-child() selector in the following blog post.
https://support.awesome-table.com/hc/en-us/articles/115001393209-Add-style-to-specific-columns-or-rows-in-your-Table-view
Note: The CSS provided above is added to the page using the following Page Activate PeopleCode.
Requirement 2: How to align specific fields (elements) in a Stacked Column to the Right
Let us say, we want to right justify specific fields in a Stacked Column. For example, we want to right justify the EFF_STATUS field.
We can achieve this by simply identifying the the id value (or part of it) and apply a wildcard CSS selector that contains this value as shown in the following CSS.
The wildcard for the id is required in this case due to the window and grid row numbering that is prefixed and suffixed to the record field name to generate the id value.
Requirement 3: How to align a specific Stacked Column to the Right
Let us extend the previous requirement and say that we want to align the entire second Stacked column (including the Label) to the right.
We can simply achieve this by using the following updated CSS:
Result
Project Details
All examples in this blog post were built on the project provided in Fluid UI - Working with Grids.
Hi Sasank,
ReplyDeleteIs possible to integrate peoplesoft with Whatsapp API for sending updates.
Thanks
It should be possible if there is an API that we can integrate with. Like any other integration, it will require development effort to build the necessary interface.
DeleteI also see that Twilio is offering an API for Whatsapp integration:
https://www.twilio.com/docs/sms/whatsapp/api
Hi Sasank,
ReplyDeleteI have a Classic page with a Scroll Area in Level1(around 100 rows for the Level0 value) and a Grid in Level2(this will have aroound 10 rows). How do I convert this page into Fluid. I do not see anywhere the representation or styling for scroll areas. Please help me with an example of any delivered peoplesoft page that has the similar implementation.
Hi Sam,
DeleteI have not played with Scroll Areas so I don't have any direct experience that I can share with you.
You might want to review the following Doc ID on My Oracle Support:
PeopleSoft Fluid User Interface Supplemental Documentation (Doc ID 1909955.1)
- CSS Guide for PeopleSoft Fluid User Interface: You can find a few delivered CSS classes if you look for 'Content Category' = Scroll Area
Thanks,
Sasank
Hello,
ReplyDeleteI want to color the column of flex grid with different colors. can we set the col num dynamically of nth class?
Thanks,
Not sure. Take a look at this:
Deletehttps://stackoverflow.com/questions/35040072/how-would-i-make-this-into-an-dynamic-nth-child-css-selector
Hi Susank,
ReplyDeleteIs there a way a Grid Column(Edit Box) can be dynamically replaced with the Dropdown List, based on certain condition, in a Fluid page, without adding extra column to the Grid and programmatically making it Visible?
I don't think it is possible using PeopleTools. The only option I can think of would be to write some javascript.
Delete