I’m VERY new to JS Inject (and JS code in general) but have made a bit of success in some areas.
One area I just hit a wall on for is I have some JS code developed by a co-worker that when used within the Chrome DevTools Console it works great. But when using JS Inject for the same script within a workflow it fails.
My problem child code line is below:
function OLCSSelectAdUnitsCheckboxByDate(elementFromUiPath,arg1) {
//ORIGINAL top line from Sashi - var selectUnplacedAdUnitsToDrop = function (filterDate) {
// NOTE: UiPath JS Inject gives a SINGLE input argument for using Javascript Inject.
// As such, if multiple values are required, JS would need to take arg1 and split
// it on some separation character to get the other values.
//
// Inputs:
// elementFromUiPath = this is apparently required but you do not pass anything within UiPath for this.
// Specifically calling it this name as code below is also using 'element' in logic.
// arg1 = date string in "mm/dd/yyyy" format
var filterDate = arg1;
var grid = angular.element('.slickGridDimensionsWithFilter').scope().d.gridOptions.grid;
<snip>
The problem line is that very last line with “var grid”. As stated when using this code in Chrome console it works great. When running it in UiPath, I get this for that “var grid” line:
Inject JS to the child of the unplacedAdUnitsViewerView.grid element: ReferenceError: angular is not defined
This is a hard boundary of my understanding of using JS Inject and how to get past this. I tried importing angular but that failed as I’m doing it outside of a module - whatever that means.
Any thoughts / comments on how to get past this using JS Inject and being able to reference angular objects ?
Hey @riverrat437! You can’t use angular if it hasn’t been loaded before. I’m not very knowledgeable on this subject but you should do something like this:
function AngularinUiPath() {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = "//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js";
script.onload = function() {
var scope = angular.element(document.getElementById('GlobalsCtrl')).scope();
};
head.appendChild(script);
}
Amazingly with the help of a work associate and a great deal of brute force awful hacking I got something working … omg this is a hack.
When I read and tried what is offered there for “AngularinUiPath()” it became apparent it was likely not going to work with Chrome. Sure enough it didn’t. Doing a little googling around I found this:
Within the stackoverflow forum post is a block of recommended code which I have screen scrapped below:
The red-strike through text actually works in the Chrome DevTools console but it causes an error when attempted with UiPath. The highlighted yellow text I replaced with my JS code that works in the Chrome console.
What I found is:
I can’t separate the two functions into the two separate JS Injects. Well, it might … I didn’t continue going down multiple attempts at make more than one JS Inject work.
I don’t understand show arguments from UiPath would work with this.
I don’t understand how a return/output from the embedded JS within the fireAfterLoad() function would be returned into UiPath - if there is a requirement for this that is. In my case there is no return needed.
The embedded JS code within the fireAfterLoad (and called within the addJS_Node function reference) has to be minimized using a JS minimizer - at least I had too many failed attempts at trying to make “pretty JS” work. Minimized code just worked once I figured all this other stuff out.
This my Frankenstein code that UiPath uses:
function fireAfterLoad() {
addJS_Node("function OLCSSelectAdUnitsCheckboxByDate(elementFromUiPath,arg1){JS that works in Chrome console;};OLCSSelectAdUnitsCheckboxByDate('','DATETOREPLACE');");
};
function addJS_Node(text, s_URL, funcToRun, runOnLoad) {
var D = document;
var scriptNode = D.createElement('script');
if (runOnLoad) {
scriptNode.addEventListener("load", runOnLoad, false);
}
scriptNode.type = "text/javascript";
if (text)
scriptNode.textContent = text;
if (s_URL)
scriptNode.src = s_URL;
if (funcToRun)
scriptNode.textContent = '(' + funcToRun.toString() + ')()';
var targ = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
targ.appendChild(scriptNode);
};
The aweful-but-working hack is this:
The JS above is stored in a “txt” file.
Read the above JS into a string in UiPath workflow.
Do a string.replace(“DATETOREPLACE”,dateToUseInJSCode).
Use the resulting string variable value in a single JS Inject activity … and poof … my JS code did what I needed to hitting the argular objects fine with no “angular” errors.
