Getting around undefined (reading 'innerHTML') Error PI Vision 2022

I tried creating an extensible where users can export tables to excel from any PI Vision display at the click of a button. However it would seem that I run into the following error with innerHTML once I click the "Export2Save" button in the PI Vision display:

 

TypeError: Cannot read properties of undefined (reading 'innerHTML')

 

It worked prior to PI Vision 2022 Patch 1, and have tried searching high and low to determine if perhaps something changed in the way I am to read the HTML to extract the tables in it for export to .csv. Is anyone else running into this issue and/or know how to get around this?

 

I do notice that symbol header now appear with title = " ", but don't really know if this has anything to with the error

window.PIVisualization = window.PIVisualization || {};
(function (PV) {
	'use strict';
	
	function symbolVis() { }
	PV.deriveVisualizationFromBase(symbolVis);
	
	symbolVis.prototype.init = function (scope, elem, displayProvider){
		var originalDisplayProvider = displayProvider['selectSymbol'];
		
		function allowClick(){	
			if(scope.config.Enabled){
				displayProvider['selectSymbol'] = originalDisplayProvider;
			}
			else{
				displayProvider['selectSymbol'] = function(){};
			}				 		
		}
		
		setTimeout(function() { 
			allowClick();
		}, 1000);
		
		scope.exportToScv = function() {
            var eto = document.getElementsByTagName("title")[0].innerHTML.split(" - ")[1].replace(/\s/g, ""), cto = (new Date).toLocaleString("en-US", {
                hour12: !1
            }).replace(/\s/g, "T").replace(/\//g, "").replace(/:/g, ""), uto, fto, rto, oto, tto, nto, ito, hto;
            for (eto = "Failed" + eto + ".csv",
            uto = "",
            fto = document.getElementsByTagName("th"),
            rto = 0; rto < fto.length; rto++)
                oto = fto[rto].getElementsByClassName("k-link")[0],
                uto += rto === fto.length - 1 ? oto.innerHTML.split("<")[0] + "\r\n" : oto.innerHTML.split("<")[0] + ",";
            for (tto = document.getElementsByTagName("tr"),
            nto = 0; nto < t.length; nto++)
                if ((tto[nto].getAttribute("role") == "row").valueOf() && (tto[nto].parentNode.tagName == "TBODY").valueOf())
                    for (ito = 0; ito < t[nto].childNodes.length; ito++)
                        uto += ito === 0 ? tto[nto].childNodes[ito].childNodes[0].innerHTML + "," : ito === tto[nto].childNodes.length - 1 ? tto[nto].childNodes[ito].innerHTML + "\r\n" : ito === tto[nto].childNodes.length - 2 ? tto[nto].childNodes[ito].innerHTML.replace("&gt;", ">") + "," : tto[nto].childNodes[ito].innerHTML + ",";
            const sto = new Blob([uto],{
                type: "text/csv"
            });
            window.navigator && window.navigator.msSaveOrOpenBlob ? window.navigator.msSaveOrOpenBlob(sto, eto) : (hto = URL.createObjectURL(sto),
            window.open(hto))
        }
    }
    ;
    var def = {
		typeName: 'converttocsv',
		datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single,
		visObjectType: symbolVis,
		//iconUrl: 'Scripts/app/editor/symbols/ext/Icons/toggleswitch.png',
		inject: ['displayProvider'],
		getDefaultConfig: function(){
			return{
				DataShape: 'Value',			
				Enabled: true,		
				Height: 70,
				Width: 70,
				BackgroundColor: 'rgb(0,0,0)',
				TextColor: 'rgb(0,255,0)',
			};
		}
	};
	
	PV.symbolCatalog.register(def);
})(window.PIVisualization);

Sample symbol table header

<symbol-host-div symbol="sym" runtime-data="::dispCtrl.getRuntimeSymbolData(sym.Name)" style="cursor: move;"><div class="symbol-mouse-drop symbol-host editor-symbol-host multiple ui-droppable" id="Symbol0" title="" style="position: absolute ... and so on.. and so on...

 

 

 

  • Without having the full HTML template and knowing which one of the innerHTML calls is throwing the error, it's hard to give you an exact answer. However, PI Vision injects your HTML inline to the displays. So there should be no changes from PI Vision that would cause an HTML lookup to fail, because what you're using is vanilla JavaScript against your own HTML.

     

    You'll want to review the HTML markup and debug the variable that is being set to an undefined value where you are using the innerHTML. Your element lookup is failing, so that prevents using innerHTML, since you do not have a reference to an element.