Full Screen Modal from Utility Bar Salesforce pure LWC

suraj rathod — Tue, 17 Nov 2020 09:03:29 +0000

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.

Eagluet-simple pomodoro time with force to focus

suraj rathod — Tue, 02 Jun 2020 14:05:13 +0000

I had launch a product on ProductHunt. Eagluet- simple and elegant Pomodoro Timer. Some of its feature are, it notifies you 5 sec early when the Break mode start. Forces You to Rest or go somewhere else while in the Break time. The good thing is it is open source, you can contribute request for the new feature.
Please do upvote on the ProductHunt https://www.producthunt.com/posts/eagluet
GitHub:-
https://github.com/surajrathod/eagluet

DEV Community: suraj rathod

Full Screen Modal from Utility Bar Salesforce pure LWC

1. create the Message Channel

2. Publish on the messageChannel

3. Subscribe the Message

Eagluet-simple pomodoro time with force to focus