Grids are one of the more complex UI controls to work with in Fluid. This is because grids by design are in a tabular format which is not very conducive to responding to small form factors (particularly when there are a several columns).
I learnt a lot about grids in Fluid UI while chatting with Stefan van Liempt from CY2. He is one of the top Fluid developers and has several innovative ideas and designs. Watch his blog space here for interesting posts on Fluid (many more to come in the future)!
The following presentation on UI Controls is a must read for anyone who is starting to learn Fluid:
http://cy2.nl/wp-content/uploads/10-Fluid-UI-controls-you-should-know-about.pdf
In this post, I would like to share what I learnt from Stefan's presentation and how one of my colleagues used 'stacked columns' to create responsive grids simply by using Page Field Properties! At the end, I will share a project containing the demo pages with grids detailed in this post.
Classic Grid Layout:
To start off, I created a simple Fluid page containing a Grid with a 'Classic Grid Layout'.
Demo:
We can see that the 'Classic Grid Layout' in Fluid simply creates a grid much like in Classic UI. The grid is not responsive.
Flex Grid Layout:
Next, I changed the Grid Properties to use a 'Flex Grid Layout'.
Demo:
As we can see, the grid has a different (Fluid-like) style with the 'Flex Grid Layout' but the grid is still not responsive.
Flex Layout with Stacked Columns:
Next, I added a couple of group boxes to the grid in an effort to stack the columns and avoid the horizontal scrolling.
Demo:
By using the 'Stacked Columns' we can see how the horizontal scrolling can be avoided. This is great for a small form factor device. But the problem I have with the 'Stacked Columns' is that it is not maximizing the space available on a larger form factor. Notice all the empty space between the 'Location Details' and 'Status' columns when the grid is rendered on a desktop?
Responsive Flex Grid Layout with 2 Columns:
To avoid the empty space issue that I described in the previous section, one of my colleagues showed me a simple trick to disable column stacking on certain form factors. Simply use the 'Suppress On Form Factor' Fluid Page Field Property on the two group boxes!
Demo:
As we can see, the grid is displayed in a normal 'Flex Layout' when it is rendered on a Desktop (extra large form factor) but is displayed with 'Stacked Columns' when it is rendered on a mobile device (small form factor).
Responsive Flex Layout with Single Column:
Just to provide another option, I wanted to show how we can use a single column display for small form factor. I simply removed the second group box so we only have one group box at the start of the grid.
Demo:
As we can see, by only using one group box in the grid, we can render the entire row in a single column format (if necessary).
Responsive Flex Layout with Labels:
Up until this point, you may have noticed that none of the stacked grid cells had any labels. The idea of using stacked grid is to not only stack the grid columns but also stack the labels. At least, that is what I have observed in some of the delivered pages. For example:
Labels cannot be taken lightly as they play a huge role in making a page accessible (consider screen readers, etc.). What if we want the labels to display beside the cell value while in stacked mode (SSF)? There is a grid field property that we can set to do just that!
This works great when the grid is stacked on a small form factor but causes redundant labels on other form factors (where we have suppressed the stacking).
To workaround this problem, I added page activate peoplecode to conditionally suppress the grid cell labels using css.
CSS - SV_GRID_CSS:
Note: LOCATION_TBL in the selector represents the page field name of the grid.
Workaround Option 2: Based on feedback from Stefan in comments below. I figured that we could simply use the Fluid properties to suppress the label in the larger form factors using the 'psc_nolabel' css. If we use this option, we don't need the page activate peoplecode with the conditional form factor logic as described above. Here is a screenshot of the Fluid property.
You might wonder how I figured that we could use 'psc_nolabel' style class? I found it in Appendix 4 (Delivered PeopleSoft Style Classes) of the following document on My Oracle Support:
Converting Classic PIA Components to PeopleSoft Fluid User Interface (Doc ID 1984833.1)
- This appendix has a table of commonly used delivered style classes
Demo:
As we can see, the cell labels appear conditionally in the stacked grid for small form factor.
Environment Details:
- HCM 9.2 PUM Image 23
- PeopleTools 8.56.01
Project Installation Details:
To make it easier for readers, I shared a project on GitHub which contains the 5 demo pages that were created for this post.
GitHub Project: https://github.com/SasankVemana/Fluid-UI-Grid-Demos
Installation Instructions:
- Download the project from GitHub.
- Load the project into your database using 'Tools > Copy Project > From File...' option in App Designer. Note: DO NOT load this in a Production environment.
- You may need to add these pages to a permission list for access.
- This project will create a folder under PeopleTools > Portal > Structure and Content > Fluid Structure and Content > Fluid Pages as follows:
- Finally add the Demo Tile to any Homepage using the Personalization option as shown below:
Demo Assumption/Dependency:
- The demo pages use PS_LOCATION_TBL as the record for the grids. This table should exist in most PeopleSoft Applications (HCM, FSCM, CS) and is required for the demo to work.
Other Fluid References:
Jim's PeopleSoft Journal
Jim and Sarah Marion's Book - PeopleSoft PeopleTools: Mobile Application Development
PeopleBooks: http://docs.oracle.com/cd/E65859_01/fluid_ux/index.html
CY2 Fluid Blog: http://cy2.nl/category/peopletools/fluid/
I learnt a lot about grids in Fluid UI while chatting with Stefan van Liempt from CY2. He is one of the top Fluid developers and has several innovative ideas and designs. Watch his blog space here for interesting posts on Fluid (many more to come in the future)!
The following presentation on UI Controls is a must read for anyone who is starting to learn Fluid:
http://cy2.nl/wp-content/uploads/10-Fluid-UI-controls-you-should-know-about.pdf
In this post, I would like to share what I learnt from Stefan's presentation and how one of my colleagues used 'stacked columns' to create responsive grids simply by using Page Field Properties! At the end, I will share a project containing the demo pages with grids detailed in this post.
Classic Grid Layout:
To start off, I created a simple Fluid page containing a Grid with a 'Classic Grid Layout'.
Demo:
We can see that the 'Classic Grid Layout' in Fluid simply creates a grid much like in Classic UI. The grid is not responsive.
Flex Grid Layout:
Next, I changed the Grid Properties to use a 'Flex Grid Layout'.
Demo:
As we can see, the grid has a different (Fluid-like) style with the 'Flex Grid Layout' but the grid is still not responsive.
Flex Layout with Stacked Columns:
Next, I added a couple of group boxes to the grid in an effort to stack the columns and avoid the horizontal scrolling.
Demo:
By using the 'Stacked Columns' we can see how the horizontal scrolling can be avoided. This is great for a small form factor device. But the problem I have with the 'Stacked Columns' is that it is not maximizing the space available on a larger form factor. Notice all the empty space between the 'Location Details' and 'Status' columns when the grid is rendered on a desktop?
Responsive Flex Grid Layout with 2 Columns:
To avoid the empty space issue that I described in the previous section, one of my colleagues showed me a simple trick to disable column stacking on certain form factors. Simply use the 'Suppress On Form Factor' Fluid Page Field Property on the two group boxes!
Demo:
As we can see, the grid is displayed in a normal 'Flex Layout' when it is rendered on a Desktop (extra large form factor) but is displayed with 'Stacked Columns' when it is rendered on a mobile device (small form factor).
Responsive Flex Layout with Single Column:
Just to provide another option, I wanted to show how we can use a single column display for small form factor. I simply removed the second group box so we only have one group box at the start of the grid.
Demo:
As we can see, by only using one group box in the grid, we can render the entire row in a single column format (if necessary).
Responsive Flex Layout with Labels:
Up until this point, you may have noticed that none of the stacked grid cells had any labels. The idea of using stacked grid is to not only stack the grid columns but also stack the labels. At least, that is what I have observed in some of the delivered pages. For example:
Labels cannot be taken lightly as they play a huge role in making a page accessible (consider screen readers, etc.). What if we want the labels to display beside the cell value while in stacked mode (SSF)? There is a grid field property that we can set to do just that!
This works great when the grid is stacked on a small form factor but causes redundant labels on other form factors (where we have suppressed the stacking).
To workaround this problem, I added page activate peoplecode to conditionally suppress the grid cell labels using css.
CSS - SV_GRID_CSS:
Note: LOCATION_TBL in the selector represents the page field name of the grid.
Workaround Option 2: Based on feedback from Stefan in comments below. I figured that we could simply use the Fluid properties to suppress the label in the larger form factors using the 'psc_nolabel' css. If we use this option, we don't need the page activate peoplecode with the conditional form factor logic as described above. Here is a screenshot of the Fluid property.
You might wonder how I figured that we could use 'psc_nolabel' style class? I found it in Appendix 4 (Delivered PeopleSoft Style Classes) of the following document on My Oracle Support:
Converting Classic PIA Components to PeopleSoft Fluid User Interface (Doc ID 1984833.1)
- This appendix has a table of commonly used delivered style classes
Demo:
As we can see, the cell labels appear conditionally in the stacked grid for small form factor.
Environment Details:
- HCM 9.2 PUM Image 23
- PeopleTools 8.56.01
Project Installation Details:
To make it easier for readers, I shared a project on GitHub which contains the 5 demo pages that were created for this post.
GitHub Project: https://github.com/SasankVemana/Fluid-UI-Grid-Demos
Installation Instructions:
- Download the project from GitHub.
- Load the project into your database using 'Tools > Copy Project > From File...' option in App Designer. Note: DO NOT load this in a Production environment.
- You may need to add these pages to a permission list for access.
- This project will create a folder under PeopleTools > Portal > Structure and Content > Fluid Structure and Content > Fluid Pages as follows:
- Finally add the Demo Tile to any Homepage using the Personalization option as shown below:
Demo Assumption/Dependency:
- The demo pages use PS_LOCATION_TBL as the record for the grids. This table should exist in most PeopleSoft Applications (HCM, FSCM, CS) and is required for the demo to work.
Other Fluid References:
Jim's PeopleSoft Journal
Jim and Sarah Marion's Book - PeopleSoft PeopleTools: Mobile Application Development
PeopleBooks: http://docs.oracle.com/cd/E65859_01/fluid_ux/index.html
CY2 Fluid Blog: http://cy2.nl/category/peopletools/fluid/
Thanks Sasank for a nice post on fluid grid. Have you encountered a requirement to hide "Row selection indicator [single row radio button]" via peoplecode or via grid properties ?
ReplyDeleteYes. In my demos I turned off the 'Row Selection Indicator' using the Grid Properties. It seems to work the same as in Classic.
DeleteThanks Sasank for the prompt response - I want to keep the 'Row Selection Indicator' on but want to disable for few rows - is it possible ? Thanks!
DeleteI have not tried that. I doubt it is possible in classic or fluid using either peoplecode or grid properties.
DeleteIf a field is added to the grid that is used as the checkbox/radio button, then that field could be conditionally hidden via pcode...and could serve the same purpose.
DeleteHi Sasank,
ReplyDeleteVery elegant and creative solution to the problem!
Just curious, instead of doing the page activate peoplecode. Could we use the Formfactor override on the fluid tab? Which means that you add a specific class to all of them except the small form factor.
Thanks for sharing!
Stefan
Wow. Thanks Stefan for the brilliant idea. It was very simple to do that and avoid peoplecode!
DeleteI updated the post the include this workaround as well. i also updated the github project to include a new page which has this workaround!
Again, thank you for the great idea. :)
Nice post. Makes me wish I was going to have an opportunity to work with fluid more than the one page I created as essentially an experiment. Since we are on earlier tools and app versions (8.54,9.1) this might not be relevant - but in developing that page I did find that some phones (if they had high resolutions) would get "recognized" as a larger form factor (meaning the nice fluid characteristics of the page never activated). Just out of curiosity I wonder if you have ever come across this.
ReplyDeleteI have not run into that particular issue but it is possible based on the user-agent certain devices may have a different form factor.
DeleteI believe there is a function to prevent this...
DeleteLocal PT_PAGE_UTILS:Utils &oPageUtils = create PT_PAGE_UTILS:Utils();
&oPageUtils.SetDefaultViewport();
SetDefaultViewport()...when called in PostBuild for example, enables the app to determine the actual screen size of the device from the html meta (width=device-width for example). I've found that using this helps it to recognize the factor size.
@Ricky - Yes. Thanks for sharing that. I use the same code in these examples as well. The code is the same as what I used in this post but it has moved from a funclib to an app package:
Deletehttps://pe0ples0ft.blogspot.com/2016/02/fluid-custom-development-small-form.html
That said, the setdefaultviewport function should work irrespective the phone. I think the original question was that certain phones with high resolutions are getting recognized as larger form factors. Without the setdefaultviewport code, the form factor detection would not work on any phone. So, I am not sure if this is the cause of the problem.
Thaks for clearing that up Sasank. Makes me now wonder if the issue is that we are using setviewport to set the scale to 1:0 but with resolution this may not be the case at all times when considering CSS pixel and actual pixel...maybe window.devicePixelRatio can be used additionally to better determine viewport res or at least in those exceptions.
DeleteI agree.
DeleteYes - There may be a few improvements that can be done based on the comment here. With ever changing nature of devices and resolutions, it will be something that we need to report to Oracle Support for them to test and fix.
Hi Sasank, great job. Have you had chance to explore scroll areas in fluid pages? Any tips/pointers on how we can use scroll areas in fluid pages? From MOS, "Currently, scroll buttons for next and previous are not yet supported in fluid scroll areas."[sic]. I am trying to create bootstrap templates for fluid page layouts.
ReplyDeleteI have not worked with Scroll Areas yet. I will let you know if I have any ideas.
DeleteI see that document on MOS:
Converting Classic PIA Components To PeopleSoft Fluid User Interface
"Currently, scroll buttons for next and previous are not yet supported in fluid scroll areas. However the component buffer has the data and developers can implement their own mechanism to navigate the data."
You may be able to create your own buttons for the next/previous functionality.
Agreed, a few delivered pages have a Previous and Next buttons at the top of the page (Subpage within group box on the main page) and just use a For loop on what would have been the rowset of the scroll and gathers the key data and then performs a transfer to the same data page. The next row is current row + 1 and the transfer also automatically terminates the For Loop. I guess on a small device, having a 3 level deep scroll would just look awful lol
DeleteHi Sasank, we are currently in PT 8.56. Can you please confirm if we can add next and previous button for scroll and grid to show the data in fluid page. Or if anyone has done this please provide your input. I have tried using Scroll action on push button it does not work in fluid.
DeleteFor grids, we can enable Lazy Scrolling. More details can be found here:
Deletehttps://pe0ples0ft.blogspot.com/2019/03/fluid-ui-working-with-grids-part-3.html
For Scrolls, we need to manually create our own buttons as stated in my previous comments. I still don't see support for Scroll Bar in fluid applications.
https://docs.oracle.com/cd/F13640_01/pt857pbr2/eng/pt/tapd/task_UsingScrollAreasandScrollBars-077551.html#u5894096d-4af4-45a7-a760-20e2f704e063
Hi Sansank, that was a great post and was very useful for me to develop a SS page. I'm currently working on a SS page which has a scroll and a grid in it and I see the comments that Scrolls are not yet supported in Fluid. Will check for the alternatives as you mentioned.
ReplyDeleteAlso, I don't see a save button, even though I checked the "Save" property on the component. Could you please guide if we have to write any code or will be there be any setting for it?
Thank you,
In Fluid, the toolbar actions do not show up by default or by using the Component Toolbar settings.
DeleteWe need to add the Toolbar actions that we need for our Fluid pages manually and position then appropriately using styles (similar to any other Fluid page field). If you refer the following document (Page 7), there is a reference to PT_FOOTER_SAVEONLY subpage.
Converting Classic PIA Components to PeopleSoft Fluid User Interface (Doc ID 1984833.1)
For the Save button, you can simply use the PT_FOOTER_SAVEONLY subpage as described in the document.
But if you want to position the Save button at a different location and/or add other Toolbar actions, simply create a push button with Destination (Type Tab) as Toolbar Action and select the appropriate 'Action Type' (Save, Add, etc.). Optionally you may also need to add some styling on the Fluid tab.
Hello, I'm working on the same kind of requirement. I see scroll area seems to be working in Fluids, just that you wont see previous or next buttons.
DeleteWhen we do a Save using toolbar actions, it would only save the level1 record and not the level2 records which is working good in classic page but not in Fluid. Is there any difference why the level 2 record is not being saved? Should we need to adjust the group boxes is any specific design to achieve this?
Thanks!
Paul.
thank you so much for that.
ReplyDeleteBTW: Is there a way to display an html area on a fluid page? Seems fluid pages ignore html areays.
HTML areas are generally discouraged in Fluid (due to a variety of reasons) but they should work.
DeleteI have used HTML area successfully on fluid pages, my HTML consisted of JavaScript, you will run in to partial page refresh issues if content on the fluid page is dynamic
DeleteThat is true. Whenever we place javascript in a HTMLAREA we need to be extra careful about the effect any server trips on the page would have on the javascript.
DeleteHere are some related posts where I have discussed this topic:
https://pe0ples0ft.blogspot.com/2017/11/recaptcha-in-peoplesoft-pia-pages.html
https://pe0ples0ft.blogspot.com/2017/11/pt-8-56-htmlarea-respond-only-once.html
Hello Shashank, thank for the post, I have been working on fluid grids for a while now by styling grids with CSS and modifying look and feel...one thing I did not figure out is why is find button missing on the grid, I have 100 rows on a side page1 to filter the data on the main page, the data on main page changes based on the user selected values on the side page. So user doesn't want to scroll through 100 rows to find what he is looking for also it is ideal to simply type and find the value...but there is no find button on the grid rendered in fluid mode....I also observed filter image on one of the grids in your post(Responsive Flex Layout with Labels) not sure how to get this.
ReplyDeleteSorry for the delay in responding.
DeleteFilter and search functionality is not available in Fluid by default. We need to develop it ourselves.
You can review the following in a HCM PUM Image:
Manager Self Service (Homepage) > Team Performance (Tile)
Page: EP_MSS_CURFLU_SBF
This has the filter logic built into the page. You can mimic this functionality in your page.
Yep, I added a work record with descr edit box on top of the grid, took advantage of type a head functionality and populated it from lookup on top of the grid, works better then find actually.
DeleteAdded following code in field change of the descr field if some one is looking for similar solution , here is the sample code:
Local Rowset &DeptUpdChart;
&DeptUpdChart = GetLevel0()(1).GetRowset(Scroll.H_SCMDB_DPT_FLT);
For &i = 1 To &DeptUpdChart.ActiveRowCount
If H_SCM_DB_WRK.DESCR.Value = &DeptUpdChart(&i).H_SCMDB_DPT_FLT.DESCR.Value Then
&DeptUpdChart(&i).H_SCM_DB_WRK.H_BY_DEPT_CHECK.Value = "Y";
Exit;
End-If;
End-For;
Make work filed interactive and it should work.
Awesome idea. Well done. Thank you for sharing!
DeleteYes. I agree that it is better than the filter functionality which opens another modal window.
Shashank, thank you for the walk through. I imported the project into PUM25 instance, it cant seem to navigate through pages 4,5,6,7. Are there any additional steps after importing the project?
ReplyDeleteCan you confirm if you can see all the pages in app designer?
DeleteAlso, in the instructions (refer link below) there is a demo video at the end on how to add this tile to a homepage for navigation purposes:
https://pe0ples0ft.blogspot.com/2017/09/fluid-ui-working-with-grids.html#install_instructions
Let me know if you are still running into issues.
Hi Sasank, I have a question with respect to the Interactive grids that you have mentioned about.
ReplyDeleteAssuming I have a 6 column grid and I'm adding a group box for every three columns to be displayed as a two column table in mobile view. Now in the actual grid, I have two columns which are of hyperlinks which would take me to another page when clicked on them (On desktop mode).
If there a way to achieve this in mobile view as well ?
your comments would be much appreciated. Thanks in advance.
I don't see why not. The link on the column is similar to any other data element in a grid column.
DeleteWhat happens on the click event should not be dependent on the grid.
Dear Sasank,
ReplyDeleteWith respect to your example that shows column name's for each item inside each row of a Stacked grid. It Appears that we have to select the check box in the properties to enable that in the first place.
In my case, I have a stacked grid (inside a subpage) in which the column headings are getting populated by default. What could be the reason ? and how to avoid the headings inside the stacked cells.
Also I noticed that what ever alignment options that I'm giving for the group box tends to be happening inside each cell of each row and not at the Grid heading level in which I'm expecting it to happen.
Can you please share your thoughts on both the issues ?
Thanks in advance.
Disable row heading and column headings in grid properties
DeleteThanks for your response Srinivas. I think I hadn't mentioned the issue clear. The grid heading is populated for each row of data inside the grid. Now it can be enabled and disables via grid column properties, but, for me it's appearing by default which I don't want.
DeleteThoughts ?
Thanks in advance.
As for the Gird Properties > Label (Tab) Settings, I disabled 'Show Row Headings (runtime) only. The 'Show Column Headings (runtime)' is enabled. This is how the Grid Properties are set in all my examples above.
DeleteAs for the repetition of the grid column headings in every row, I specifically talk about this at the end of this blog where I provided two options to workaround this problem.
Refer: https://pe0ples0ft.blogspot.com/2017/09/fluid-ui-working-with-grids.html#7a
I have figured out the problem and sharing the result so that it would be of help to others.
DeleteProblem - When using a stacked grid in fluid, the grid heading appears in each row of data by default (without adding/removing any property).
Solution - It's because of the group box type that has been added to stack the grid. Change it's type to layout only and this would be resolved.
Hope this helps !
Thanks for sharing!
DeleteYes - That groupboxes for stacking must be layout only. Generally speaking any groupbox added to Fluid for the purposes of styling/layout must be set to layout only.
Also, I did not mention this in text but you can see this 'layout only' setting in the demo video here:
https://pe0ples0ft.blogspot.com/2017/09/fluid-ui-working-with-grids.html#3
Thanks again for clarifying. I am sure this will be useful for others going through these demos!
Hello Sasank,
ReplyDeleteApproaching you for another conversation with stacked grids.
When I Stack and grid let's say a 4 column grid into two, two column grids for mobile. When the grid doesn't have data it still shows the grid heading inside the first row.
Is there a way to bypass this scenario in such a way that when no data is present for grid, grid should not display the heading twice.
PS : I have tried the grid and group level properties and none seems to be fruitful.
Your help on this would be much appreciated. Thanks in advance !
I don't understand why the Grid Header is repeating for you. Can you please share a screenshot of the problem? You could use any online image sharing tools like https://snag.gy/
DeleteI have added two grids in the image from the below URL as an attempt to explain the problem. "https://snag.gy/jspfeD.jpg"
DeleteNotice the stacked grid and the heading appearing as data in the first row of grid when grid actually doesn't have any data.
Thanks in advance !
So, is this happening only in the second stacked column (3,4)? You may want to see how your groupbox is setup (i.e. properties) in comparison with the first stacked column (1,2).
DeleteFWIW, I have not run into this problem. You can that my stacked column header does not repeat even if there is no data in the grid.
With Data: https://snag.gy/3nDuPl.jpg
Without Data: https://snag.gy/UsrFSm.jpg
My project is on GitHub in case you want to take a look:
https://github.com/SasankVemana/Fluid-UI-Grid-Demos
Also, double-check if the second groupbox is setup as "Layout Only" (Group Box Properties > Fluid (Tab) > Group Box Type.
DeleteIn-deed that was a rookie mistake from my end. Didn't change the group box layout in all the group boxes that I used for stacking. The issue was resolved once that is changed !
DeleteMany Thanks!!
Good to hear! It is not a rookie mistake, quite a common one that everyone ignores during Fluid development. I continue to do this! :)
DeleteHi Sasank,
ReplyDeleteGood stuff. Thanks for posting!
One note ... you mention using psc_nolabel style class to suppress the label. However, the CSS Guide for PeopleSoft Fluid User Interface shows psc_nolabel as "Do Not Use" and recommends use of psc_label‐hide or psc_labelnone instead.
Regards,
Tom
Hi Sasank,
ReplyDeleteHow we can display the label beside the cell value while in stacked mode (SSF) for push button link (for that column i am displaying the grid column using people code. )the above mentioned property is not displaying the label
in small screens the label is not coming for name column (its hyperlink) .
ReplyDeleteHi Sasank,
ReplyDeleteI have had doubts and this link has done a lot good to me in more than one occasion :) Many thanks for that ! I have posted a couple of times in the blog for Fluid Grid related questions and approaching you for another now.
I have a flex grid which I have stacked. Now based on the device type I should unstack the columns. Tried out few options that were unfruitful. I have a solution that I could come up with, but that involves creating a clone of the page and enabling if the detected device is of a certain type/Formfactor. Now this sounds like redundant solution and would like to know if there is something more precise that we can apply via code instead of cloning.
Any insights from your end that you could offer on this would be of Great help!
Thanks in advance.
Aren't you able to hide the columns using peoplecode based on device form factor?
DeleteYes, I am not able to directly Hide/Unhide the columns that I have stacked inside the Groupbox using PeopleCode.
DeleteIn past I have assigned work record field to group box then hid the work record field using peoplecode to hide the group box. There is a property on group box to enable this feature to use the peoplecode.
DeleteHi Srinivas, Yes even I tried that but when the groupbox is being hidden, i need the columns stacked by that Groupbox to be displayed. This method will hide those columns too.
DeleteAs of now I have cloned the grid and have made the stacked grid for mobile devices and new one for other higher resolution devices making them hide/unhide based on formfactor and it works fine.
Still curious to know if there is a possible solution for a single grid to be stacked or unstacked dynamically using code.
Thanks !
Sasank - Thank you for sharing and tips on Branding were really helpful
ReplyDeleteI have a fluid grid page (Flex Grid Layout) for Table of contents for our company documentation.
This page is showing all documents related to the self service employee
I would like to have accordion style so that sub-topics (example: -Medical category has 12 sub-category documents and do not want them to be shown until sub-categoty is expanded from the above Topic)
I want all Topic/categories to be dynamic. I tried with group "Accordion Vertical" for the main group box and "Accordion groupbox" and style psc_accordion_content0 for the inner group (sub category).
I am not getting the results right since they are shown like master child (like in a sub page fashion not like accordion (just under the parent category)
I can get the things working (accordion style)with basic html/css/java script as standalone but not able to make it work in Peoplesoft environment. I am wondering whether OracleJet library accordion style has the display work better
I appreciate your input on what could be the approach
Regards - AB Krishna
Accordion style is working If I make group box for each category with in the main group box Accordion vertical). So this is not dynamic category. We have 16 categories at this time, if business user adds another category, I need to add another group box and the data grid with in the new group box. I wonder whether this can be dome more elegantly
ReplyDelete-AB Krishna
Hey Sasank,
ReplyDeleteGreat post! I do have a question on Chevron icon tappabale row indicator on fluid pages. Most of the delivered pages have that. How do we turn that on ? Any tips is greatly appreciated.
Thanks,
Ramesh
Hi Ramesh - Thank you for a great question and apologies for the delay in getting back to you.
DeleteHere is a blog post on how we can address this requirement:
https://pe0ples0ft.blogspot.com/2019/01/fluid-ui-working-with-grids-part-2.html
Hi Sasank,
ReplyDeleteI have a requirement, where I need to disable grid rows conditionally in a fluid side page.For ex - as in your example when You click on flex fluid layout in side page,the flex fluid layout row should get disabled/unresponsive.
I tried making the field disabled by using .enabled = false; , but its not working.
I am not sure I follow this requirement. Are you able to share a screenshot or something that shows the grid in question?
DeleteHi Sasank,
ReplyDeleteHow did you achieve the collapsible Navigation panel interface on the mobile device? Did you use the same code as we have on Personal Details Tile in ESS or you achieved it from Navigation collection itself? When I created a tile for navigation Collection and accessed it via mobile, the navigation pane is taking up the entire space and not collapsing like your demo under the 'stacked grid for small form factor' section.
I used PT_SIDE_PAGETABS page on the component for the side nav. You can find more details on this post.
Deletehttps://pe0ples0ft.blogspot.com/2018/03/fluid-ui-left-navigation-page-tabs.html
Hi Sasank,
ReplyDeleteQuestion on the Edit Box style class. For a required field in Classic, we used Field.Style = "PSERROR" in peoplecode event to get the red box. I have been trying to use the same thing in peoplecode for Fluid pages and not being able to work this out. Is there a way out for this? I am on Tools 8.56 and trying to add custom fields on delivered fluid page.
Hi Sasank,
ReplyDeleteQuestion on the Edit Box style class. For a required field in Classic, we used Field.Style = "PSERROR" in peoplecode event to get the red box. I have been trying to use the same thing in peoplecode for Fluid pages and not being able to work this out. Is there a way out for this? I am on Tools 8.56 and trying to add custom fields on delivered fluid page.
You can use the following Field Class Property and Methods to set the CSS on a Fluid field.
ReplyDeleteFreeFormStyleName: https://docs.oracle.com/cd/E92519_02/pt856pbr3/eng/pt/tpcr/langref_FieldClassProperties-071490.html#u186b35fc-f692-4106-8462-cdad9f7ca934
AddFFClass: https://docs.oracle.com/cd/E92519_02/pt856pbr3/eng/pt/tpcr/langref_FieldClassMethods-07149e.html#uc75c1fd3-59c6-47cc-9156-6d1ea2baa3d1
ReplaceFFClass: https://docs.oracle.com/cd/E92519_02/pt856pbr3/eng/pt/tpcr/langref_FieldClassMethods-07149e.html#u177734ed-bc8b-46d0-8e1b-8420027c40e7
You can use the style "psc_error" which you can find in the Fluid CSS Style Guide:
https://support.oracle.com/epmos/main/downloadattachmentprocessor?parent=DOCUMENT&sourceId=1909955.1&attachid=1909955.1:FLUID_UI_CSS_V1
Sasank
ReplyDeleteI have one I Created a Grid with 12 Rows
Month Paydate_From Paydate_To Period_From Period_to daysPay Account_days etc
using flex and a group
It will show
Group
Month
Paydate_From
Paydate_To
Period_From
Period_to
daysPay
Account_days
Month
Paydate_From
Paydate_To
Period_From
Period_to
daysPay
Account_days
etc
So How can I make the grid go sideways
ie
Month............Month...........etc
Paydate_From Paydate_From
Paydate_To Paydate_To
Period_From Period_From
Period_to Period_to
daysPay daysPay
Account_days Account_days
Sounds like a simple thing .. do I just need to build A string and build Mys self
I think you can remove the groupbox in the grid. That is the reason why your row of data is lining up in one column. This is only required if you want to display the grid data in that fashion. This behavior is also known as Stacking.
DeleteLet me know if that helps or if I am misunderstanding your issue.
I was trying to create a stacked grid... But have it display sideways.
ReplyDeleteI ended up building an array and the distributing it into a Grid with string columns So it cam out the way I wanted
Here is a Simple thing.. And with fluid it is driving me crazy. Amounts
ReplyDeleteIt seems like in a grid the amounts are left justifying.
so I get
500.36
6,000.36
But really the .36 cents should line up so when I look at a row of amounts it is all the same
On a simple grid I can just use psc_float-right , But on a stacked Grid and I have Numbers on top It just trys to put it on 1 line a Mess..
Maybe I am missing something really simple. Out of the Box it should Just right adjust the Amounts. Or a flag setting like add coma separators (1000). Playing with css is crazy
Actually the issue seems to be on a stacked grid.
ReplyDeleteI don't think I am able to replicate the problem. Are you having issues justifying while the Grid is Stacked or while it is NOT Stacked?
DeleteHere are some examples:
Stacked Grid with 1 Column:
Large Form Factor - Not Stacked: https://snag.gy/RoSTHW.jpg
Small Form Factor - Stacked: https://snag.gy/in496w.jpg
Stacked Grid with 2 Columns:
Large Form Factor - Not Stacked: https://snag.gy/5yKNs2.jpg
Small Form Factor - Stacked: https://snag.gy/SUgH8y.jpg
You will notice that in the Large Form Factor where Stacking does not occur, the Grid Column is still right justified even though I am using a Flex Grid (with Stacking).
sasank
ReplyDeleteIt was a stacked Grid
Desc Jan Feb Mar
Test1 Act: 933.99 833.33 333.33
Bud: 1,343.99 2,322.44 3,421.66
I am not sure how this will look when I save. But this is a stacked grid. and for some reason the numbers are left justified thus it is very complicated to look at. I added psc_halign something
Also if I have stacked grid with 3 items in each group but one , that one entry goes to the middle of the group box in the stacked grid. How to you get it to align to the top. I tried a few different ways and I just ended adding a dummy fields that was blank so it kept every thing in line, Which is a pain
@travelingwilly - I think I understand your requirement. Here are some options to Style Stacked Grids.
Deletehttps://pe0ples0ft.blogspot.com/2019/08/fluid-ui-working-with-grids-part-4.html
How could we enable the download to excel feature on a grid fluid page
ReplyDeleteIn PT 8.57 this feature is available:
Deletehttps://docs.oracle.com/cd/F13640_01/pt857pbr2/eng/pt/tupa/concept_WorkingWithFluidPagesAndControls.html#u904735de-c346-4bdf-b6d1-a520d53a0aa9
Also, refer MOS Document:
https://support.oracle.com/epmos/faces/DocContentDisplay?id=2583508.1
https://support.oracle.com/epmos/faces/DocContentDisplay?id=2398513.1
Hi Sasank,
DeleteIs this possible in PT8.56.10.
Please confirm.
Thanks,
Poornima
The download to Excel is only available in 8.57.
DeleteHave you tried using a grid with 2 columns (when in large form factor) then becomes stacked grid with just one column (when in SFF) and test in accessbility/screen reader mode? In my case, I am encountering 'No Row Header found' error when in SFF since the grid now has one column only in stacked grid.
ReplyDeleteTo answer your question: No - I have not tested screen reader mode, so I don't recall running into this issue.
DeleteHave you tried this option?
https://pe0ples0ft.blogspot.com/2017/09/fluid-ui-working-with-grids.html#7a
Just want to check if you are running into issues with screen readers even if you display the label as detailed in the above example.
Hi Sasank,
ReplyDeleteI am comparatively new to PS fuild technology and currently trying to change the default search option from 'Begins with' to 'Contains' on fluid prompt search page. The page that is involved here is - PT_PROMPTPAGE which populates search fields dynamically based on search keys defined at search record. Do you have any idea how this can be achieved? Pls let me know if you have any inputs for me here.
Do you have a delivered example where this PT_PROMPTPAGE is used?
DeleteHello Sasank ,
ReplyDeleteThank you for all your posts , i working on staked grid it works well but when we include labels in columns the long labels are not showing properly due to width , how can we adjust label width so that it shows exactly that what it is .
If the length of the label is too long then we will have issues with layout.
ReplyDeleteIs it not possible to reduce the length of the labels for small form factor?
Thanks ! I reduced with max of 5 char but the value is greater than 5 char ao its looks weird, I tried auto all came perfectly but alignment gone. Also my mobile view not showing in proper zoom.
ReplyDeleteHi Sasank, Is it possible to put tab separator on Flexi Grid Layout. When I am adding the tab separator it is unresponsive. Could you please suggest.
ReplyDeleteI have not tried it. When you say unresponsive, do you mean the page does not load? Or the page no longer responds/adapts to various form factors (device sizes)?
DeleteI got one ...
ReplyDeleteI have a flex grid with Columns But based on the main record
I want to hide Columns
Change Title (Have not found yet)
I have tried to GetGrid
I have tried EnableColumns
I have tried to get get columns and tried enable and make visible..
Is there another way to do it with Fluid Flex Grids on a fluid Page
I have tried
&GridEvnt = GetGrid(Page.N_RNAVM_CHGPJ, "N_RNAVM_EVNT", &I);
ReplyDelete&GridEvtColumns = CreateArrayRept(CreateArrayRept("", 2), 0);
&EvtCol = Split("DESCR,END_DT,EVENT_DT,AMOUNT,BUDGET_REF,FUND_CODE,OPERATING_UNIT,DEPTID,PROGRAM_CODE,ACCOUNT,PROJECT_ID", ",");
If &CA_PROJ_Rec.PREPAID_FLAG.Value = "Y" Then
&EVTColumns = Split("DESCR,END_DT,FUND_CODE,OPERATING_UNIT,DEPTID,PROGRAM_CODE,ACCOUNT,PROJECT_ID,BUDGET_REF,AMOUNT", ",");
Else
&EVTColumns = Split("DESCR,EVENT_DT,AMOUNT", ",");
End-If;
For &C = 1 To &EvtCol.Len
If &EVTColumns.Find(&EvtCol [&C]) > 0 Then
&ANS = "Y";
Else
&ANS = "N";
End-If;
&GridEvtColumns.Push(CreateArray(&EvtCol [&C], &ANS));
End-For;
&GridEvnt.EnableColumns(&GridEvtColumns);
Hi Sasank,
ReplyDeleteThank you for wonderful post.I have a query if you can help with.
I have two grids on page..grid1 and grid2..Grid2 has lesser columns than Grid1..I want to align my second grid from 4th to 9th column of first grid..I tried to achieve this using width control and padding for Grid2 but It didn't work out..The Grid2 overall space is not getting reduced.Is there any way to achieve this?
Thanks
Would you be able to share a screenshot of the grid?
DeleteYou can use tools like: https://snipboard.io/
Wonderful and very useful information. Thank you Sasank. However, the pictures are not loading. Are they still hosted on this domain?
ReplyDeleteThey are GIFs and appear to load ok on my end. Can you please check if your browser is blocking it for some reason?
DeleteThanks for the information.Can we use scroll areas in peoplesoft fluid page? I have created a ESS page where am using scroll area .However i couldn't find any border to be visible for scroll area.It just looks like the normal edit boxes.Please help
ReplyDeleteYes, you should be able to add scroll areas on a Fluid page. However, I do not have any examples to share on this topic at this point in time. Thanks!
DeleteHi, I am trying to create a Fluid Grid.
ReplyDeleteI am unable to see the Vertical Scroll when adding new rows. Also, the View All option is missing. what am i missing ?
Hi Shiva - Check out lazy scrolling option.
Deletehttps://pe0ples0ft.blogspot.com/2019/03/fluid-ui-working-with-grids-part-3.html
https://docs.oracle.com/cd/E92519_02/pt856pbr3/eng/pt/tflu/concept_WorkingWithOtherPageControls.html
Hi Sasank, did you get chance to try freezing columns in flex grid. Am also looking for this solution. TIA
ReplyDeleteHi Sasank,
ReplyDeleteI tried to get the pdf document that you have mentioned in this blog, but looks like it's no longer available on that site.
http://cy2.nl/wp-content/uploads/10-Fluid-UI-controls-you-should-know-about.pdf
Do you have a downloaded copy of this file?
Hi Sasank, I have a grid that needs to display 12 or 13 rows of data and it is maxing out at 9. It is 2 columns, leave type and amount; amount shows up for all the rows but type is only coming on the first 9. I am populating the grid by creating sql on sql objects and traversing thru while loop to populate the rowset of the grid
ReplyDeleteThanks Sasank. Very good information. However I have a quick question. On a fluid page with Flex grid, I am trying to right align the labels of Grids field. Its unstacked column. But the standard psc stylesheets are not working for some reason and labels are always left align. Any inputs on how to right align labels of Flex Grid column would be appreciated.
ReplyDelete