유틸리티 바 Salesforce pure LWC의 전체 화면 모달

유틸리티 막대에서 모달을 호출하는 기능을 원한다고 생각하십시오. 모달이 전체 화면에 표시되지 않고 유틸리티 막대에 바인딩되어 있음을 구현하고 발견했습니다. 솔루션을 검색하지만 LWC에 특정한 솔루션이 없습니다.



AURAhow-to-show-a-modal-in-fullscreen-from-utility-bar를 사용하여 사용 가능한 솔루션이 있습니다.

이 문제를 해결하기 위해 우리는 Lightning Message Service를 사용하여 Dom 전체에서 통신할 것입니다. 유틸리티 막대에 있는 채널에 메시지를 게시하고 구독 구성 요소가 포함된 Salesforce 플랫폼의 어디에서나 채널을 구독합니다.

1. 메시지 채널 생성

자세한 내용은 여기lwcMessageChannel를 참조하십시오.

Modelchannel.messageChannel-meta.xml

<?xml version="1.0" encoding="UTF-8" ?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>Meodelchannel</masterLabel>
    <isExposed>true</isExposed>
    <description>Message Channel to pass a pubsub</description>
    <lightningMessageFields>
        <fieldName>record</fieldName>
        <description>This is the record that changed</description>
    </lightningMessageFields>
</LightningMessageChannel>

2. messageChannel에 게시

유틸리티 막대에서 사용할 구성 요소를 만듭니다.

  <template>
    <!--this component will reside in the Utitity bar
         on click of the button the message is published 
         on 'Modelchannel' Message Channel
         now another component can subscribe to the Message -->
    <lightning-button
            label="ShowModelFullScreen"
            variant="neutral"
            onclick={handleModal}
        ></lightning-button>
</template>

import { LightningElement,wire } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
//access to the Modelchannel
import MODELCHANNEL from '@salesforce/messageChannel/Modelchannel__c'

export default class Callmodel extends LightningElement {

    @wire (MessageContext)
    messagecontext;

    handleModal(){
      //publish the message on the Modelchannel message Channel
        publish(this.messagecontext,MODELCHANNEL);
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__UtilityBar</target>
    </targets>
</LightningComponentBundle>

3. 메시지 구독

Lightning 디자인 시스템 모델 구성 요소를 사용할 것입니다.
Modal Lightning

<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">
            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
              <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
              </svg>
              <span class="slds-assistive-text">Close</span>
            </button>
            <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal header</h2>
            <p class="slds-m-top_x-small">Here’s a tagline if you need it. It is allowed to extend across mulitple lines, so I’m making up content to show that to you. It is allowed to
              <a href="javascript:void(0);">contain links or be a link</a>.</p>
          </header>
          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis
              aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
            <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud
              ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
          </div>
          <footer class="slds-modal__footer">
            <button class="slds-button slds-button_neutral" onclick={closeModal}>Close</button>
          </footer>
        </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open"></div>
   </template>
</template>

import { LightningElement,wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import MODELCHANNEL from '@salesforce/messageChannel/Modelchannel__c';

export default class Modalfull extends LightningElement {
    showModal=false
    subscription=null;

    @wire(MessageContext)
    message;

    connectedCallback(){
        this.subscribeMessage();
    }
    subscribeMessage(){
        this.subscription=subscribe(
            this.message,
            MODELCHANNEL,
            ()=>{
                //when we subscribe to the channel show the Model window
                this.showModal=true;
            }
        );
    }
    closeModal(){
        this.showModal=false;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

유틸리티 막대에 게시 구성 요소를 포함합니다.

모델을 표시하려는 HomePage, RecordPage 또는 AnyPage에 Subscribe 구성 요소를 포함합니다.

이 기술의 문제점은 표시하려는 모델 구성 요소를 수동으로 포함해야 한다는 것입니다. 구독 구성 요소를 포함하지 않은 페이지에 있는 경우 모달이 표시되지 않습니다.

참고: 누군가 다른 방법을 알고 있다면. 댓글 부탁드립니다.