Hi,
I am writing an application that should display information related to the selected object in a dashboard.
Part of information comes from calling a VEM.
I did same thing in the old UIX starting from the template that comes with visual studio template. All worked okay: just need to do in shellui.js:
myTab.ShowDashboard("my-dashboard", { ObjectVersion: objectVersion });
myTab.Visible = true;
an in dashboard.js needs to register Started event
dashboard.Events.Register(MFiles.Event.Started, OnStarted);
function OnStarted() {}
In the new UIX if you do it in the same way it is working only when selecting the first object. For all next selection it doesn't work.
in main.js
async function ShowDashboard(tab, objectData, fileContent, shellFrame) {
const dashboard = await tab.ShowDashboard("MyDashboard", {
ObjectDetails: objectData,
FileContent: fileContent,
});
console.log("Dashboard instance:", dashboard);
await tab.SetVisible(true);
await tab.Select();
console.log("Dashboard updated successfully.");
// shellFrame.ShowMessage("Dashboard updated successfully.");
}
in dashboard.js:
function OnNewDashboard(dashboard) {
const customDataChangedEventHandle = dashboard.Events.Register(
MFiles.Event.Started,
() => {
if (dashboard.CustomData?.FileContent) {
creator.text = JSON.stringify(dashboard.CustomData?.FileContent);
console.log("Updated with new data:", creator.text);
} else {
console.warn("No FileContent provided in CustomDataChanged.");
}
}
);
}
Then, I tried to use UpdateCustomData from iDashboard. (the description of this method is: Refreshes React metadata card content. - is it working only with React? is it only refresh metadata card?)
So, my implementation according with the sample was this:
For main.js
async function ShowDashboard(tab, objectData, fileContent, shellFrame) {
const dashboard = await tab.ShowDashboard("MyDashboard", {});
console.log("Dashboard instance:", dashboard);
await dashboard.UpdateCustomData({
ObjectDetails: objectData,
FileContent: fileContent,
});
await tab.SetVisible(true);
await tab.Select();
console.log("Dashboard updated successfully.");
// shellFrame.ShowMessage("Dashboard updated successfully.");
}
For dashboard.js:
function OnNewDashboard(dashboard) {
eventHandle = dashboard.Events.Register(
MFiles.Event.CustomDataChanged,
(data) => {
console.log("Registered global event is: " + globalEventHandle);
console.log("CustomDataChanged triggered with data:", data);
if (data.FileContent) {
creator.text = JSON.stringify(data.FileContent);
console.log("Updated with new data:", creator.text);
} else {
console.warn("No FileContent provided in CustomDataChanged.");
}
}
);
}
Sadly, I had the same behaviour. The dashboard was updated only for the first selected object. For all the next object selection, even if I sent new data, it was not updated.
Looking into console I found an error after the first selection:
mfapp-bundle-app.31e0bc503e92bf17f5c9.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'left')
at mfapp-bundle-app.31e0bc503e92bf17f5c9.js:1:1171224
at mfapp-bundle-app.31e0bc503e92bf17f5c9.js:1:1171224
This means that I am doing something wrong in my call.
So, can anybody help to solve this? Has anybody experience in using this combination of selectionchanged show dashboard in the new UIX? I have many examples in the UIX v1 but here there is something that I do not understand.
Thanks for help.
Viorel
