JS Inject Question - JS code works in Chrome console but fails in UiPath JS Inject activity

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;

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 ?

1 Like

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();

Reference: Inject JS in an Angular webpage - #2 by vvaidya

OH !! This looks promising … Thank you !! I’ll give it a try and report back.

1 Like

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:

  1. 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.
  2. I don’t understand show arguments from UiPath would work with this.
  3. 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.
  4. 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;

The aweful-but-working hack is this:

  1. The JS above is stored in a “txt” file.
  2. Read the above JS into a string in UiPath workflow.
  3. Do a string.replace(“DATETOREPLACE”,dateToUseInJSCode).
  4. 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.

Godamn bro!!! You rock!!! Great solution!!!

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.