PeopleTools 8.55 - Oracle JET - Using ACE Editor for Online Branding Objects (HTML, JavaScript, Style Sheets)

Have you ever wondered if there is a better way to edit the "Branding Objects" that are available online (PeopleTools > Portal > Branding > Branding Objects)?

If you have managed Branding Objects (JavaScript, HTML and CSS) online, you would have noticed that the editor is a simple 'textarea'. It is not a great UI and it makes it really difficult to manage/write anything more than a few lines.

E.g.:

Although it is great that, starting with PeopleTools 8.53, we now have the ability to manipulate javascript, html and css objects online (instead of using App Designer), the major part of reading/understanding/writing the code probably needs to be done outside on a text editor which has better support for the markup/syntax.

Why not a code editor for the web?

If you attended Jim Marion's popular session 'PeopleTools Tips and Techniques' either at Oracle OpenWorld 2015 conference or HEUG - Alliance 2016 conference, you might have seen him show us how he created a custom page to manage javascript content using ACE Editor. When I asked him how he built something like that, he mentioned that he used AJAX to marshal the content and the page itself is fronted by a component for searching, but is really an iScript for display and an iScript for saving. It was a brilliant idea to use a high performance code editor to manage such objects (some features/benefits include auto complete, syntax highlighter for over 100 languages, better maintenance/display of indending/outdending, folding function/code modules and overall better readability).

Jim's approach involved storing the javascript contents in a custom table and then referencing them as needed. I wanted to take the same idea and create a mechanism to integrate ACE Editor with any page field (textarea). At the same time, I did not want to customize anything. So, I want my approach to be very similar to creating/enabling Rich Text page fields but instead of using App Designer, I want to simply inject a custom javascript to the page and enable the ACE Editor. Another difference with my approach is that I want to use JavaScript and the component processor to take care of marshaling and saving the data instead of using the AJAX/IScripts option.

Do any challenges come to mind?

- How do we replace the existing 'textarea' on the page with the ACE Editor?
- Next, how do we transfer the contents of the ACE Editor to the page field 'textarea'?
- Next, how do we make the component processor accept and honor this change made to the buffer via JavaScript (especially because we are not customizing the page and the page field may not have the 'Modifiable by JavaScript' setting enabled)?

Here are steps I went through to integrate ACE Editor with the PeopleTools - Branding Objects Page. If you like this idea and implementation, then please click here to vote for it on My Oracle Support Community.

Note:

1. A similar approach could be used to extend the ACE Editor functionality to any other page field - textarea.
2. I used the latest version of my 'Global JavaScript/Style Sheet Injection Bootstrap' (using Oracle JET and more importantly requireJS) to inject a custom javascript into the 'Branding Objects' page. If you choose not to use this approach, then you will need to find an alternative way to inject the custom javascript but the core functionality of the js code should work as described. (Refer: 'Using Oracle JET' series - Part 1, Part 2, Part 3 and Part 4).

Step 1: Download the ACE Editor library and store it locally on the web server

I downloaded the ACE Editor library from the following github URL and placed it on my web server:
https://github.com/ajaxorg/ace-builds/archive/master.zip

Web Server:

Just to show the library folder structure, here is a screenshot highlighting the path to the ace.js file.

Step 2: Add new function cskGetFormName() to our JS Bootstrap (CSK_FL_BOOTSTRAP_JS)

Function Name: cskGetFormName


This function helps us resolve the %FormName meta-html which is not available currently for client side javascript. So, we cannot use it, for example, as submitAction_%FormName in a client side javascript. The expectation is that it would resolve itself to submitAction_win0, submitAction_win1 or submitAction_winN depending on the current window. So, I wrote this function to determine the %FormName portion as a string, which I will be using in the next step as part of FSU_ACE_CFG_JS javascript code.

Step 3: Create Custom JavaScript Object (CSK_ACE_CFG_JS) to configure the ACE Editor on the desired page

JavaScript Object: CSK_ACE_CFG_JS


Explaining the Script:

• First, you will notice that I am adding the ACE Editor library path to the requireJS configuration locally instead of using the requireJS configuration script object (CSK_REQUIIRE_CFG_JS). The reason I am appending to the requireJS paths locally is because, we don't want this library to get loaded for the entire application, rather just conditionally to a specific page. In step 4, I will detail how to achieve that using the Global Injection Bootstrap (CSK_FL_BOOTSTRAP_JS).
• Next, I am defining jquery, ace.js and jqueryui as dependencies for the function execution using requireJS.
• Inside the function execution, I included BOOTSTRAP 3.0.0 (which was downloaded from this link and stored in a custom object) and JQUERY 1.8.17 (delivered object) CSS. I am using the custom function cskLoadCSS to take care of the CSS loading.
• Next, I search for the textarea (id="PTBR_MGOBJ_WRK_PTBR_HTMLAREA1"), hide it and replace it with the ACE Editor div.

• Now the delivered textarea is hidden and our custom ACE Editor is in the DOM. Further, I used a basic set of configuration options for the Editor which we can certainly expand depending on our use case (ACE Editor is highly configurable). Also, I am dynamically setting the mode of the Editor to either html, javascript or css depending on the object type that we are updating. As part of the Editor configuration, I also initialized the contents of the ACE Editor with the contents of textarea.
• Lastly and most importantly, we update the textarea (now hidden) with the latest contents of the ACE Editor any time there is a change in the editor contents. 
• addchg_%FormName Function: The trick to make the component buffer accept and honor the changes made to the textarea (PTBR_MGOBJ_WRK_PTBR_HTMLAREA1) - via client side javascript - is to use the addchg_%FormName function. I had no idea about the existence of such a function and its significance. I learned about this gem from Chris Malek while discussing and troubleshooting an unrelated issue with Fluid!

Step 4: Conditionally Load ACE Editor Config JavaScript (CSK_ACE_CFG_JS) using the Global JavaScript Injection Bootstrap

The conditional logic to only load CSK_ACE_CFG_JS on the Secondary Page PTBR_ADDHTML_SEC, can be found in the cskInjectJS function which is part of CSK_FL_BOOTSTRAP_JS object. An updated version of CSK_FL_BOOTSTRAP_JS source code can be found here.

Results:

HTML:

JavaScript:

CSS:

Now we are ready to enjoy the ACE Editor for writing code! Once again, if you like this idea and implementation, then please click here to vote for it on My Oracle Support Community.

PeopleTools 8.55: What is %include Meta-HTML function?

I found this gem of a Meta-HTML function that has been hiding deep in the bowels of PeopleTools javascript.

I was digging into some of the delivered javascript functions in a HCM 9.2 PUM Image 17 which is on PeopleTools 8.55.03. When I looked in the PT_COMMON HTML object, I almost jumped out of my couch. :)

Just to be sure, I checked if this function exists in 8.54 or prior tools releases. Correction: I found one occurrence in 8.54 (PT_PAGESCRIPT_FMODE) which leads me to believe that this function was probably introduced in PeopleTools 8.54 (so it is not new to 8.55 as I previously thought).

It appears that this undocumented (since it is not referenced anywhere in PeopleBooks) Meta-HTML function can be used to include other javascripts objects inline. This can be very handy!

Let us see how this works.

I created a custom JavaScript object (CSK_TEST) using Branding Objects.

Next, I added this to my Bootstrap JavaScript (CSK_FL_BOOTSTRAP_JS) as follows (Refer: PeopleTools 8.55+ - Using Oracle JET (JQuery, JQueryUI, requireJS and more) - Part 1).

Let us see this in action.

Here is how the %include function gets resolved at runtime:

I can see many great uses for this Meta-HTML function! :)

Implementing no CAPTCHA reCAPTCHA in PeopleSoft

This post is based on a great discussion concerning security on the OTN forums.

The requirement was to solve the problem of bots/hacker websites hijacking users to their malicious locations (masquerading the legitimate PeopleSoft site), scraping the credentials from the users and then posting the data into the PeopleSoft signin page in a typical phishing attack scenario.

If you read through the discussion, you will notice some very valid questions, concerns and suggestions provided by Greg Kelly from Oracle and others around how to ensure that such phishing emails and attacks can be prevented.

Outside of that discussion, traditionally CAPTCHA has been used in several websites to prevent bot attacks. Now Google's reCAPTCHA project is being used more commonly since its inception in 2009. The latest version (no CAPTCHA reCAPTCHA) has significant user experience improvements. Additionally, the reCAPTCHA API version 2.0 is now a RESTful API which makes server side validation a lot easier. Another great incentive to use Google's no CAPTCHA reCAPTCHA is the fact that it is FREE!

Before going down the path of implementing reCAPTCHA, please consider accessibility and user experience implications and test accordingly. Click here for an article that talks about accessibility features of reCAPTCHA.

Here are the steps to implement Google reCAPTCHA API version 2.0 in PeopleSoft.

Note: I am currently using a HCM 9.2 PUM Image 12 - PeopleTools 8.54.08.
Reference Document: Developer's Guide

Step 1: Sign up for an API key pair

Please click here to sign up on the Goolge reCAPTCHA website. Once you sign up for an API key pair to your site, you will be provided with two keys - secret key and site key.

Step 2: Client side integration

In this case, let us assume that we want to add reCAPTCHA to the PeopleSoft signin page. So the signin page will be our client side content where we would add the reCAPTCHA code.

Here are the instructions from the Google reCAPTCHA documentation:

Let us add the above code snippet to the PeopleSoft signin page (signin.html).

Note: We can locate the signin.html file in the following directory on the web server.
<PIA_HOME>/webserv/<DOMAIN>/applications/peoplesoft/PORTAL.war/WEB-INF/psftdocs/<site_name>/

Add the following script inclusion code just before </HEAD> as shown:
<!-- CSK reCAPTCHA - Start -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- CSK reCAPTCHA - End -->

 Add the following div (reCAPTCHA) in an appropriate location on the content page. I chose to add it right before the submit button which could be referenced by <input name="Submit" type="submit" title="<%=137%>" class="ps-button" value="<%=137%>">.

<!-- CSK reCAPTCHA - Start -->
    <div class="g-recaptcha" data-sitekey="<ENTER_YOUR_SITE_KEY_HERE>" align="center"></div>
    <br/>
<!-- CSK reCAPTCHA - End -->

Note: If you are on PeopleTools 8.54 then you might also want to perform the same customizations to signin_fmode.html file as well. This is due to a known issue that will be fixed in PeopleTools 8.55. Refer: E-FLUID - Fluid HomePage Sign Off Link Calls fmode=1 in URL, Skips Custom signout.html Page (Doc ID 2001761.1).

Please bounce and clear the cache on your web server domains. Let us now see the reCAPTCHA plugin in action on the client side.

We are not done yet! Once verified, the reCAPTCHA integration would additionally add a string with the name "g-recaptcha-response" to the payload when the user submits (form post). This string would be a key that is generated specifically for our site. The string needs to be validated on the server side which we will explore in the next section.

Step 3: Server side integration/validation

This is the step where we verify the string provided by reCAPTCHA for validity by making a REST API call. Instructions from Google reCAPTCHA documentation.

For more details: Refer API documentation.

In this case, since we are trying to validate the reCAPTCHA response string provided by the PeopleSoft signin page, the best place to add the validation logic would be in the SignOn PeopleCode.

Let us now add a new row/entry in the sequence of Signon PeopleCode events as shown in the following screenshot. I am referencing a custom function name which I will explain shortly.

Record: CSK_RECAPTCHA
Field Name: FUNCLIB
Event Name: FieldFormula
Function Name: CSK_RECAPTCHA_CHECK

Note: After making any changes to Signon PeopleCode we must bounce the app servers for them to take effect.

Now let us see how to write some custom code to validate the reCAPTCHA response string. For reference, I pasted the entire peoplecode at the very end of this post.

Click on image to zoom in!

Note: In this case, I am using Apache Commons HttpClient Java Libraries to make the REST API call. Please refer to my previous blog posts that have more details on this topic (Part I and Part II).

Details on custom function validate_reCAPTCHA_JSON is provided below. For the purposes of JSON parsing, I am using a server side scripting technique described by Jim Marion in his blog post. 

Click on image to zoom in!

Message Catalog Entry that contains the JSON Parsing Script:

Script for reference:

var result = (function() {

     var json = JSON.parse(json_string);

     if (json.success) {
          return "true";
     } else {
          return "false";
     }

}());

This completes our server side integration/validation. Now we are relatively free of bot attacks! :)

Note: The same feature can be applied to any content page within the PeopleSoft application as well. If not easier, the effort should be the same as what we just went through in this post.

PeopleCode Functions for reference:

Function validate_reCAPTCHA_JSON(&json As string) Returns boolean;
  
   Local string &success;
  
   /* Instantiate ScriptEngine Manager and Engine objects */
   Local JavaObject &manager = CreateJavaObject("javax.script.ScriptEngineManager");
   Local JavaObject &engine = &manager.getEngineByName("JavaScript");
  
   /* Pass JSON string */
   &engine.put("json_string", &json);
   /* Get JSON Parse JavaScript from Message Catalog */
   Local string &jsFunction = MsgGetExplainText(26000, 1, "NONE");
  
   If &jsFunction <> "NONE" Then
      &engine.eval(&jsFunction);
      &success = &engine.get("result").toString();
   End-If;
  
   If Upper(&success) = "TRUE" Then
      Return True;
   Else
      Return False;
   End-If;
  
End-Function;

Function CSK_RECAPTCHA_CHECK()
  
   /* Get reCaptcha parameter from the Request */
   Local string &reCAPTCHA = %Request.GetParameter("g-recaptcha-response");
  
   If &reCAPTCHA = "" Then
      /* Fail Authentication */
      SetAuthenticationResult( False, %SignonUserId, "", False);
   Else
      /* Do further validation if required. Refer: https://developers.google.com/recaptcha/docs/verify */
      /* Post user's reCAPTCHA response and server's private key to API: https://www.google.com/recaptcha/api/siteverify */
      try
        
         /* Using Apache HttpClient for REST - Post Method */
         Local JavaObject &jHttp, &jMethod, &filePart, &partArray, &mPartReqEntity;
        
         /* Initialize HttpClient and set parameters */
         &jHttp = CreateJavaObject("org.apache.commons.httpclient.HttpClient");
         &jHttp.getHttpConnectionManager().getParams().setConnectionTimeout(20000);
        
         /* Initialize PostMethod */
         /* !!!!!! Avoid hardcoding !!!!!!!! Replace below URL with a URL definition that is configurable. */
         Local string &sURL = "https://www.google.com/recaptcha/api/siteverify";
         &jMethod = CreateJavaObject("org.apache.commons.httpclient.methods.PostMethod", &sURL);
         &jMethod.setFollowRedirects( False);
        
         /* Add Multi-Part Message - Start */
         /* Create String Part - secret */
         &secretPart = CreateJavaObject("org.apache.commons.httpclient.methods.multipart.StringPart", "secret", "<ENTER_YOUR_SECRET_KEY_HERE>");
         /* Create String Part - response */
         &responsePart = CreateJavaObject("org.apache.commons.httpclient.methods.multipart.StringPart", "response", &reCAPTCHA);
         /* Add Parts to Part Array */
         &partArray = CreateJavaObject("org.apache.commons.httpclient.methods.multipart.Part[]", &secretPart, &responsePart);
         /* Create Multi-Part Request Entity */
         &mPartReqEntity = CreateJavaObject("org.apache.commons.httpclient.methods.multipart.MultipartRequestEntity", &partArray, &jMethod.getParams());
         /* Add Multi-Part Request Entity to the Post Method */
         &jMethod.setRequestEntity(&mPartReqEntity);
         /* Add Multi-Part Message - End */
        
         /* Invoke PostMethod */
         Local integer &return = &jHttp.executeMethod(&jMethod);
         Local string &responseBody = &jMethod.getResponseBodyAsString();
        
         If (validate_reCAPTCHA_JSON(&responseBody)) Then
            /* reCaptcha success: allow user */
            SetAuthenticationResult( True, %SignonUserId, "", False);
         Else
            /* reCaptcha failure: deny */
            SetAuthenticationResult( False, %SignonUserId, "", False);
         End-If;
        
      catch Exception &ex
         /* Unknown Exception */
         SetAuthenticationResult( False, %SignonUserId, "", False);
      end-try;
   End-If;
End-Function;

 

Oracle SQL: REGEX_REPLACE Function

Recently, I participated in a forum discussion (Higher Education User Group) where someone asked if there is a way (and if so how) to strip out HTML elements from a long character field. This is mainly for scenarios where a long character field is used to store rich text enabled data (which contains HTML elements). And while querying the data from this field either using PS Query or SQL the requirement is to only retrieve the "plain text".

I found that we could use a delivered Oracle SQL function called REGEX_REPLACE to pattern match and replace contents of a string.

Here are some examples of how to use this function:

If we want to mainly get rid of HTML elements then we can use the following pattern:

select REGEXP_REPLACE(DESCRLONG, '<[^>]+>|\&(nbsp;)|\&(nbsp)|(amp;)', '',1,0, 'i'), DESCRLONG from PSMSGCATDEFN where descrlong like '%<%>%';

If we additionally want to get rid of contents inside script/style elements then we can use the following pattern:

select REGEXP_REPLACE(REGEXP_REPLACE(REGEXP_REPLACE(DESCRLONG, '<script[^>]*>.*</script>', '',1,0,'in'), '<style[^>]*>.*</style>', '',1,0,'in'),'<[^>]+>|\&(nbsp;)|\&(nbsp)|(amp;)', '',1,0,'i'), DESCRLONG from spsoft.PSMSGCATDEFN where descrlong like '%<%>%';

Note:
- You will need to improvise the regex pattern for those cases which are not trapped in the above sample SQLs.
- This function REGEX_REPLACE only works on Oracle databases.
- I have to admit that I am not a RegEx expert and received help from some very talented colleagues who helped me with the second (more complex) SQL.

Fluid - WYSIHTML5 Editor Prototype!

I recently answered a question on the OTN forums related to rich text editor in PeopleSoft. Since PeopleTools 8.50, PeopleSoft has leveraged using CKEditor for rich text editor (aka RTE) configurations options in App Designer. As a follow up to the OTN, I wrote a small post on how to create and use custom RTE configurations, toolbars and plugins.

CKEditor in PeopleTools provides a way to create and work with a WYSIWYG (What You See Is What You Get) rich text editor.

This has found its way to several use cases ranging from but not limited to:
-    Rich text configuration fields which are then used for rich text display in HTMLAREAs
-    Content source for rich text enabled emails
-    Content source for rich text enabled BI Publisher reports
-    Content source for Enterprise Components Forms Builder – Instructions
-    Content source for rich text enabled Student Activity Guide (Configurable) Pages such as Agreement Pages, Start and Complete Pages

While this is a great utility, it is a WYSIWYG editor which means that it might only be appropriate for Classic pages and might not be suitable for Fluid. I was curious to see how a rich text enabled field appears on a Fluid page and based on my tests it appears that Fluid does not support rich text enabled fields.

RTE Field on a Fluid Page:

Results: RTE toolbar does not appear in Fluid.

We can also confirm that rich text is not supported for Fluid in PeopleBooks.

Home > PeopleSoft > PeopleTools 8.54 > Fluid User Interface Developer’s Guide > Considerations for PeopleSoft Fluid Application Implementation

We can imagine how RTE powered by CKEditor (WYSIWYG) would introduce several challenges when it comes to incorporating the editor in Fluid. But why not WYSIHTML5 - What You See Is HTML5? :)

So that is how I got started on this little pet project!

I wanted to take the same concept and create a rich text editor that is also responsive (WYSIHTML5). I used an open source project (http://wysihtml.com/) to develop a prototype for a WYSIHTML5 Editor in PeopleSoft (Fluid) that enables Responsive Rich Text.

It is still a prototype so it has a few quirks to be worked around and it is also not a fully functional RTE yet. But I think it is a great start!

Step 1: Load Open Source Project to the Web Server

Based on instructions in the http://wysihtml.com/ I downloaded the open source project (zip file), extracted/unzipped the contents and placed it on the web server.

Path:

<PIA_HOME>/webserv/<DOMAIN>/applications/peoplesoft/PORTAL.war/<site_name>

Contents:

This completes the first step to make the necessary javascripts and stylesheets (amongst other things) available on the web server.

Now moving on to incorporating this in PeopleTools.

Step 2: Create Fluid Page with WYSIHTML5 Editor (Configuration)

Legend:

1. Static HTMLAREA (1) is used to store a javascript function and a button which when invoked transfers the WYSIHTML5 contents in HTMLAREA (4) to an invisible - modifiable by javascript - long edit field (2).

The "csk_div" ID used in var x = document.getElementByID("csk_div"); is referencing an input field (WYSIHTML5 editor) in HTMLAREA (4).

2. Invisible (Modifiable by Javascript) field to temporarily store/move (PreSave) the WYSIHTML5 contents from HTMLAREA (4) to the component buffer. This helps with sending the HTML5 contents to the server during the save (3). This is kind of a hack/temporary workaround and there should be a cleaner way to get this to work. It is a "to-do" item to make this more efficient.

 
3. Save button to push data (component buffer) in the page to the server.

4. HTMLAREA that holds the WYSIHTML5 contents with an input/editable field (and other associated wysihtml toolbar items, styling and scripts). HTMLAREA is populated using PageActivate PeopleCode using a HTML object (CSK_WYSIHTML5).

CSK_WYSIHTML5 HTML object was built primarily based on the HTML in this example page:
http://voog.github.io/wysihtml/examples/advanced.html

Few things to note about CSK_WYSIHTML5 HTML:

- An ID attribute ("csk_div") was added to a DIV that represents the input/editable element for the HTML5 editor. This is needed because it is used in the javascript function that is part of the Static HTMLAREA (1).
- The contents in the HTML5 editor field (csk_div) are passed in using a bind variable (via Page PeopleCode).
- The script sources were appropriately adjusted to refer to the directory on the web server (where the wysihtml project is located).

Step 3: Create Fluid Page for WYSIHTML5 Display (Viewer)

This is a very simple Fluid page with a single HTMLAREA that is loaded on PageActivate as shown above. During the load,  the HTML5 contents that was created and stored using the previous page (CSK_WYSIHTML5_CFG) is retrieved and used as a parameter to HTML object (CSK_WYSIHTML5_DISP). The HTML retrieved from CSK_WYSIHTML5_DISP is them assigned to the HTMLAREA field.

CSK_WYSIHTML5_DISP was also primarily built using the following page:
http://voog.github.io/wysihtml/examples/advanced.html

Only differences are:
- Toolbar was removed (as it is a display only page).
- Made the editor display only (non-editable).
- Added a bind value to place the HTML5 contents using PageActivate code.

Let us see this in action!! 

I created a custom Fluid Hompage (Sasank's WYSIHTML5) and added the two Fluid Pages as tiles.

Fluid Page with WYSIHTML5 Editor Prototype:

- Enter "Rich Text"/Responsive contents in the editor.
- Click on "PreSave (Load to Buffer)" button.
- Click on "Final Save" button.

Legend:
1. Push buttons to save responsive rich text data.
2. Responsive rich text toolbar.
3. Responsive rich text editor.

Quirks:
- Right now, the page just refreshes if we press ENTER/carriage return on the editor. ENTER/carriage return only works when the cursor is on text that does not contain any styling. This is also a "to-do" task.
- We must click the "PreSave (Load to Buffer)" button first before clicking the "Final Save" button, otherwise the changes made in the editor will not get transferred to the server as part of the component buffer.

Fluid Page with WYSIHTML5 Display Prototype:

We can see how the rich text displayed on this page in a HTMLAREA is responsive!

Demo Videos!!

WYSIHTML5 Responsive Rich Text Editor (click here to view video in a new tab):

WYSIHTML5 Responsive Rich Text Display (click here to view video in a new tab):

I just wanted to share this project with the PeopleSoft community! A lot of javascript hacking and app designer cheats (workarounds if you will) were required to get this prototype to function. I would love to work with anyone who would like to collaborate on improving this project and see where the results take us! Perhaps a truly integrated Responsive Rich Text Editor… Perhaps a futuristic Web Based Responsive Page Development Utility… Perhaps a case for productization and potential incorporation into the PeopleSoft solution!?!?!?

Project Details:

Disclaimer: I am sharing the project primarily to seek collaborators and others who might be interested in playing with or extending this prototype. If you choose to perform any of below steps then it is at your own risk! :)

Project Environment: HCM 9.2 PUM Image 9 - PeopleTools 8.54.08

1. Download the project by clicking here.
2. Unzip/extract the project and copy it to a testing/play environment (using 'Copy From File' option in App Designer).
3. Build project.
4. Explore! Test! Explore! Test!

Notes:

1. This project which contains the WYSIHTML5 editor prototype for PeopleSoft should be considered a proof of concept only. Please do not load this into your production environment. This was purely intended for experimentation and evaluation purposes.
2. I, the author, will not assume any liability for any problems resulting from the implementation of this project.
3. All objects in the project are custom and start with the prefix "CSK_".
4. A role (CSK_WYSIHTML5_TEST) in the project should give access to both the pages above.

Please feel free to comment on this post if you have any questions/concerns/suggestions.

Working with Rich Text Editor - Custom Configuration, Toolbars and Plugins

Rich Text Editors (RTE) are being used more commonly with the latest PeopleTools versions. There are several pages that contain Rich Text Editor fields (generally for configuration) which are then used for display on other transactional pages using HTMLAREAs, used as the content for Rich Text enabled emails or used as the content for Rich Text enabled BI Publisher reports (to name a few use cases).

Note: The Rich Text Editor provided by PeopleTools is powered by CKEditor.

Page With Rich Text Editor Enabled Field:

Here is an example of a simple page that contains a Rich Text Editor field. 

The page contains a Long EditBox (CSK_RTE_DATA.DESCRLONG) with the following properties.

We are currently using the default Rich Text Options (Note: Configuration Settings Id is blank). The page appears as follows with the Rich Text Editor for the DESCRLONG Long EditBox. The Rich Text Toolbar is generated based on the default configuration.

Page Displaying Rich Text Data:

Here is an example of a simple page that displays data stored in a Rich Text enabled field using a HTMLAREA.

Page Activate PeopleCode to display the Rich Text data field in the HTMLAREA:

The page display the Rich Text data in the HTMLAREA as follows:

Adding Custom Rich Text Options - Templates, Plugins:

I recently came across an interesting question on the OTN forums. The question was "how to use Rich Text to display an iframe with a link to a youtube video?". If you look at the above Rich Text Editor field that uses the default Toolbar, it does not have the ability to add any HTML tags or specifically IFRAME content.

To enable additional/custom Toolbar items on the Rich Text Editor, we must first create our own custom Rich Text Editor Configuration.

Creating a Custom RTE Configuration:

We need to create a new HTML definition with a name that starts with 'PT_RTE_CFG'. Let us create a custom HTML definition called PT_RTE_CFG_CSK cloned from PT_RTE_CFG_PTPPB (delivered RTE Configuration).

Now to enable a custom Toolbar item for embedding an IFRAME, we must make use of additional plugins. To find the list of all available plugins as delivered, we can look in the following directory on the web server:

<PIA_HOME>/webserv/<domainname>/applications/peoplesoft/PORTAL.war/<sitename>/ckeditor/plugins

Fortunately, in this case the IFRAME plugin for CKEditor is already available as delivered (if not we must download and place the required plugins in the above folder path).

Let us now add the custom IFRAME Toolbar to our Custom RTE Configuration (PT_RTE_CFG_CSK). Let us include the following additional line in the configuration (note the comma in the screenshot).

  { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] }

Moving ahead, let us reference this Custom RTE Configuration in the Page Field Properties of the Rich Text enabled field.

Now let us take a look at the page with the Rich Text enabled field.

We can see the additional/custom Toolbar that we added to our Custom RTE Configuration. This would help us with embedding an IFRAME element that links to a youtube video.

This results in an embedded IFRAME as follows:

Testing IFRAME on the Display Page:

Similarly, we can add additional custom Toolbars to our Custom RTE Configuration. Hope you find this useful!

Environment details at the time of writing this post:
HCM 9.2 PUM Image 12 (PeopleTools 8.54.08)

Reference:
PeopleBooks - Modifying the Rich Text User Interface