Spread the love

Here we go with another simple UI component, made up with the new Lightning Design System.

Here you go a simple Modal dialog box.

For those of the TL;DR tribem here is the GitHub repository.

The component is ment to be placed in your app in this way:

<c:ModalDialog type="{!v.dialogType}" 
                   title="{!v.dialogTitle}" 
                   content="{!v.dialogContent}" 
                   showDialog="{!v.showDialog}"
                   context="{!v.dialogContext}"
                   inputValue="{!v.dialogInputValue}"
                   inputPlaceholder="{!v.dialogInputPlaceholder}"
                   onClose="{!c.dialogCallback}" />

And to be waken up by a boolean variable (in this case by v.showDialog).

When you switch this variabile to true/false the modal behaves as expected (shows up or closes).

This kind of architecture allow for a single callback after the modal closes, so you need a way to know what to do after this close event.

That is to say that you need to be aware of the context that triggered the modal.

The context parameter is a Javascript object that can contain wathever you want (I used an “action” string for instance, but you can put wathever variables you want) and is passed through to the onClose callback, here is an example:

{
    //ModalDialogTestAppController.js
    //. . .
    showAlert: function(component, event, helper) {
        $A.run(function(){
            helper.showDialog(component, 
                              'ALERT', //dialog type
                              'THIS IS AN ALERT!', //modal title
                              'Hello world!', //modal content
                              null, //input default string (only for "INPUT" type)
                              null, //input placeholder (only for "INPUT" type)
                              {
                                  action: helper.C.ACTIONS.SHOW_ALERT,
                                  anotherValue: Date.now(),
                              }, //context object
                              true); //show the dialog
        });
    },

The component supports the following parameters:

  • type:this is the type of dialog you want to open. Supports: ALERT, CONFIRM, INPUT, LOADER
  • title: title of the modal dialog
  • content: content text of the modal dialog
  • showDialog: boolean value that indicates if the modal is shown/hidden
  • context: Javascript object containing the context you want to be passed back to the callback invocation
  • inputValue: default value of the input field (only for INPUT type)
  • inputPlaceholder: placeholder for the input field (only for INPUT type)
  • onClose: callback called after the ModalDialogCloseEvt event is fired by the modal dialog component

The onClose callback is fired upon the ModalDialogCloseEvt event that supports the following parameters:

  • dialogType: the type of the calling dialog
  • confirmResult: true if the user pressed YES/OK buttons (always false for ALERT, LOADER)
  • inputResult: input written by the user (set only if type is INPUT and user pressed the OK button)
  • context: context sent to the component

These are the different kinds of dialogs:

ALERT

CONFIRM

INPUT

LOADER

And here it is the test app in action: