How do I add a confirmation dialog to my bezl?

Adding confirmation dialogs as modals can save you some programming time of having to create a single purpose page for something like that. You can use the bzl-modal to add a modal into a bezl easily, and bind to the results.

I’m going to start by creating a variable for our modal config. You can still do this in-line, but the modal has more config options than some of the other widgets so this will make your html a bit cleaner. I named my variable dialogConfig and set the value to this:

{
"version": 1,
"header": "Hello Medium",
"body": "<h3>Are you ready for <i>Modals</i></h3>",
"width": "250px",
"height": "250px",
"okText": "Yup",
"cancelText": "Nope"
}

Version for right now is version 1. All of our widgets are version tagged to allow for forward compatibility. Next is the header text followed by the body. Now the body accepts HTML, but not Angular bound HTML (it’s setting the innerHTML property so it needs to be sanitized). Next we can set the width and height of the modal. Finally we can set the okText and the cancelText, the default is ‘Ok’ and ‘Cancel’ but you can make it say whatever.

Now I also created a visible variable to control our modal visibility. I set the initial value as false so we can update that to true when we want our modal to display. Now for the actual markup:

<bzl-dialog 
           [config]="bezl.vars['dialogConfig']" 
           [visible]="bezl.vars['visible']" 
           (visibleChange)="bezl.vars['visible'] = $event.detail" 
           (ok)="bezl.functions['okCalled']()" 
           (cancel)="bezl.functions['cancelCalled']()">
</bzl-dialog>

So we are creating a bzl-dialog, setting our config to the config variable we just created. This input [visible] controls when the modal displays. So when we set bezl.vars[‘visible’] to true, the modal will display.

The output (visibleChange) allows the dialog to update your variable when ok or cancel is clicked automatically. The output (ok) is called when the ok (or whatever you call it) button is pressed, so we are calling a function we created called okCalled when the ok button is pressed. Similarly the (cancel) output calls a function we created called cancelCalled.