Managing Large HTML Objects

I wanted to share a quick tip on managing third-party JavaScript libraries in HTML objects in PeopleTools.  The tip is to manage these HTML objects in the Branding Framework in the PIA rather than using App Designer.  I have found that App Designer does not play well with handling large JavaScript libraries as it tends to add newlines in the code after line lengths reach a certain point.  Minified JavaScript libraries are notorious for having extremely long line lengths and this is an issue for App Designer.

For example, let’s say you wanted to store and serve the minified jQuery v3.3.1 JavaScript library from a custom HTML object.  You would copy and paste the JavaScript code into a new HTML object definition in App Designer and save the new definition.

Save App Designer

At this point you could locally serve the jQuery library by using %Response.GetJavaScriptURL(). This is when you will be greeted with an error similar to the following:

Unexpected Token

The error “Uncaught SyntaxError: Invalid or unexpected token” is a result from a line of code in the JavaScript unexpectedly ending.  This is due to the way that App Designer saved the HTML object.

If you want to successfully serve large JavaScript libraries from PeopleTools HTML objects, then you will need to use the Branding Framework in the PIA (Main Menu > PeopleTools > Portal > Branding > Branding Objects) to create the new HTML object to house the JavaScript code.

Save Branding Framework

I have found that the Branding Framework does not add newlines for long line lengths like App Designer does.

It is also very important to note that you should use the Branding Framework to edit these large HTML objects and not just for creating them.  If you edit a large HTML object (created with the Branding Framework) in App Designer, the object will get corrupted when you save it.  This will result in the “Unexpected Token” error and you will have to recreate the HTML object in the Branding Framework.

This does not happen with every large JavaScript library, but rather only the ones that have long line lengths.  However, I have been bit by this App Designer shortcoming so many times that I have gotten into the habit of always using the Branding Framework to manage large HTML objects to avoid potential headaches with using App Designer.

3 thoughts on “Managing Large HTML Objects

  1. shri says:

    Colton, thanks for the tip. Also wanted to get you thoughts on injecting JavaScript objects into a component. I have bits of JavaScript functions that I want to call on component. I have tried to call JavaScript on PostBuild/Page Activate and it is hit/miss most of the time. I tried Event mapping framework to inject JavaScript and it works perfectly. Also, I was super excited to see App designer enabling us to embed stylesheets/JavaScript objects through component properties. But I don’t think it is fully functional yet.

    Another customization I was working on is to insert a new DOM element into body, display it as a popup hyperlink. and the popup page will display HTML message from message catalogue, which I am passing as parameter to popup function. I tried passing the passing the parameter as below where &myHTML holds the formatted static HTML text, but I couldn’t pass the variables successfully. If I passed a simple string, it went through. Any thoughts on this?

    AddOnLoadScript(“MyPopup(‘” | &myHTML | “‘);”);

    On a sidenote, please give us tidbits on how to invoke JavaScript functions used by PeopleSoft. For example, I use below to invoke View All on Page scroll to display all rows. Do you have any tips/suggestions calling such delivered functions rather than using a HTML object hard coded onto a page?(PS: I just started learning JavaScript)


    • Colton Fischer says:

      Thoughts on Component JavaScript Injection:

      I have had good/consistent experiences in 8.56 with using the AddJavaScript PeopleCode function to inject JS into Components. However, this function is only designed to work on Fluid Components. For Classic Component JS injection, I have had good experiences using a utility built by Jim Marion that leverages the Component Branding Framework in the PIA to configure the scripts that you want injected on Components. He did a workshop on the workings of this utility at Alliance 2017. I have also had success with JS injection using a framework built by Sasank Vemana. He has the source code and great documentation of the framework on his blog.

      Thoughts on AddOnLoadScript issue:

      I have not personally tried using the PeopleCode AddOnLoadScript function, but I am not sure why it doesn’t work when you attempt to pass a variable string into it. If I understand correctly, you are storing some static HTML in a Message Catalog entry, fetching the Message Catalog text in the PeopleCode with MsgGetExplainText, and then binding the text to the AddOnLoadScript function. You could maybe try using the %ExplainMessage Meta HTML function to bind the text to avoid binding in a variable. However, I am not confident that the page will be able to resolve the Meta HTML at runtime. This really seems like it could be a bug and I would suggest opening a case with My Oracle Support.

      Thoughts on Invoking PS JS Functions:

      Unfortunately, I don’t really have any useful pointers for this. I have read about the %formname Meta HTML that can help with resolving the dynamic form name (win0, win1, etc.) to make it so you don’t have to hardcode form names in your JS. Sasank has an interesting post on this topic that may be of help. In the post he uses an HTML area to hold the custom JS, but it is possible that you can inject the JS with the techniques mentioned above to avoid having to use an HTML area.

      Hope this helps.

      • shri says:

        Thanks for taking time to answer my questions.

        Thanks for pointing out that AddJavaScript works on fluid pages. I will look at the posts you referred for Classic Components.

        Using Meta HTML was neat. Although, it looks like there is restriction on amount of text returned by %ExplainMessage.

Leave a Reply

Your email address will not be published.