Salesforce LWC学习(二十三) Lightning Message Service 浅谈

<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <description>This is a sample Lightning Message Channel for the Lightning Web Components Superbadge.</description>
    <isExposed>true</isExposed>
    <lightningMessageFields>
        <description>This is the record Id that changed</description>
        <fieldName>recordId</fieldName>
    </lightningMessageFields>
    <masterLabel>BoatMessageChannel</masterLabel>
</LightningMessageChannel>

import channelName from ‘@salesforce/messageChannel/namespace__channelReference‘;

import BOATMC from ‘@salesforce/messageChannel/BoatMessageChannel__c‘;

import { publish, MessageContext } from ‘lightning/messageService‘;

@wire(MessageContext)
    messageContext;
          
    handleClick() {
        const message = {
            recordId: ‘001xx000003NGSFAA4‘,
            recordData: {accountName: ‘Burlington Textiles Corp of America‘}
        };
        publish(this.messageContext, BOATMC, message);
    }

this.subscription = subscribe(
        this.messageContext, 
        BOATMC, 
        (message) => {
            this.handleMessage(message);
        }, 
        { scope: APPLICATION_SCOPE }
);

this.subscription = subscribe(
        this.messageContext, 
        BOATMC, 
        (message) => {
            this.handleMessage(message);
        }
);

public with sharing class BoatDataService {

    public static final String LENGTH_TYPE = ‘Length‘; 
    public static final String PRICE_TYPE = ‘Price‘; 
    public static final String TYPE_TYPE = ‘Type‘; 
    @AuraEnabled(cacheable=true)
    public static List<Boat__c> getBoats(String boatTypeId) {
        // Without an explicit boatTypeId, the full list is desired
        String query = ‘SELECT ‘
                     + ‘Name, Description__c, Geolocation__Latitude__s, ‘
                     + ‘Geolocation__Longitude__s, Picture__c, Contact__r.Name, ‘
                     + ‘BoatType__c, BoatType__r.Name, Length__c, Price__c ‘
                     + ‘FROM Boat__c‘;
        if (String.isNotBlank(boatTypeId)) {
            query += ‘ WHERE BoatType__c = :boatTypeId‘;
        }
        query += ‘ WITH SECURITY_ENFORCED ‘;
        return Database.query(query);
    }

    @AuraEnabled(cacheable=true)
    public static List<Boat__c> getSimilarBoats(Id boatId, String similarBy) {
        List<Boat__c> similarBoats = new List<Boat__c>();
        List<Boat__c> parentBoat = [SELECT Id, Length__c, Price__c, BoatType__c, BoatType__r.Name
                                    FROM Boat__c
                                    WHERE Id = :boatId 
                                    WITH SECURITY_ENFORCED];
        if (parentBoat.isEmpty()) {
            return similarBoats;
        }
        if (similarBy == LENGTH_TYPE) {
            similarBoats = [
                SELECT Id, Contact__r.Name, Name, BoatType__c, BoatType__r.Name, Length__c, Picture__c, Price__c, Year_Built__c
                FROM Boat__c
                WHERE Id != :parentBoat.get(0).Id
                AND (Length__c >= :parentBoat.get(0).Length__c / 1.2)
                AND (Length__c <= :parentBoat.get(0).Length__c * 1.2)
                WITH SECURITY_ENFORCED
                ORDER BY Length__c, Price__c, Year_Built__c
            ];
        } else if (similarBy == PRICE_TYPE) {
            similarBoats = [
                SELECT Id, Contact__r.Name, Name, BoatType__c, BoatType__r.Name, Length__c, Picture__c, Price__c, Year_Built__c
                FROM Boat__c
                WHERE Id != :parentBoat.get(0).Id
                AND (Price__c >= :parentBoat.get(0).Price__c / 1.2)
                AND (Price__c <= :parentBoat.get(0).Price__c * 1.2)
                WITH SECURITY_ENFORCED
                ORDER BY Price__c, Length__c, Year_Built__c
            ];
        } else if (similarBy == TYPE_TYPE) {
            similarBoats = [
                SELECT Id, Contact__r.Name, Name, BoatType__c, BoatType__r.Name, Length__c, Picture__c, Price__c, Year_Built__c
                FROM Boat__c
                WHERE Id != :parentBoat.get(0).Id
                AND (BoatType__c = :parentBoat.get(0).BoatType__c)
                WITH SECURITY_ENFORCED
                ORDER BY Price__c, Length__c, Year_Built__c
            ];
        }
        return similarBoats;
    }

}

<template>
    <lightning-tabset variant="scoped">
        <lightning-tab label="Gallery">
            <template if:true={boats.data}>
                <div class="slds-scrollable_y">
                    <lightning-layout horizontal-align="center" multiple-rows>
                        <template for:each={boats.data} for:item="boat">
                            <lightning-layout-item key={boat.Id} padding="around-small" size="12" small-device-size="6"
                                medium-device-size="4" large-device-size="3">
                                <c-boat-tile boat={boat} selected-boat-id={selectedBoatId}
                                    onboatselect={updateSelectedTile}></c-boat-tile>
                            </lightning-layout-item>
                        </template>
                    </lightning-layout>
                </div>
            </template>
        </lightning-tab>
    </lightning-tabset>
</template>

import { LightningElement, wire, api, track } from ‘lwc‘;
import getBoats from ‘@salesforce/apex/BoatDataService.getBoats‘;
import { publish, MessageContext } from ‘lightning/messageService‘;
import BoatMC from ‘@salesforce/messageChannel/BoatMessageChannel__c‘;

export default class BoatSearchResults extends LightningElement {
    boatTypeId = ‘‘;
    @track boats;
    @track draftValues = [];
    selectedBoatId = ‘‘;
    isLoading = false;
    error = undefined;
    wiredBoatsResult;

    @wire(MessageContext) messageContext;

    columns = [
        { label: ‘Name‘, fieldName: ‘Name‘, type: ‘text‘, editable: ‘true‘  },
        { label: ‘Length‘, fieldName: ‘Length__c‘, type: ‘number‘, editable: ‘true‘ },
        { label: ‘Price‘, fieldName: ‘Price__c‘, type: ‘currency‘, editable: ‘true‘ },
        { label: ‘Description‘, fieldName: ‘Description__c‘, type: ‘text‘, editable: ‘true‘ }
    ];

    @api
    searchBoats(boatTypeId) {
        this.isLoading = true;
        this.notifyLoading(this.isLoading);
        this.boatTypeId = boatTypeId;
    }

    @wire(getBoats, { boatTypeId: ‘$boatTypeId‘ })
    wiredBoats(result) {
        this.boats = result;
        if (result.error) {
            this.error = result.error;
            this.boats = undefined;
        }
        this.isLoading = false;
        this.notifyLoading(this.isLoading);
    }

    updateSelectedTile(event) {
        this.selectedBoatId = event.detail.boatId;
        this.sendMessageService(this.selectedBoatId);
    }

    notifyLoading(isLoading) {
        if (isLoading) {
            this.dispatchEvent(new CustomEvent(‘loading‘));
        } else {
            this.dispatchEvent(CustomEvent(‘doneloading‘));
        }
    }

     sendMessageService(boatId) { 
        publish(this.messageContext, BoatMC, { recordId : boatId });
    }
}

<template>
    <div onclick={selectBoat} class={tileClass}>
        <div style={backgroundStyle} class="tile"></div>
        <div class="lower-third">
            <h1 class="slds-truncate slds-text-heading_medium">{boat.Name}</h1>
            <h2 class="slds-truncate slds-text-heading_small">{boat.Contact__r.Name}</h2>
            <div class="slds-text-body_small">
                Price: <lightning-formatted-number maximum-fraction-digits="2" format-style="currency" currency-code="USD" value={boat.Price__c}> </lightning-formatted-number>
            </div>
            <div class="slds-text-body_small"> Length: {boat.Length__c} </div>
            <div class="slds-text-body_small"> Type: {boat.BoatType__r.Name} </div>
        </div>
    </div>
</template>

import { LightningElement, api} from "lwc";
const TILE_WRAPPER_SELECTED_CLASS = "tile-wrapper selected";
const TILE_WRAPPER_UNSELECTED_CLASS = "tile-wrapper";
export default class BoatTile extends LightningElement {
    @api boat;
    @api selectedBoatId;
    get backgroundStyle() {
        return `background-image:url(${this.boat.Picture__c})`;
    }
    get tileClass() {
        return this.selectedBoatId == this.boat.Id ? TILE_WRAPPER_SELECTED_CLASS : TILE_WRAPPER_UNSELECTED_CLASS;
    }
    selectBoat() {
        this.selectedBoatId = !this.selectedBoatId;
        const boatselect = new CustomEvent("boatselect", {
            detail: {
                boatId: this.boat.Id
            }
        });
        this.dispatchEvent(boatselect);
    }
}

<template>
  <template if:false={wiredRecord.data}>
    <!-- lightning card for the label when wiredRecord has no data goes here  -->
      <lightning-card class= "slds-align_absolute-center no-boat-height">
          <span>{label.labelPleaseSelectABoat}</span>
      </lightning-card>
  </template>
  <template if:true={wiredRecord.data}>
     <!-- lightning card for the content when wiredRecord has data goes here  -->
     <lightning-card>
         <lightning-tabset variant="scoped">
             <lightning-tab label={label.labelDetails}>
                 <lightning-card icon-name={detailsTabIconName} title={boatName}>
                     <lightning-button slot="actions" title={boatName} label={label.labelFullDetails} onclick={navigateToRecordViewPage}></lightning-button>
                     <lightning-record-view-form density="compact"
                          record-id={boatId}
                          object-api-name="Boat__c">
                          <lightning-output-field field-name="BoatType__c" class="slds-form-element_1-col"></lightning-output-field>
                          <lightning-output-field field-name="Length__c" class="slds-form-element_1-col"></lightning-output-field>
                          <lightning-output-field field-name="Price__c" class="slds-form-element_1-col"></lightning-output-field>
                          <lightning-output-field field-name="Description__c" class="slds-form-element_1-col"></lightning-output-field>
                     </lightning-record-view-form>
                 </lightning-card>
             </lightning-tab>
             
         </lightning-tabset>
     </lightning-card>
  </template>
</template>

// Custom Labels Imports
// import labelDetails for Details
// import labelReviews for Reviews
// import labelAddReview for Add_Review
// import labelFullDetails for Full_Details
// import labelPleaseSelectABoat for Please_select_a_boat
// Boat__c Schema Imports
// import BOAT_ID_FIELD for the Boat Id
// import BOAT_NAME_FIELD for the boat Name
import { LightningElement, api,wire } from ‘lwc‘;
import labelDetails from ‘@salesforce/label/c.Details‘;
import labelReviews from ‘@salesforce/label/c.Reviews‘;
import labelAddReview from ‘@salesforce/label/c.Add_Review‘;
import labelFullDetails from ‘@salesforce/label/c.Full_Details‘;
import labelPleaseSelectABoat from ‘@salesforce/label/c.Please_select_a_boat‘;
import BOAT_ID_FIELD from ‘@salesforce/schema/Boat__c.Id‘;
import BOAT_NAME_FIELD from ‘@salesforce/schema/Boat__c.Name‘;
import { getRecord,getFieldValue } from ‘lightning/uiRecordApi‘;
import BOATMC from ‘@salesforce/messageChannel/BoatMessageChannel__c‘;
import { APPLICATION_SCOPE,MessageContext, subscribe } from ‘lightning/messageService‘;
const BOAT_FIELDS = [BOAT_ID_FIELD, BOAT_NAME_FIELD];
import {NavigationMixin} from ‘lightning/navigation‘;
export default class BoatDetailTabs extends NavigationMixin(LightningElement) {
  @api boatId;

  label = {
    labelDetails,
    labelReviews,
    labelAddReview,
    labelFullDetails,
    labelPleaseSelectABoat,
  };
  
  // Decide when to show or hide the icon
  // returns ‘utility:anchor‘ or null
  get detailsTabIconName() {
    return this.wiredRecord && this.wiredRecord.data ? ‘utility:anchor‘ : null;
   }
  
  // Utilize getFieldValue to extract the boat name from the record wire
  @wire(getRecord,{recordId: ‘$boatId‘, fields: BOAT_FIELDS})
  wiredRecord;

  get boatName() {
    return getFieldValue(this.wiredRecord.data, BOAT_NAME_FIELD);
   }
  
  // Private
  subscription = null;
  // Initialize messageContext for Message Service
  @wire(MessageContext)
  messageContext;
  
  // Subscribe to the message channel
  subscribeMC() {
    if(this.subscription) { return; }
    // local boatId must receive the recordId from the message
    this.subscription = subscribe(
        this.messageContext, 
        BOATMC, 
        (message) => {
            this.boatId = message.recordId;
        }, 
        { scope: APPLICATION_SCOPE }
    );
  }
  
  // Calls subscribeMC()
  connectedCallback() { 
    this.subscribeMC();
  }

}