Fluid UI - Oracle JET - Using KnockoutJS for Data Binding - Demo

Continuing on my experimentation with Oracle JET in Fluid UI, I will demo how we can use KnockoutJS available as part of Oracle JET for data binding. This demonstration is based on the following Oracle JET MOOC - Lesson 1, Part 4: Data Binding.

Development Environment: HCM 9.2 PUM Image 17 - PeopleTools 8.55.03

Step 1: Create a Fluid Page

Let us create a simple Fluid page - CSK_KO_DATA_BIND - using PSL_APPS_CONTENT layout. And add a couple of group boxes for creating a flex layout (oj-flex and oj-flex-item). Adding the flex layout is optional but you can refer to Fluid UI - Oracle JET - Using Oracle Alta UI and Flex Layouts for more details.

Further, let us add the following page field elements (group box, edit box - input field and edit box - display only):

Group Box Properties:

Edit Box (Input Field):

Edit Box (Display Only):

Step 2: Add KnockoutJS path to requireJS configuration

Next, we need to update our global requireJS configuration to include the path for knockout.

For complete javascript code, refer jsFiddle link: CSK_REQUIRE_CFG_JS

For more details on using requireJS refer:PeopleTools 8.55+ - Using Oracle JET (JQuery, JQueryUI, requireJS and more) - Part 1, Part 2, Part 3, Part 4.

Step 3: Add data binding to the View (Page HTML)

In our infrastructure (PeopleSoft - Pure Internet Architecture), the "View" is the page (CSK_KO_DATA_BIND) which generates the HTML. As a next step, we can write some PageActivate PeopleCode to add the data-bind attributes to the Fluid page fields using the Field Class HtmlAttributes property.

PeopleCode for Reference:
/* Setting the data-binds in the "View" */
CSK_OJ_WRK.DESCR1.HtmlAttributes = "data-bind='value: userText'";
CSK_OJ_WRK.DESCR2.HtmlAttributes = "data-bind='value: userTextCaps'";

Step 4: Apply the KnockOut Bindings to the ViewModel

Let us update the PageActivate PeopleCode to include a javascript object (CSK_KO_MAIN_JS) on page load. This javascript will serve the same purpose as a traditional 'main.js' in the javascript/Oracle JET architecture.

JavaScript: CSK_KO_MAIN_JS


- As you can see, we added the requireJS configuration path to the "ViewModel" javascript in the main (CSK_KO_MAIN_JS), instead of using the global requireJS configuration in Step 2 (while setting up Knockout JS path). This is because we do not want this app (page) specific path to clutter our global requireJS configuration.
- In the require block, we injected the Alta CSS to enable the oj-flex and oj-flex-item styling that we used in Step 1.
- Finally, the Knockout binding is applied to the "ViewModel" which resides in CSK_KO_VIEWMODEL_JS.

Step 5: Create ViewModel JavaScript Object - CSK_KO_VIEWMODEL_JS

JavaScript: CSK_KO_VIEWMODEL_JS


The ViewModel has the define block as described in the Oracle JET MOOC lesson example.

Results:

Fluid UI - Oracle JET - Using Oracle Alta UI and Flex Layouts

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

 

Using Bower to manage javascript packages in PeopleSoft Applications

I previously experimented with several open source javascript libraries in PeopleSoft (E.g.: Using ACE Editor for Branding Objects). In most instances, I manually downloaded the js libraries and placed them on my web server domain folder.

I wanted to see if we could use Bower for managing such js packages in PeopleSoft. We may not use it as heavily in PeopleSoft as others do in the web development world. Nevertheless, Bower drastically simplifies the task of downloading the packages (taking into account all the dependencies, etc.) and managing them (including keeping them updated as required).

Further, I wanted to create a seamless/dynamic method to load these packages by mounting the bower_components folder on the PeopleSoft web server domain folder. For the proof of concept, I will be installing Bower on my local desktop and then mounting my bower_components folder (which contains all the libraries installed) to the web server of a HCM 9.2 PUM Image 17 installed as a VBox Image on the same desktop machine.

Note: The following steps are a proof of concept only. It is intended to create a seamless javascript package manager for a PUM Virtual Box Image which is primarily used as a development playground. The same concept could be extended to other PeopleSoft development environments.

Step 1: Install Node.js, Git and Bower on the destination machine

In my case, I installed them on my desktop which is running Windows 7 as the OS. I will be using my desktop computer as the location to run Bower.

1. To download and install Node.js click here.
2. To download and install Git click here.
3. I used an online resource (click here) for instructions to install Bower. Note: While the blog title states Windows 8, the steps work for Windows 7 as well.

Finally, make sure that the Git bin and cmd directories are also added to the PATH system variable. In my case, my Git directories were in the following location:
C:\Program Files\Git\bin;
C:\Program Files\Git\cmd;

Step 2: Using Bower - Installing Packages

Run 'Power Shell' as an Administrator. Then navigate to the directory where we want to install our bower packages.

Bower Init (Optional)

This should created our bower.json file.

Bower Search and Install

As an example, I will be using the ACE Editor as the package to search and install.

After executing, bower install ace --save, we should now see the ace editor library installed under the bower_components folder in the current directory. If there are dependencies for the library, then they will also be installed automatically. In this case, there are none for ACE Editor.

Also, the bower install ace --save, should update the bower.json file (if bower init was executed).

Step 3: Mount the bower_components directory on the PeopleSoft Web Server

Thanks to Michael Ripley who helped me with this part of the requirement on the psadmin.io Slack community.

Before starting the VM (PUM Virtual Box Image), create a Shared Folder (that points to our bower_components folder) using Virtual Box Manager Settings.

Now, start the VM and create a bower_components folder on the web server domain (ps - in my case) folder as follows:

Then, update /etc/fstab file to add the following line:

bower_components /home/psadm2/psft/pt/8.55/webserv/peoplesoft/applications/peoplesoft/PORTAL.war/ps/bower_components vboxsf defaults 0 0

This should take care of mounting the shared folder, bower_components, on to the web server during boot up.

Finally, once we restart the VM, we should now see the shared bower_components directory contents on the web server.

Now, we can start referencing and using the libraries under the bower_components directory just like any other js library on the web server!