Understanding Modals/Dialog Windows in Web Pages

-

Modals, also known as modal windows or lightboxes, are essential components in web design that create a focused experience for users. A modal window disables the main window while keeping it visible, acting as a child window in front of it. This approach allows users to complete specific tasks without needing to display all the information on the main screen. While these messages aren't strictly locked, users can click outside the modal to dismiss it.

Let's Code Together!

In this section, we will create a simple generic modal component using Lightning Web Components (LWC).

1. HTML Template: genericModal.html

<template>
    <template if:true={showModal}>
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
            aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <lightning-button-icon class="slds-modal__close" title="Close" icon-name="utility:close"
                        icon-class="slds-button_icon-inverse" onclick={handleClose}>
                    </lightning-button-icon>
                    <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">{header}</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <p>{content}</p>
                </div>
                <footer class="slds-modal__footer slds-modal__footer_directional">
                    <lightning-button label="Close" title="Non-primary action" onclick={handleClose}
                        class="slds-button"></lightning-button>
                    <lightning-button variant="brand" label="Save" title="Primary action" class="slds-button">
                    </lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

2. JavaScript Controller: genericModal.js

javascript
import { LightningElement, api } from 'lwc';

export default class GenericModal extends LightningElement {
    showModal = false;
    
    @api header;   
    @api content;

    @api show() {
        this.showModal = true;
    }
    
    @api hide() {
        this.showModal = false;
    }

    handleClose() {
        const isClose = new CustomEvent('isClose');
        this.dispatchEvent(isClose);
        this.hide();
    }       
}

3. Using the Generic Modal: genericModalUseCase.html

To utilize the generic modal component, we need to create a new component as shown below:

<template>
    <lightning-card title="Generic Modal Use Case" icon-name="custom:custom33">
        <div class="slds-var-m-around_medium">
            <lightning-input label="Enter Header Details" type="text" value={header} class="header-jest"
                onchange={handleHeaderChange}></lightning-input>
            <br />
            <lightning-button label="Show Modal" onclick={handleOpenModal}></lightning-button>
            <c-genericModal header={header} content={content}>
                <div slot="footer">
                   <lightning-button label="Close" variant="neutral" onclick={handleClose}></lightning-button>
                </div>
            </c-genericModal>
        </div>
    </lightning-card>
</template>

4. JavaScript Controller for Use Case: genericModalUseCase.js


import { LightningElement } from 'lwc';

export default class GenericModalUseCase extends LightningElement {
    content = 'Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id 
               consequat veniam incididunt duis in sint irure nisi';
    header = 'Generic Modal';

    handleHeaderChange(event) {
        this.header = event.target.value;
    }   
    
    handleOpenModal() {
        const modal = this.template.querySelector('c-generic-modal');
        modal.show();
    }

    handleClose() {
        const modal = this.template.querySelector('c-generic-modal');
        modal.hide();
    }    
}

Conclusion

Modals provide a streamlined way for users to interact with specific information without navigating away from the current page. By following this coding example, you can create a reusable generic modal component that enhances user experience in your Lightning web applications. Happy coding!

Comments

Post a Comment

Popular posts from this blog

Best Practices for Creating Salesforce Roll-Up Summary Triggers

-
Understanding the Use of Roll-Up Summary Fields in Salesforce Roll-up summary fields are a powerful feature in Salesforce that allow you to automatically display calculated values on a master record based on the related detail records. These detail records must be linked directly to the master record through a master-detail relationship. With roll-up summary fields, you can perform various calculations, such as totals, counts, and averages, making it easier to track important metrics related to your data. Why Use Roll-Up Summary Fields? Roll-up summary fields provide several benefits: Automated Calculations: They automatically update whenever related detail records are created, updated, or deleted, ensuring your master record reflects the most current data. Data Integrity: By consolidating information from related records, roll-up summary fields help maintain data integrity and accuracy within your Salesforce org. Improved Reporting: They enhance your reporting capabilities by summa...
Read more

CREATE WEB-FORM USING LIGHTNING WEB COMPONENTS SALESFORCE

-
Image
What is a Web Form? A web form (also called an HTML form) allows users to input data that is sent to a server for processing. These forms are commonly used for various tasks, such as submitting shipping or credit card information for orders, or querying search engines. They can include elements like checkboxes, radio buttons, or text fields, resembling paper or database forms. Example of a Web Form In this example, we will create a web form using  Lightning Web Components (LWC)  in Salesforce to submit data to an object. Step 1: Your HTML Page ( webform.html ) This HTML page contains the structure of the form. We will use the  lightning-record-form  component to automatically generate a form based on the fields of an object. html < template > < lightning-messages > </ lightning-messages > < lightning-record-form object-api-name = {accountObject} fields = {myFields} onsuccess = {handleAccountCreated} > </ li...
Read more

Utilizing a Generic Pagination Class in Lightning Web Components - Part 1

-
Image
Understanding Pagination: Purpose and Implementation What is the Purpose of Pagination? Pagination, also known as paging, is a crucial technique used in web applications to enhance user experience. It involves dividing the content of a website or document into discrete pages. This process is essential for efficiently managing large sets of data, as it allows for the display of information across multiple pages within a single web interface. Pagination serves several key purposes: Improved Navigation: Users can easily navigate through content without being overwhelmed by a single long list. Enhanced Performance: By loading only a subset of data at a time, pagination helps to improve load times and overall performance. Better User Experience: With clear page navigation, users can find and access the information they need quickly and efficiently. Pagination can be implemented either client-side or server-side, depending on the specific needs of the application. Let's Code Together!...
Read more