# Dashboard State opened in the ThingsBoard dialog component

* Aim: Use custom JS script to open a dashboard state in ThingsBoard dialog component

* There exists two ways to reach the goal:
1. Use `openDashboardStateInSeparateDialog` method in actionsApi
2. Use `elementClick` method in actionsApi

<br/>

## Method 1 - openDashboardStateInSeparateDialog()
Custom widgets in ThingsBoard widgets library

<!-- in custom widget -->
<button class="btn" (click)="handleClick()">Open Dialog</button>

// in custom widget
self.onInit = function() {
    self.ctx.$scope.handleClick = handleClick;
}

function handleClick() {
    self.ctx.actionsApi.openDashboardStateInSeparateDialog(
    'state_id', {}, 'title', true, 50, 80);
}

The `openDashboardStateInSeparateDialog` method has six parameters, some of which are optional. However, if a parameter is an object, you have to provide an empty object instead of ignoring it.

openDashboardStateInSeparateDialog: (
    targetDashboardStateId: string, 
    params?: StateParams, 
    dialogTitle?: string,
    hideDashboardToolbar?: boolean, 
    dialogWidth?: number, 
    dialogHeight?: number
) => void;

<br/>

## Method 2 - elementClick()

Widget action setting:

* ==Id must match action name==: openAction1
* ==The rule of id name must be Camel-Case==

<!-- in custom widget -->
<mat-icon id="openAction1" 
          (click)="ctx.actionsApi.elementClick($event)">settings
<!-- Clicking button will trigger the above widget action --> 
</mat-icon>

If widget without the action source of `On HTML element click`, you can add by yourself:

// in custom widget
self.actionSources = function() {
    return {
        'elementClick': {
            name: 'widget-action.element-click',
            multiple: true
        }
    };
}

<br/>

## Reference

[Thingsboard - actionsAPI](https://thingsboard.io/docs/user-guide/contribution/widgets-development/#actions-api)
[WidgetActionsApi](https://github.com/thingsboard/thingsboard/blob/v3.6.2/ui-ngx/src/app/core/api/widget-api.models.ts#L86)
[Call custom action by clicking on mat-icon in custom widget #6621](https://github.com/thingsboard/thingsboard/issues/6621)