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(">", ">") + "," : 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...