Consider you want the functionality to have the Modal called from Utility Bar. You implemented and found that the Modal does not appear in full screen, but is bound to the Utility Bar. You search for the solution but there is no solution specific to LWC.
There is solution availabe using AURA how-to-show-a-modal-in-fullscreen-from-utility-bar
To tackle this problem we will be using Lightning Message Service to communicate across the Dom. Publish the message on the Channel which reside in Utility Bar and Subscribe to the Channel from anywhere on the salesforce platform where the Subscribe Component is include.
1. create the Message Channel
for more detail please refer this 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. Publish on the messageChannel
create the component that will be used in the utility bar.
<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. Subscribe the Message
we will be using Lightning design System Model Component.
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>
- Include the Publish Component in the Utility Bar.
- Include the Subscribe Component in the HomePage or RecordPage or AnyPage from where you want to display the Model.
the problem with this technique is, you have to manually include the Model component, where you want to display. if you are on the page where you have not included the subscription component, Modal will not displayed.
NOTE: if anyone knows another way. Please do comment.
Top comments (0)