Lighting Web コンポネット LWC Aura → LWC


QuctionActionを作成する場合、ヘッダなど非表示保存、キャンセルなどボタンをカスタマイズする。

<aura:component implements=”force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId” access=”global”>

    <c:lwccompoent recordId=”{!v.recordId}”></c:lwccompoent>

</aura:component>  

通常:​

<aura:component implements=”flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId” access=”global”>
    <c:selectMaterial recordId=”{!v.recordId}”></c:selectMaterial>
</aura:component>

カスタマイズボタンと画面閉じる機能のサンプル以下:

LWC側

//HTML

<template>

    <div style=”padding:0px”>

    <header class=”slds-modal__header  slds-size_1-of-1″>

<!–

以下のボタンの部分この場合、要らないです。変な動きになります。(表示後に、画面移動が発生した)

LWCでModalのみ表示する場合、必要です。

        <button

            class=”slds-button slds-button_icon slds-modal__close slds-button_icon-inverse”

            onclick={handleDialogClose}

            title=”Close”

        >

            <span class=”slds-assistive-text”>Close</span>

        </button>

–>

        <h2 class=”title slds-text-heading–medium slds-hyphenate”>

            タイトル

        </h2>

    </header>

    <div

        class=”slds-modal__content slds-p-around_medium  slds-size_1-of-1″

        id=”modal-content-id-1″

        style=”min-height: 500px;”

    >

        body…..

    </div>

    <footer class=”modal-footer slds-modal__footer slds-size_1-of-1″>

        <lightning-button

            class=”slds-button”

            label=”キャンセル”

            variant=”neutral”

            onclick={handleDialogClose}

        ></lightning-button>

        <lightning-button

            variant=”brand”

            label=”登録”

            onclick={handleSubmit}

            class=”slds-button”

        >

        </lightning-button>

    </footer>

</div>

    <!—->

</template>

//JS​

    handleDialogClose() {

        const closeQA = new CustomEvent(‘close’);

        // Dispatches the event.

        this.dispatchEvent(closeQA);

    }

AURA側:

//○○ .cmp

<aura:component implements=”force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId” access=”global”>

    <aura:html tag=”style”>

        .cuf-content {

            padding: 0rem 0rem !important;

        }

        .slds-p-around–medium {

            padding: 0rem !important;

        }       

        .slds-modal__content{

            overflow-y:hidden !important;

            height:unset !important;

            max-height:unset !important;

        }

    </aura:html>

    <c:lwcコンポーネント recordId=”{!v.recordId}” onclose=”{!c.closeQA}”></c::lwcコンポーネント>

</aura:component>   

//●●●Controller.js

({

    closeQA : function(component, event, helper) {

    $A.get(“e.force:closeQuickAction”).fire();

  }

})

//参照:

http://www.sfdcbox.com/2019/03/a-highly-flexible-quick-action.html​

1. Copy auraPubsub and pubsub

2. Create an aura lightning component

<aura:component implements=”flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutHeader” access=”global”>

  <c:auraPubsub aura:id=”pubsub” />

  <aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>

  <div class=”slds-text-align_center slds-text-heading_medium”>Modal Header</div>

</aura:component>

//the js controller

({

  doInit : function(component, event, helper) {

    window.setTimeout(

      $A.getCallback(function() {

        $A.get(“e.force:closeQuickAction”).fire();       

        var pubsub = component.find(‘pubsub’);

        pubsub.fireEvent(‘openModal’, ‘any related message’);

      }), 0

    );

  }

})

3. Create the Lightning Web Component modal lwcModal

lwcModal.html

<template>

  <template if:true={openModal}>

   <div role=”dialog” tabindex=”-1″ class={modalClass} aria-labelledby=”modal-heading-01″ aria-modal=”true” aria-describedby=”modal-content-id-1″>

    <template if:false={loaded}>

      <lightning-spinner alternative-text=”Loading”></lightning-spinner>

    </template>       

    <div class=”slds-modal__container”>

     <header class=”slds-modal__header”>

       <lightning-button-icon class=”slds-modal__close” size=”large” icon-name=”utility:close” onclick={closeModal} variant=”bare-inverse” alternative-text=”close”></lightning-button-icon>

       <h2 id=”modal-heading-01″ class=”slds-text-heading_medium slds-hyphenate”>Modal Header</h2>

     </header>

     <div class=”slds-modal__content slds-p-around_medium” id=”modal-content-id-1″ style=” padding-top: .25rem; “>

     Mobal Body Mobal Body Mobal Body Mobal Body Mobal Body 

  </div>

     <footer class=”slds-modal__footer”>

       <lightning-button label=”Close” title=”Close” onclick={closeModal} class=”slds-m-left_x-small”></lightning-button>

       <lightning-button variant=”brand” label=”Save” title=”save” class=”slds-m-left_x-small”></lightning-button>

     </footer>

     </div>

   </div>

   <div class=”slds-backdrop slds-backdrop_open”></div>

  </template>

</template>

lwcModal.js

import { LightningElement, api, wire, track } from ‘lwc’;

import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;

import { CurrentPageReference } from ‘lightning/navigation’;

import { registerListener, unregisterAllListeners } from ‘c/pubsub’;

import getModalBody from ‘@salesforce/apex/lwcModalApex.getModalBody’;

export default class LwcModal extends LightningElement {

  @wire(CurrentPageReference) pageRef;

  @api recordId;

  @track loaded = false;

  @track openModal = false;

  @track error;

  @track modalBody;

  get modalClass(){

    return this.openModal?’slds-modal slds-modal_large slds-fade-in-open’:’slds-modal slds-modal_large’;

  }

  handleLoad(){

    getModalBody({rId : this.recordId})

      .then(result => {

this.modalBody = result;

        this.error = undefined;

        this.loaded = true;

this.openModal = true;

      })

      .catch(error => {

        this.error = error;

        this.loaded = true;

this.showNotification(‘Error’, error.body.message, ‘error’);

        this.closeModal();

      });

  }

  closeModal(){

    this.openModal = false;

  }

  connectedCallback() {

    registerListener(‘openModal’, this.handleLoad, this);

  }

  disconnectedCallback() {

    unregisterAllListeners(this);

  }

  showNotification(t,m,v) {

    const evt = new ShowToastEvent({

      title: t,

      message: m,

      variant: v

    });

    this.dispatchEvent(evt);

  }

}

lwcModal.css

.slds-modal__content{

  min-height: 15rem;

}

Apex Class

public class lwcModalApex {

  @AuraEnabled(cacheable=true)

  public static String getModalBody() {

    return ‘Modal body, Create anything as per the requirement, a huge complex wrapper may be 🙂 ‘;

  }

}

4. Finally and most importantly add the lwcModal component to the lightning page. remember pub/sub will only work b/w components on the same page, and this whole idea is to create a quick action which fires a publish event and closes itself the Lightning web Component which has subscribed for this event opens itself when it listens to the event published by the lightning component.

lwcQuickAction.gif