Custom Action - Dashboard redirection

[nicovon24]

Hello, I'm encountering an issue where I need to conditionally redirect to a new dashboard state, but I can't use the "navigate to another dashboard" action and must resort to using CUSTOM ACTIONS. I've tried using window.location.href, but it's significantly slower compared to the "Navigate to other dashboard" action and doesn't allow me to select the State. I'm unsure if this is the only solution available.

For instance, I typically have different dashboards for each device profile. In my current scenario, the hierarchy map comprises various devices from different device profiles. I aim to redirect each device to its respective dashboard, located on different dashboards within my platform, based on the predefined use case.

This is the current code I have which is not complett

In addition to that, as you can see I have for example used openState, updateState, openDashboardStateInSeparateDialog and openDashboardStateInPopover which are in the same dashboard.

But to do this in other dashboards, there is a similar function or method to do it?

Could you help me with this?

Thanks!

[devaskim]

In general, you need widgetContext.router.navigateByUrl() to redirect to another dashboard. I implemented my custom action in the following way (part of code was copied from TB UI source code)

let isPlant = additionalParams.nodeCtx.data.Type === 'Plant';

let state = {
    entityName: entityName,
    entityId: entityId,
    entityLabel: entityLabel
}
if (isPlant) {
    const params = {
        entityId: entityId,
        entityName: entityName,
        entityLabel: entityLabel
    };
    
    widgetContext.actionsApi.openDashboardStateInSeparateDialog('plant_information', params, null, true, 50, 50);
    //Unfortunatelly popover for some unknown reason auto closes
    // if (widgetContext.isMobile) {
    //     widgetContext.actionsApi.openDashboardStateInPopover($event, 'plant_information', params, true, 'top', false, '100vmin', '100vmin');
    // } else {
    //     widgetContext.actionsApi.openDashboardStateInPopover($event, 'plant_information', params, true, 'top', true, '60vmin', '40vmin');
    // }
} else {
    let dashboardState = {
        params: state,
        id: 'selected_silo'
    }
    
    let encodedState = objToBase64URI([dashboardState]);
    let siloDashboardId = 'd590e380-51e0-11ed-86fe-9dcd4c516023';
    let url = `/dashboard/${siloDashboardId}?state=${encodedState}`;
    widgetContext.router.navigateByUrl(url);
}

function objToBase64URI(data) {
  return encodeURIComponent(objToBase64(data));
}

function objToBase64(data) {
  const json = JSON.stringify(data);
  return btoa(encodeURIComponent(json).replace(/%([0-9A-F]{2})/g,
    function toSolidBytes(match, p1) {
      return String.fromCharCode(Number('0x' + p1));
    }));
}

[nicovon24]

Hello @devaskim, thanks for your quick response! I will be using this code in the next days and test if it works, I will be writing here otherwise, see you!

[nicovon24]

@devaskim it's working correctly and redirecting fastly to the new dashboard.

The question I have remained is, how can I update the state from this new dashboard state, I want to redirect to the details section and I need the currentDevice data, I want to do this

stateParams.currentEntity = { entityId: entityId, entityName: entityName, entityLabel: entityLabel };

[devaskim]

You need to wrap entity id/name/label in currentEntity only if you use it as State entity parameter name in the target dashboard alias (see screenshot below). Otherwise set id/name/label directly to stateParams

[nicovon24]

Good afternoon @devaskim,

I apologize for any confusion in my previous message. I need the solution using the code you provided, specifically for a Custom Action. I need the state update in the new dashboard opened.

Best regards,

In general, you need widgetContext.router.navigateByUrl() to redirect to another dashboard. I implemented my custom action in the following way (part of code was copied from TB UI source code)

let isPlant = additionalParams.nodeCtx.data.Type === 'Plant';

let state = {
    entityName: entityName,
    entityId: entityId,
    entityLabel: entityLabel
}
if (isPlant) {
    const params = {
        entityId: entityId,
        entityName: entityName,
        entityLabel: entityLabel
    };
    
    widgetContext.actionsApi.openDashboardStateInSeparateDialog('plant_information', params, null, true, 50, 50);
    //Unfortunatelly popover for some unknown reason auto closes
    // if (widgetContext.isMobile) {
    //     widgetContext.actionsApi.openDashboardStateInPopover($event, 'plant_information', params, true, 'top', false, '100vmin', '100vmin');
    // } else {
    //     widgetContext.actionsApi.openDashboardStateInPopover($event, 'plant_information', params, true, 'top', true, '60vmin', '40vmin');
    // }
} else {
    let dashboardState = {
        params: state,
        id: 'selected_silo'
    }
    
    let encodedState = objToBase64URI([dashboardState]);
    let siloDashboardId = 'd590e380-51e0-11ed-86fe-9dcd4c516023';
    let url = `/dashboard/${siloDashboardId}?state=${encodedState}`;
    widgetContext.router.navigateByUrl(url);
}

function objToBase64URI(data) {
  return encodeURIComponent(objToBase64(data));
}

function objToBase64(data) {
  const json = JSON.stringify(data);
  return btoa(encodeURIComponent(json).replace(/%([0-9A-F]{2})/g,
    function toSolidBytes(match, p1) {
      return String.fromCharCode(Number('0x' + p1));
    }));
}

[devaskim]

Hi @nicovon24,
I have nothing to add. My code example includes example of state updates (look again at dashboardState )