Lightning Model: Generic Model Component

Model is a very useful component. Modals display a dialog in the foreground of the app, interrupting a user’s workflow and drawing attention to the message. A modal blocks everything else on the page until it’s dismissed. A modal must be acknowledged before a user regains control over the app again. Today We will create a generic model component, using which we can display custom messages, take user inputs or show other components in model as well.

For this we will use the lightning:overlayLibrary. Which is a Salesforce standard component and also support mobile app.

We will create a generic component from which we will initialise the model.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="titleMessage" type="String" default="Information" />
    <aura:attribute name="bodyMessage" type="String" default="We have created a generic model component!!" />
    <aura:attribute name="footerButtonDisplay" type="boolean" default="false" />
    <aura:attribute name="bodyComponent" type="String" default="c:LightningModelComp" />
    <aura:attribute name="FooterComponent" type="String" default="c:LightningModelFooterComp" />
    <div class="slds-form-element">
		<div class="slds-form-element__control">
            <lightning:overlayLibrary aura:id="overlayLib"/>
            <lightning:button name="modal" label="Show Modal" onclick="{!c.handleShowModal}"/>
        </div>
    </div>
</aura:component>

Then in the controller

({
    handleShowModal : function (component, event, helper) {
        var modalBody;
        var modalFooter;
        $A.createComponents([
            [component.get("v.bodyComponent"),{messageBody : component.get("v.bodyMessage"),}],
            [component.get("v.FooterComponent"),{}]
        ],
                            function(components, status){
                                if (status === "SUCCESS") {
                                    modalBody = components[0];
                                    modalFooter = components[1];
                                    component.find('overlayLib').showCustomModal({
                                        header: component.get("v.titleMessage"),
                                        body: modalBody, 
                                        footer: modalFooter,
                                        showCloseButton: true,
                                        cssClass: "my-modal",
                                        closeCallback: function() {
                                            alert('You closed the alert!');
                                        }
                                    })
                                }
                            }
                           );
    },
    
})

As we have given dynamic component name, So using the $A.createComponents tag we can our existing components as well. We can pass our custom message to show in model. We can also display all error message using this.

Lightning Model

You can check my github-repo for complete code. 

Did you like this or want to improve this, let me know in comments section. Happy programming 🙂

Advertisements

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.