ThingsBoard: How to open dialog on click

Question

I'm trying to simplify a function in Thingsboard. I want to open a dialog when user clicks on a row of an Entity List (in or outside a dashboard). I've seen that you can use Angular's $mdDialog to do this. But I'm completely foreign to Angular and have no clue how to apply it.

I found this example code on github:

$mdDialog.show(
  $mdDialog.alert()
    .parent(angular.element(angular.element(self.ctx.$container))
    .clickOutsideToClose(true)
    .title('This is an alert title')
    .textContent('You can specify some description text in here.')
    .ariaLabel('Alert Dialog Demo')
    .ok('Got it!')
    .targetEvent(evt)
);

So I used this code in a custom action but it won't do anything. How can I use $mdDialog to create a new Popup Window in Thingsboard?

Answer 1

After reading a lot on AngularJS, and understanding the widget context, I learned that you need to extract each service from AngularJS into the widget context. The way to do it for this particular case is:

$mdDialog = widgetContext.$scope.$injector.get('$mdDialog')

And now the $mdDialog can be used as normal.

[EDIT] On Thingsboard v3+ they switched to an Angular 9/10 Wrapper for the UI. To achieve dialogs you can use:

widgetContext.customDialog.customDialog(htmlTemplate, controller).subscribe()
widgetContext.dialogs.alert(title, body, ok_message).subscribe()

The UI has several examples when adding a 'Custom Action with HTML' which can help you figure you out how to use them, and the UI for the editor provides helpful autocomplete and docu.