Sign in Subscribe

Tech Writing, COVID-19, and Lightning Web Components

Jeffrey Alhadeff

• 14 min read
Tech Writing, COVID-19, and Lightning Web Components

This project is one I originally created for Trailhead, in close partnership with a subject matter expert, during the height of the COVID-19 pandemic. Although it’s no longer available on Trailhead, I’m sharing it here because it represents a meaningful moment in my work and a unique challenge we faced as a global learning community.

At a time when uncertainty was the norm, our team was asked to help organizations navigate the practical realities of returning to the workplace safely. Part of the audiance was AppExchange partners. We had a sincere hope that the Salesforce community would step to the challenge to create new ways of helping people regain a sense of normal.

My role was to design and author the learning experience: shaping the narrative, structuring the lessons, and ensuring the material was both accurate and accessible. It’s a project I’m proud of—not just because of the instructional design, but because it met a critical need at a critical time.

Quick Start: Build a Workplace Command Center App 

Step 1: Set Up Your Developer Org

Learning Objectives 

In this project, you’ll:

  • Set up a developer org.
  • Create an app that helps your business return to work safely.
  • Build the app in your org.

Now Is the Time To Get Back to Work

Work.com is a suite of apps, data, and content to help businesses return to work, while keeping employees, customers, and communities safe during the COVID-19 crisis—and beyond. Work.com apps provide solutions for emergency response planning, employee health assessments, volunteer and grant management, shift scheduling, and manual contact tracing. Work.com also includes Sales EnablementmyTrailhead to help businesses skill up their workforce with customizable training to meet our newest challenges.

Workplace Command Center is the hub of Work.com. Business leaders and operations executives use reports and dashboards to monitor return-to-work readiness, make data-driven decisions, and take action.

Workplace Command Center integrates apps built by Salesforce, AppExchange partners, and customers, along with attractive visualizations of public health data.

If you already know how to build apps for Salesforce, then you know how to build Work.com apps. In this project, you’ll build a Work.com app and integrate it with Workplace Command Center. You’ll play the role of a developer who creates an app called Water4Plants that tracks where office plants are located and when they need to be watered, since not everyone will return to the office at the same time. 

Note
AppExchange partners: Package your app and share it on AppExchange. To become an AppExchange partner, join here.

In this project we assume you know how to use Visual Studio Code software and how to build a simple Lightning Web component. If you’re not already familiar with Visual Studio Code, then check out the resources below.

Set Up Your Developer Org

To complete this project, you need a special Developer Edition org that contains Workplace Command Center and our sample data. Get the free Developer Edition and connect it to Trailhead now so you can complete the challenges in this project. Note that this Developer Edition is designed to work with the challenges in this badge and may not work for other badges. Always check that you’re using the Trailhead Playground or special Developer Edition org that we recommend.

Before You Start

Before you take the steps in this hands-on project, make sure you complete Quick Start: Lightning Web Components. That badge walks you through setting up your Salesforce DX development environment.

Setting up this org involves two steps:

  1. Create a new Trailhead Playground with the Workplace Command Center.
  2. Link your new Trailhead Playground with your Trailhead Account.

Let’s get started.

Create a new Trailhead Playground with Workplace Command Center.

  1. Sign up for a Trailhead Playground with Workplace Command Center.
  2. Fill out the form. In the Email field, enter an active email address. In the Username field, enter a unique email address, but it doesn’t have to be a valid email account. For example, your username can be yourname@backtowork.com.
  3. After you fill out the form, click Sign me up. A confirmation message appears.
  4. When you receive the activation email, open it and click Verify Account.
  5. Complete the registration form by setting your password and entering a security answer. Tip: Write down your username, password, and login URL for easy access later.
  6. Click Change Password. You’re logged into your special Trailhead Playground and redirected to the Setup page.

Now connect your new Developer Edition org to Trailhead.

  1. Make sure you're logged in to your Trailhead account.
  2. In the Challenge section at the bottom of this page, select Log into a Developer Edition from the picklist.
  3. Enter the username and password for the playground you just set up and click Log In.
  4. At the Allow Access? screen, click Allow.
  5. At the Want to connect this org for hands-on challenges? screen, click Yes! Save it. You are redirected back to the challenge page and ready to use your new Developer Edition to earn this badge.

You’re redirected back to the challenge page. Now select Command Center from the app launcher to view the Workplace Command Center. Click Verify step to earn 25 points to finish this step.

Resources 

Note

The instructions below starting with “You'll be completing this project…” are for projects that use a standard org. Since this project requires an org with Workplace Command Center, please follow these instructions instead:

You'll verify that you created your own Salesforce Org with the Developer Edition org with Workplace Command Center and linked it with your Trailhead account as instructed in this step. Confirm that org is selected from the drop-down menu, then click "Verify step to earn 25 points" below. If you use Trailhead in a language other than English, set the language of your Trailhead Playground to English before you attempt this project. Want to find out more about using hands-on orgs for Trailhead learning? Check out the Trailhead Playground Management module.

Step check information for challenge developer. Trailblazers don’t see any of this--this is information for your challenge developer only.

Step number

1

Step name


Set Up Your Developer Org

Technical Specification


  • The permission set is Workplace Command Center Access assigned to the learner


Error Message:

We can’t find the permission set labeled  ‘Workplace Command Center Access’ assigned to the current user.


Step 2: Create the Water4Plants Sample App

Now it’s time to create the app.

Connect the Project with Your Org

  1. Open Visual Studio Code on your computer.
  2. Open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
  3. Type SFDX.
  4. Select SFDX: Create Project.
  5. Press Enter to accept the standard option.
  6. Enter Water4Plants as the project name.
  7. Select a folder to store the project.
  8. Click Create Project. You should see the following as your base setup.

[Alt text: Visual Studio Code with WATER4PLANTS app]

  1. Open the Command Palette again and enter SFDX: Authorize an Org and select Project Default.
  2. Press Enter to open the login page.
  3. Enter your credentials for your Trailhead Playground with Workplace Command Center. Click Log In and then click Allow.

Create and Deploy the Apex Class

  1. Under force-app/main/default, right-click classes and select SFDX: Create Apex Class.

[Alt text: Visual Studio Code showing right-click on Classes.]

  1. In the Visual Studio Code Command Palette, name the class Water4PlantsController. Click Enter | Enter.
  2. Replace the contents of the file with the following code:

public with sharing class Water4PlantsController {


    public Water4PlantsController() {


    }


    @AuraEnabled(cacheable=true)

    public static List<Plant__c> getThirstyPlants(Id rootLocationId) {

        // Return thirsty plants whose root location matches 'rootLocationId'

        // Note: For production app, implement pagination and handle exceptions gracefully

        List<Plant__c> plants;

        if (rootLocationId != NULL) {

            plants = [

                SELECT Id, Name, Nickname__c, Kind__c, Last_Watering__c, Watering_Period__c, Location__r.Name 

                FROM Plant__c 

                WHERE Requires_Watering__c = TRUE AND Location__r.RootLocationId = :rootLocationId

                WITH SECURITY_ENFORCED

            ];

        }

        else {

            plants = [

                SELECT Id, Name, Nickname__c, Kind__c, Last_Watering__c, Watering_Period__c, Location__r.Name 

                FROM Plant__c 

                WHERE Requires_Watering__c = TRUE 

                WITH SECURITY_ENFORCED

            ];

        }

        return plants;

    }

}

  1. Save this file.
  2. Open the Command Palette again and type SFDX: Deploy This Source to Org. Click Enter. You’ll see a confirmation message that the APEX Class successfully deployed to the org.

Create and Deploy the Lightning Web Component

  1. Under force-app/main/default, right-click lwc and select SFDX: Create Lightning Web Component.
  2. Name the Lightning Web Component commandCenterCard and select the main directory.

You should see three files: an HTML file, a JavaScript file, and a metadata XML file. 

[Alt text: HTML, JavaScript, and metadata XML file included in the lwc]

  1. In the HTML file, commandCenterCard.html, copy and paste the following code. 

<template>


    <lightning-card title="Plants That Need Watering" icon-name="custom:custom5">

        <div class="slds-m-around_medium">


            <template if:true={plants.length}>

                <lightning-datatable key-field="id" data={plants} columns={columns} hide-checkbox-column=true>

                </lightning-datatable>

            </template>


            <template if:false={plants.length}>

                No plants are thirsty!

            </template>


            <template if:true={error}>

                Error!

            </template>


        </div>

    </lightning-card>


</template>

  1. Save the file.
  2. In the JavaScript file, commandCenterCard.js, copy and paste the following code.

import { LightningElement, wire } from 'lwc';

import { subscribe, unsubscribe, MessageContext, APPLICATION_SCOPE } from 'lightning/messageService';

import COMMAND_CENTER_MSG_CHANNEL from '@salesforce/messageChannel/lightning__CommandCenterMessageChannel';

import getThirstyPlants from '@salesforce/apex/Water4PlantsController.getThirstyPlants';


const columns = [

    { label: 'Plant', fieldName: 'plantUrl', 'initialWidth': 100, 'type': 'url', typeAttributes: { label: { fieldName: 'name' } }},

    { label: 'Kind', fieldName: 'kind', type: 'text' },

    { label: 'Last Watered', fieldName: 'lastWatered', type: 'date', typeAttributes:{

        year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit"} },

    { label: 'Location', fieldName: 'location', type: 'text' }

];


export default class Water4PlantsCard extends LightningElement {


    globalLocationName;

    globalLocationId;

    subscription;

    error;

    columns = columns;

    plants = Array();


    @wire(MessageContext)

    messageContext;

    

    @wire(getThirstyPlants, { rootLocationId: '$globalLocationId' })

    response(value) {

        const { error, data } = value;

        if (data) {

            // Transform Salesforce object data into format for display in data table

            this.plants = Array();

            for (var i = 0; i < data.length; i++) {

                let plantUrl = (typeof(data[i].Name) != 'undefined') ? '/'+data[i].Id : '';

                this.plants.push ({

                    'id': data[i].Id,

                    'plantUrl': plantUrl,

                    'name': data[i].Name,

                    'kind': data[i].Kind__c,

                    'lastWatered': data[i].Last_Watering__c,

                    'location': data[i].Location__r.Name

                });

            }

            this.error = undefined;  

        }

        else if (error) {

            this.error = error;  

            this.issues = []; 

        }

    }


    connectedCallback() {

        this.subscribeToChannel();

    }


    /**

     * Subscribe to Command Center Message Channel to listen to global filter changes

     */

    subscribeToChannel() {

        if (!this.subscription) {

            this.subscription = subscribe(this.messageContext, COMMAND_CENTER_MSG_CHANNEL, message => this.handleEvent(message), {

                scope: APPLICATION_SCOPE

            });

        }

    }


    /**

     * Any time global filter changes are captured get updated values

     * @param  {} message

     */

    handleEvent(message) {

        switch (message.EventType) {

            case 'CC_LOCATION_CHANGE': {

                /* This event returns two attributes within it's EventPayload (locationName & locationId) */

                this.globalLocationName = message.EventPayload.locationName;

                this.globalLocationId = message.EventPayload.locationId;

                break;

            }


            default: {

                break;

            }

        }

    }

    

    /**

     * If disconnected unsubscribe from Message Channel

     */

    disconnectedCallback() {

        if (this.subscription) {

            unsubscribe(this.subscription);

        }

    }

}

  1. Save the file.
  2. In the XML file, commandCenterCard.js-meta.xml, copy and paste the following code. 

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

      <target>lightning__RecordPage</target>

      <target>lightning__AppPage</target>

      <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

  1. Save the file.
  2. Open the Command Palette again and type: SFDX: Deploy This Source to Org and click Enter.

Your Water4Plants app is now built and ready to go. 

Resources 

Step check information for challenge developer. Trailblazers don’t see any of this--this is information for your challenge developer only.

Step number

2 

Step name


Create the Water4Plants Sample App


Technical Specification


  • Confirm the lightning web component “commandCenterCard” is deployed to the org.



Error Message:

We can’t find the Lightning web component ‘commandCenterCard’.

Step 3: Configure the Water4Plants Sample App

Let’s share this app so facilities managers, employees, and plant lovers can make sure every plant gets watered, even if the plant owner has yet to return to work.

Add Component to the Workplace Command Center

  1. Click the Home tab.
  2. From Components in the left navigation bar, scroll down to the Custom area and find commandCenterCard. Drag the commandCenterCard to the top of the page canvas.
  3. Click Save.
  4. Click Activate.
  5. Under the  APP AND PROFILE tab, click Assign to Apps and Profiles.
  6. Select the Command Center app and click Next.
  7. Select Standard User and System Administrator.
  8. Click Next and then Save.
  9. Click Save again, then click Back to return to the Home page.

Click

Setup gear

and then select Edit Page.

From the App Launcher (

App Launcher

) in your Trailhead Playground with Workplace Command Center, select Command Center.

You should see the component added to the Workplace Command Center home page. In the Location search field, enter the name of a city where your business has offices—Chicago, Paris, or Tel Aviv. See the current status update for each location.

Water a Plant

Let’s water a thirsty bamboo plant in Chicago and see how the data updates.

  1. In the Location search field, enter Chicago.
  2. Click on the plant record for the bamboo plant.
  3. On the Related tab, click New next to Plant Waterings.
  4. Select today’s date and click Save.
  5. Return to Home, refresh the page, and you’ll see that the bamboo plant no longer appears in the list of plants that need watering. 

Congrats, you watered a plant! Nice job!

You’re all set to make the next great thing.

Publish Your Work.com App on AppExchange

Now it’s your turn. Go create something amazing and publish it on AppExchange. The process for publishing a Work.com app is essentially the same as publishing other apps. You create a managed package containing your app components, and an associated listing with the app description, screenshots, and pricing information. Then you submit the package for security review. After that, your customers can install your app in their orgs with a single click. 

With your creativity and skills, you’re ready to help people—and possibly plants—get back to work safely.

Resources

Step check information for challenge developer. Trailblazers don’t see any of this--this is information for your challenge developer only.

Step number

3

Step name


Add the App to the org


Technical Specification


  • Confirm bamboo plant’s record is updated to watered.

  • WHERE Kind__c = 'Bamboo' and Requires_Watering__c = false



Error Message:

We can’t find a recent watering record for the bamboo plant.



Sign up for more like this.

Enter your email
Subscribe