Tips for Passing the Lightning Web Components Specialist Superbadge – Challenge 2

This post describes about the Lightning Web Components Specialist Superbadge Challenge 2 Guide (Tips and Guidelines).

Lightning Web Components Specialist Superbadge Challenge 2: Build the Boat Message Service Channel

To Pass the Lightning Web Components Specialist Superbadge Challenge 2, require the Knowledge about the Lightning Message Channels.

  • This challenge require to create Lightning Message Service Channel (LMS).
  • Lightning message service to communicate across the DOM between Visualforce pages, Aura components, and Lightning web components, including components in a pop-out utility bar
  • Lightning message service functions to communicate over a Lightning message channel
  • Lightning message service is new metadata type called “LightningMessageChannel”.
  • To access Lightning Message Channels In Visualforce & Lightning Components (Aura & LWC) to use with below:
    • Visualforce Page – $MessageChannel 
      • $MessageChannel.DemoLightningMessageChannel__c
    • Aura – lightning:messageChannel
      • <lightning:messageChannel type=”DemoLightningMessageChannel__c” aura:id=”demoLightningMessageChannel” />
    • LWC – @salesforce/messageChannel
      • import DEMOLMC from “@salesforce/messageChannel/DemoLightningMessageChannel__c“;
  • Refer Salesforce Documentation and Specification about Lightning Message Service Channel – https://developer.salesforce.com/docs/component-library/bundle/lightning-message-service/documentation
  • Lightning Message Services Introduced on Winter 20 as Developer Preview, Spring 20 as Beta Version, and now its Generally Available (GA) from Summer 20.
  • Importantly Salesforce UI doesn’t support to creating the Lightning Message Channel directly. So work around would have to create and deploy using Visual Studio Code or any Package.xml using ANT, Workbench.

     <?xml version=”1.0″ encoding=”UTF-8″?>

    <LightningMessageChannel xmlns=”http://soap.sforce.com/2006/04/metadata”>
        <description>This is a sample Lightning Message Channel Structure.</description>
        <isExposed>true</isExposed>
        <lightningMessageFields>
            <description>Account Record Name</description>
            <fieldName>Name</fieldName>
        </lightningMessageFields>
        <lightningMessageFields>
            <description>Account Description</description>
            <fieldName>Description</fieldName>
        </lightningMessageFields>
        <masterLabel>BoatMessageChannel</masterLabel>
    </LightningMessageChannel>

Instruction to create LightningMessageChannel in Visual Studio Code.

  • Create a new Folder called messageChannels under the force-app\main\default folder,
  • Create a meta xml file name with format: messageChannelName.messageChannel-meta.xml

Refer: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_message_channel_intro

BoatMessageChannel.messageChannel-meta.xml

here BoatMessageChannel – messageChannelName
messageChannel-meta.xml – Lightning Message Channel metadata type.

Possible Errors:

We can’t find the Lightning Message Service channel, BoatMessageChannel. Make sure the channel was created according to the requirements.

  • Create Lightning Message Service Channel to fix the above Error. (Salesforce UI doesn’t support to creating the Lightning Message Channel directly. So work around would have to create and deploy using Visual Studio Code or any Package.xml using ANT, Workbench)
  • Make sure to deploy the created Lightning Message Service Channel to the relevant salesforce org
  • if facing issue to deploy the Lightning Message Service Channel then include the LightningMessageChannel Metadata Type in the Package.xml file under manifest/package.xml and try to deploy it.

<types>
        <members>*</members>
        <name>LightningMessageChannel</name>
    </types>

Refer the following post about the Tips for Passing the Lightning Web Components Specialist Superbadge Challenges:-

  1. Lightning Web Components Specialist Challenge 1
  2. Lightning Web Components Specialist Challenge 2
  3. Lightning Web Components Specialist Challenge 3
  4. Lightning Web Components Specialist Challenge 4
  5. Lightning Web Components Specialist Challenge 5
  6. Lightning Web Components Specialist Challenge 6
  7. Lightning Web Components Specialist Challenge 7
  8. Lightning Web Components Specialist Challenge 8
  9. Lightning Web Components Specialist Challenge 9
  10. Lightning Web Components Specialist Challenge 10
  11. Lightning Web Components Specialist Challenge 11
  12. Lightning Web Components Specialist Challenge 12
  13. Lightning Web Components Specialist Challenge 13
  14. Lightning Web Components Specialist Challenge 14
  15. Lightning Web Components Specialist Challenge 15
  16. Lightning Web Components Specialist Challenge 16
  17. Lightning Web Components Specialist Challenge 17
  18. Lightning Web Components Specialist Challenge 18

 

Written by 

Salesforce MVP | Lightning Champion | 16x Salesforce Certified | Application Architect | 6x Trailhead Ranger | Techforce Services | Australia

Leave a Reply

Your email address will not be published. Required fields are marked *

*