เพิ่ม Popup Overlay Modal ใน Lightning Web Component

อัปเดตล่าสุดเมื่อ 25 ธันวาคม 2022 โดย Rakesh Gupta

แนวคิดใหญ่หรือคำถามที่ยืนยง:

• คุณจะใช้องค์ประกอบเว็บฟ้าผ่าเพื่อแสดงหน้าต่างโมดอลได้อย่างไร

วัตถุประสงค์:

หลังจากอ่านบล็อกนี้แล้ว คุณจะสามารถ:

• ทำความเข้าใจความแตกต่างระหว่างการแจ้งเตือนและโมดอล
• แสดงโมดอลด้วยการซ้อนทับเมื่อคลิกปุ่ม
• แสดงส่วนประกอบเว็บฟ้าผ่าอื่นภายในโมดอล
• ซ่อน modal เมื่อปิดโดยผู้ใช้
• และอีกมากมาย

ที่ผ่านมา ผมได้เขียนบทความเกี่ยวกับ ส่วนประกอบเว็บสายฟ้า. ทำไมไม่ลองดูในขณะที่คุณอยู่ที่นี่ล่ะ!

1. เพิ่มกล่องโต้ตอบการยืนยัน การแจ้งเตือน และพร้อมท์ไปยัง Lightning Web Component
2. การใช้ Lightning Web Component เพื่อแสดงแบนเนอร์แจ้งเตือน

เจเนล พาร์ริช กำลังทำงานเป็น Junior Developer ที่ Gurukul on Cloud (GoC) Janel ได้รับมอบหมายให้ออกแบบส่วนประกอบเว็บสายฟ้าที่มีปุ่มพร้อมตัวเลือกในการเปิดแบบฟอร์มต่อไปนี้:

1. ส่งโอกาสในการขาย
2. ส่งการเปลี่ยนแปลงที่อยู่
3. เริ่มต้น KYC

LightningModal คืออะไร?

โมดอลคือหน้าต่างที่แสดงเหนือแอปพลิเคชันที่มีอยู่และปิดใช้งานฟังก์ชันของเนื้อหาที่เหลือ โมดอลมักจะใช้เพื่อดึงความสนใจของผู้ใช้ให้ดำเนินการหรือดูข้อความจากแอปพลิเคชัน

ความแตกต่างระหว่าง Alert และ Modal คืออะไร?

หนึ่ง เตือน เป็นหน้าต่างขนาดเล็กที่โดยทั่วไปจะป้องกันไม่ให้ผู้ใช้ดำเนินการใดๆ บนหน้าจนกว่าพวกเขาจะปิดหน้านั้น

ก ฟ้าแลบModal คอมโพเนนต์วางซ้อนโมดอลข้อความที่ด้านบนของหน้าต่างแอปปัจจุบัน โมดอลขัดจังหวะเวิร์กโฟลว์ของผู้ใช้และดึงความสนใจไปที่ข้อความ ความแตกต่างก็คือ โมดอล ต้องการการโต้ตอบโดยตรงที่จะถูกปิด โมดอล เป็นวิธีที่ดีที่สุดในการแทรกข้อความหรือส่วนประกอบเว็บฟ้าผ่าลงในแอปพลิเคชัน

สมมติว่าคุณมีปุ่มที่มีข้อความเรียกร้องให้ดำเนินการ เริ่มต้น KYCและเมื่อคุณคลิกที่คอนเทนเนอร์ (LWC) จะแสดงรายการกิจกรรมที่ต้องเรียกใช้งาน ช่วยให้คุณทำงานได้มากขึ้นโดยไม่ต้องแสดงงานทั้งหมดล่วงหน้า

ซึ่งแตกต่างจากคอมโพเนนต์อื่นๆ คอมโพเนนต์ LightningModal ไม่ได้ใช้ไฟล์ lightning-modal แท็กหรือขยาย LightningElement. ไม่มีโมดอลสายฟ้า ส่วนประกอบ. แต่คุณสร้างโมดอลโดยขยาย LightningModal และใช้ส่วนประกอบ Lightning-Modal-* ตัวช่วยนี้เพื่อจัดเตรียมส่วนหัว ส่วนท้าย และเนื้อหาของโมดอล

• ฟ้าผ่าโมดอลร่างกาย
• สายฟ้าโมดอลส่วนหัว
• ส่วนท้ายฟ้าผ่าโมดอล

หากต้องการสร้างส่วนประกอบโมดอล ให้นำเข้า LightningModal จาก lightning/modal. คอมโพเนนต์มีสิทธิ์เข้าถึงทรัพยากร LWC ปกติ เช่นเดียวกับคอนเทนเนอร์พิเศษ คอมโพเนนต์ตัวช่วย เมธอด และกิจกรรมของ lightning/modal โมดูล.

แนวทาง Automation Champion (I-do):

เพื่อแก้ปัญหาความต้องการทางธุรกิจข้างต้น เราจะสร้างส่วนประกอบของเว็บ Lightning ด้านล่าง นอกจากนี้เรายังจะได้เรียนรู้วิธีส่ง lwc ภายในส่วนประกอบฐานของ LightningModal

1. ฐาน LightningModal
2. ฟ้าผ่า Modalตัวอย่าง

ส่วนประกอบ BaseLightningModal

คอมโพเนนต์ของเว็บฟ้าผ่าโมดอลนี้จะใช้ในการส่งลูกค้าเป้าหมาย เราจะเรียกรูปแบบโมดอลนี้จาก ฟ้าผ่า Modalตัวอย่าง และส่งผ่านค่าไปยัง เนื้อหา คุณสมบัติ.

baseLightningModal.html

เทมเพลต HTML ของโมดอลใช้ตัวช่วย lightning-modal-* ส่วนประกอบเพื่อให้ส่วนหัว ส่วนท้าย และเนื้อหาของโมดอล ในตัวอย่างนี้ เนื้อหาสำหรับเนื้อความโมดอลมาจาก content คุณสมบัติที่เรากำหนดไว้ในไฟล์ JavaScript ของ modal

เดอะ lightning-modal-header และ lightning-modal-footer ส่วนประกอบเป็นทางเลือก แต่แนะนำ ส่วนประกอบ Lightning-modal-* แสดงผลตามลำดับที่ปรากฏในเทมเพลต วางส่วนประกอบตัวโมดัลสายฟ้าหลังส่วนหัวของโมดัลสายฟ้าและก่อนส่วนประกอบสายฟ้าโมดัลส่วนท้าย

<template>
    <lightning-modal-header label={content}></lightning-modal-header>
    <lightning-modal-body>
    <form>
        <div class="slds-box slds-theme_default">
            <lightning-input 
                name="firstName" 
                label="First Name" 
                value="">
            </lightning-input>
            <lightning-input 
                name="lastName" 
                label="Last Name" 
                value="">
            </lightning-input>
            <lightning-input 
                type="date" 
                name="birthdate" 
                label="Birthdate" 
                value="">
            </lightning-input>
            <lightning-input 
                type="email" 
                name="emailAddress" 
                label="Email Address" 
                value="">
            </lightning-input>
            <lightning-input 
                type="tel" 
                name="mobile" 
                label="Mobile" 
                value="">
            </lightning-input>
        </div>
    </form>
    </lightning-modal-body>
    <lightning-modal-footer>
        <div class="slds-m-top_small slds-align_absolute-center">
            <lightning-button 
                variant="Neutral" 
                label="Cancel and close" 
                class="slds-m-left_x-small" 
                onclick={handleClose}>
            </lightning-button>
            <lightning-button 
                variant="brand" 
                class="slds-m-left_x-small" 
                label="Save" 
                onclick={handleSave}>
            </lightning-button>
        </div>
    </lightning-modal-footer>
</template>

baseLightningModal.js

ในตัวอย่างนี้ content คุณสมบัติส่งข้อมูลไปยัง modal จากส่วนประกอบที่เรียกใช้เช่น ฟ้าผ่า Modalตัวอย่าง.

import { api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class MyModal extends LightningModal {
    @api content;

    handleClose() {
        this.close('done');
    }

    handleSave() {
    }
}

baseLightningModal.js-meta.xml

ทุกคอมโพเนนต์ต้องมีไฟล์คอนฟิกูเรชัน ไฟล์การกำหนดค่ากำหนดค่าข้อมูลเมตาสำหรับส่วนประกอบ รวมถึงเป้าหมายที่รองรับและการกำหนดค่าการออกแบบสำหรับ Lightning App Builder และ Experience Builder

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

ส่วนประกอบ LightningModalExample

เมื่อคลิกปุ่ม มันจะเปิดส่วนประกอบ baseLightningModal นอกจากนี้ยัง ส่งผ่านค่าไปยัง เนื้อหา คุณสมบัติ.

ฟ้าผ่าModalExample.html

เทมเพลต HTML สำหรับแอปนี้มีกลุ่มปุ่มที่เปิดโมดอล

<template>
<div class="slds-box slds-theme_default">
<lightning-button-group>
    <lightning-button onclick={handleLead} label="Submit Lead" aria-haspopup="modal"></lightning-button>
    <lightning-button label="Submit Address Change"></lightning-button>
    <lightning-button label="Initiate KYC"></lightning-button>
</lightning-button-group>
</div>
</template>

ฟ้าผ่าModalExample.js

LightningModal ให้ .เปิด() เมธอดที่เปิดโมดอลและส่งกลับสัญญาที่แก้ไขแบบอะซิงโครนัสด้วยผลลัพธ์ของการโต้ตอบของผู้ใช้กับโมดอล LightningModal จัดเตรียมคุณสมบัติเหล่านี้

• ฉลาก
• ขนาด
• คำอธิบาย
• ปิดการใช้งานปิด

มันเรียกใช้เมธอด .open() ในฟังก์ชัน handleClick() ที่เชื่อมโยงกับแอตทริบิวต์ onclick ของปุ่มแอป และใช้ async และwait คำหลักเพื่อจัดการกับสัญญาที่ส่งคืนโดย .open() ตัวอย่างนี้แทนที่ค่าขนาดโดยตั้งค่าให้ใหญ่และตั้งค่าเนื้อหาคุณสมบัติที่ผู้ใช้กำหนดเองของโมดอล

import { LightningElement } from 'lwc';
import myModal from 'c/baseLightningModal';

export default class MyApp extends LightningElement {
    async handleLead() {
        const result = await myModal.open({
            size: 'small',
            description: 'Accessible description of modal\'s purpose',
            content: 'Lead Generation Form',
        });
        console.log(result);
    }
}

LightningModalExample.js-meta.xml

ทุกคอมโพเนนต์ต้องมีไฟล์คอนฟิกูเรชัน ไฟล์การกำหนดค่ากำหนดค่าข้อมูลเมตาสำหรับส่วนประกอบ รวมถึงเป้าหมายที่รองรับและการกำหนดค่าการออกแบบสำหรับ Lightning App Builder และ Experience Builder

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

หลักฐานของแนวคิด

การประเมินรายทาง:

ฉันอยากได้ยินจากคุณ!

สิ่งหนึ่งที่คุณได้เรียนรู้จากโพสต์นี้คืออะไร? คุณจินตนาการถึงการนำความรู้ใหม่นี้ไปใช้ในโลกแห่งความเป็นจริงอย่างไร? อย่าลังเลที่จะแบ่งปันในความคิดเห็นด้านล่าง