In my previous posts, I showed how we could use Oracle JET with PeopleTools (and client side javascript) to take advantage of some robust solutions for file loading and modularity. Since I started attending the Oracle JET MOOC, I wanted to see if we could leverage Oracle JET for enhancing the UI in PeopleTools Fluid. Why would we want to do that? Well, why not? Oracle JET has a very well documented CookBook and pre-built UI components, so we could just plug and play the UI functionality to Fluid (without reinventing the wheel). Sounds good in theory! Let us see how we could use Oracle Alta UI and Flex Layout (part of CSS3) in Fluid as a starting exercise.
Development Environment: HCM 9.2 PUM Image 17 - PeopleTools 8.55.03
Step 1: Install the latest version of Oracle JET
As I have shown in the past already, Oracle JET is available on the web server starting with PeopleTools 8.55. This is great for using requireJS, jQuery and other libraries (that are part of Oracle JET), but if we want to venture into the UI layer, it is better to install the latest version of Oracle JET to take advantage of the newer capabilities (since the delivered version - at least as of PeopeTools 8.55.06 - is still referencing a much older release).
I used bower to automatically download, install and place the latest version of Oracle JET onto my bower_components folder - which is mounted on my web server. For more details on how to use bower, please refer - Using Bower to manage javascript packages in PeopleSoft Applications.
Oracle JET Installation:
Oracle JET 2.1.0 on the web server (bower components):
Note: You don't necessarily have to use bower for placing Oracle JET on the web server. You could use other options that might be convenient and accessible to you.
Step 2: Create a simple Fluid Page using PSL_APPS_CONTENT Layout Page
There is nothing fancy about this page (at least as of now). It is basically empty right now.
Fluid Page Object - App Designer:
Fluid Page:
Step 3: Inject Alta UI CSS to the Fluid Page
I am using the Page Activate PeopleCode event to execute an OnLoad javascript which will take care of loading the Alta UI CSS file located on the web server (Oracle JET directory).
JavaScript: CSK_OJ_LOAD_CSS
You can see that I am adding the oj-alta-notag-min.css instead of oj-alta-min.css. This is to avoid conflicting with some of the other basic PeopleSoft styles. For more details review - Understanding Oracle JET Theming For Compatibility.
Note: For more details on the cskLoadCSS function, refer PeopleTools 8.55+ - Using Oracle JET (JQuery, JQueryUI, requireJS and more) - Part 3.
Result:
We can now see the oj-alta-notag-min.css file injected to the head when 'oj Layout' page is loaded.
Step 4: Use Flex Layout in Fluid
Now that we completed all the logistics, we are ready to start using the 'Flex Layout' in Fluid.
Let us add a few group boxes to the Fluid page that would provide us a mechanism to add 'Layout Only DIVs' to the page which would in turn allow us to use the Oracle JET - Flex Layout styles.
oj-flex Group Box Properties:
You can see that in the Group Box Properties, I have set the 'Override PeopleTools Style?' to Yes. This is required specifically for these type of cases where we use CSS from external libraries. Otherwise, there will be some undesired PeopleTools styles automatically added to this DIV. Also, we need to make sure that we set the Group Box Type to 'Layout Only' and Html Tag Type to 'DIV'. The Default Style Name (oj-flex oj-sm-only-flex-direction-column) was directly copied from this lesson: Oracle JET MOOC: Lesson 1, Part 10 - Oracle JET Layouts - I recommend reviewing this video to get a good understanding of Alta UI and Flex Layouts.
oj-flex-item Group Box Properties:
Default Style Name: oj-panel oj-margin oj-flex-item
Results:
Let us now see this in action and also compare it with the same Flex layout implemented in an Oracle JET QuickStart Template.
Watch Demo Here: Oracle JET QuickStart Template Demo
Watch Demo Here: Fluid UI - Flex Layout Implementation
Step 5: Adding Fluid Elements to the Flex Items
What is the benefit of all these steps? We are using a well documented, stable set of responsive styles and UI components delivered by Oracle JET instead of developing them from scratch or trying to find appropriate Fluid styles (which is not very easy!). Now, let us employ this in a more realistic use case. Let us add some Fluid elements (input fields) to the Flex Items.
Group Box Properties:
Input Field (Edit Box) Properties:
Note: I repeated the same elements in the other two flex items.
Results:
Watch demo here: Fluid UI - Flex Layout Implementation with Input Fields
Development Environment: HCM 9.2 PUM Image 17 - PeopleTools 8.55.03
Step 1: Install the latest version of Oracle JET
As I have shown in the past already, Oracle JET is available on the web server starting with PeopleTools 8.55. This is great for using requireJS, jQuery and other libraries (that are part of Oracle JET), but if we want to venture into the UI layer, it is better to install the latest version of Oracle JET to take advantage of the newer capabilities (since the delivered version - at least as of PeopeTools 8.55.06 - is still referencing a much older release).
I used bower to automatically download, install and place the latest version of Oracle JET onto my bower_components folder - which is mounted on my web server. For more details on how to use bower, please refer - Using Bower to manage javascript packages in PeopleSoft Applications.
Oracle JET Installation:
Oracle JET 2.1.0 on the web server (bower components):
Note: You don't necessarily have to use bower for placing Oracle JET on the web server. You could use other options that might be convenient and accessible to you.
Step 2: Create a simple Fluid Page using PSL_APPS_CONTENT Layout Page
There is nothing fancy about this page (at least as of now). It is basically empty right now.
Fluid Page Object - App Designer:
Fluid Page:
Step 3: Inject Alta UI CSS to the Fluid Page
I am using the Page Activate PeopleCode event to execute an OnLoad javascript which will take care of loading the Alta UI CSS file located on the web server (Oracle JET directory).
JavaScript: CSK_OJ_LOAD_CSS
You can see that I am adding the oj-alta-notag-min.css instead of oj-alta-min.css. This is to avoid conflicting with some of the other basic PeopleSoft styles. For more details review - Understanding Oracle JET Theming For Compatibility.
Note: For more details on the cskLoadCSS function, refer PeopleTools 8.55+ - Using Oracle JET (JQuery, JQueryUI, requireJS and more) - Part 3.
Result:
We can now see the oj-alta-notag-min.css file injected to the head when 'oj Layout' page is loaded.
Step 4: Use Flex Layout in Fluid
Now that we completed all the logistics, we are ready to start using the 'Flex Layout' in Fluid.
Let us add a few group boxes to the Fluid page that would provide us a mechanism to add 'Layout Only DIVs' to the page which would in turn allow us to use the Oracle JET - Flex Layout styles.
oj-flex Group Box Properties:
You can see that in the Group Box Properties, I have set the 'Override PeopleTools Style?' to Yes. This is required specifically for these type of cases where we use CSS from external libraries. Otherwise, there will be some undesired PeopleTools styles automatically added to this DIV. Also, we need to make sure that we set the Group Box Type to 'Layout Only' and Html Tag Type to 'DIV'. The Default Style Name (oj-flex oj-sm-only-flex-direction-column) was directly copied from this lesson: Oracle JET MOOC: Lesson 1, Part 10 - Oracle JET Layouts - I recommend reviewing this video to get a good understanding of Alta UI and Flex Layouts.
oj-flex-item Group Box Properties:
Default Style Name: oj-panel oj-margin oj-flex-item
Results:
Let us now see this in action and also compare it with the same Flex layout implemented in an Oracle JET QuickStart Template.
Watch Demo Here: Oracle JET QuickStart Template Demo
Watch Demo Here: Fluid UI - Flex Layout Implementation
Step 5: Adding Fluid Elements to the Flex Items
What is the benefit of all these steps? We are using a well documented, stable set of responsive styles and UI components delivered by Oracle JET instead of developing them from scratch or trying to find appropriate Fluid styles (which is not very easy!). Now, let us employ this in a more realistic use case. Let us add some Fluid elements (input fields) to the Flex Items.
Group Box Properties:
Input Field (Edit Box) Properties:
Note: I repeated the same elements in the other two flex items.
Results:
Watch demo here: Fluid UI - Flex Layout Implementation with Input Fields
No comments:
Post a Comment