Fluid UI - Custom Development - Invoke JavaScript from PeopleCode

There are some notable additions to PeopleCode support for Fluid UI in terms of the built-in functions and properties that are delivered.

In Classic, if we had a requirement to invoke a JavaScript function from PeopleCode, then one option would be to use a HTMLAREA on the page and dynamically populate the HTMLAREA value with the JavaScript code.

In Fluid, we can very easily use the AddOnLoadScript function to invoke JavaScript in the onload event and the Field Class - JavaScriptEvents property to associate JavaScript events to a Field.

For the purposes of a demonstration, I created a simple Fluid page with 3 button fields.

I added the following Page Activate PeopleCode:

Declare Function SetViewport PeopleCode PTLAYOUT.FUNCLIB FieldFormula;

/* Set ViewPort Meta for SFF Scaling */
SetViewport(""); /* apply the system default viewport setting */

AddStyleSheet(StyleSheet.PSBASE_LAYOUT);

AddJavaScript(HTML.CSK_PC2JS_FLU);

AddOnLoadScript("pageActivate();");
CSK_FL_PC2JS_WK.BUTTON1.JavaScriptEvents = "onclick='javascript:button1();'";
CSK_FL_PC2JS_WK.BUTTON2.JavaScriptEvents = "onclick='javascript:button2();'";
CSK_FL_PC2JS_WK.BUTTON3.JavaScriptEvents = "onclick='javascript:button3();'";

Here is the JavaScript in the HTML Object CSK_PC2JS_FLU:

var pageActivate = function() {
    console.log('JS invoked from Page Activate');
};
var button1 = function() {
    console.log('JS invoked by Button 1 OnClick');
};
var button2 = function() {
    console.log('JS invoked by Button 2 OnClick');
};
var button3 = function() {
    console.log('JS invoked by Button 3 OnClick');
};

Click here to check out a demo video >>>> SWF File

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!

Fluid UI - Custom Development - Twitter Feed As a Tile

Fluid Tiles can display dynamic content. I was curious how we can use the Fluid Tiles to display dynamic content from an external source, e.g.: Twitter Feed.

Here are the steps I followed to create a Fluid Tile which displays a Twitter Feed.

Step 1: Create a Twitter Widget using your Twitter account

Twitter > Settings > Widgets

Enter your Search Query and configure your widget settings as per your requirement. Copy the HTML code that is provided at the bottom right of the page.

Step 2: Store the Twitter HTML in a HTML Object

Step 3: Create an IScript that renders the Twitter HTML

PeopleCode for Reference:

Function IScript_Twitter_Feed()
   %Response.Write(GetHTMLText(HTML.CSK_TWITTER_FEED));
End-Function;

Step 4: Create a Fluid Content Reference with Tile Properties referencing the Twitter IScript

I created a Content Reference as a Non-Peoplesoft URL and referenced the custom IScript (created in Step 3) in the Content Reference > Fluid Attributes > Dynamic Tile Content section.

Results:

Now we are ready to test this tile. I added it to a custom homepage and voila!

Fluid UI - Custom Development - Styling Tiles

In this post, I will write about how we can style any custom tiles that we might be creating for Fluid UI.

Why would we want to do that?

I created a custom Fluid component/page and created a Fluid Content Reference.

Now my icon¹ image (CSK_CC_SCAN) for my custom tile ended up as follows:

Notice how the icon is not position appropriately? Sure, I can create an image with the desired alignment and spacing. But wouldn't it be better to just adjust the style on the tile image to add some alignment/margin properties?

If you see the Content Reference - Fluid Attributes - Tile Information, there is no way to assign a custom style to the Tile.

How do we associate styles to custom tiles?

I simply added the following custom style at the very end of my 'Fluid - Global Override Style Sheet' (CSK_BRAND_FLUID_TEMPLATE) referenced on my custom Branding Theme (CSK_THEME_FLUID). Refer: PeopleTools 8.55.x - Branding - Part I for more details.


CSK_CC_SCAN$30 is the id attribute generated on the HTML for my custom tile.

Now, we can see the results from the image above that my custom tile icon is displayed in the desired position with a top margin of 25px.

If you think this would be a good feature to add to the 'Fluid Content Reference - Tile Information' section, then please vote for this idea on My Oracle Support.

¹ - Icon made by Freepik from www.flaticon.com