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.
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:
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.
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.
Comments
shri
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?
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)
submitAction_win0(document.win0,’$ICField6$hviewall$0’);
Colton Fischer
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
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.
Pratiksha
Hi Colton, Thank you for sharing this valuable information. I am running in to this exact same issue. I tried to open the HTML object in App Designer, copied the script content and tried to create an HTML object thru PIA. I still get the line breaks. Is it because i copied the javascript from app designer HTML ? Is it possible to copy it from database table without getting the line breaks ? Your help is very much appreciated. Thank you
Colton
Hi Pratiksha. If the HTML Object was originally created or ever saved in App Designer, then the line breaks are most likely stored in the DB. Your best bet is to recreate the HTML Object in the PIA and copy the JavaScript from the original source. This assumes the original source is not App Designer.
If App Designer is only way you have to obtain the JavaScript, then you will have to manually remove the line breaks and then save it in the PIA. I had to do this before and it is tedious process.
Pratiksha
Thank you for taking time to respond to my question. App Designer was my only way to obtain the JavaScript. Since the script was way too long to manually remove the line breaks, I kept looking for another way of doing that. After experimenting for hours, i am glad to share that i found a way. These script content was saved in PSCONTENT table as HUGEBLOB. My script was saved in multiple rows of the table. Using TOAD, i was able to export out the HUGEBLOB field CONTDATA in to a text file. I updated the text file with my changes and again using TOAD, i was able to upload this to database. Doing this didn’t insert line breaks.
Murugan
Colton, Shri,
Thanks for sharing the tip. I wanted to get your thoughts on injecting JavaScript objects into a component. I am working on a customization, on the Supplier search page Supplier Id field value should be padded with zeros at prefix when we enter a value and tab out. for example, Supplier ID: 123 should be changed to 0000000123. Could you please advise the right place to inject Javascript to achieve this functionality.
I tried Event mapping framework to inject JavaScript and it works perfectly. Can you share more information about this topic and advise the tips to achieve above functionality.
Leave a comment
Your email address will not be published. Required fields are marked *