Top 5 Lightning Component Gems of Salesforce Spring’21 Release!

The Lightning Component modern framework is a User Interface framework to develop dynamic web apps for mobile and desktop devices. As is the case with each release, the latest Spring’21 release is packed with rich features including, the newly added Lightning Component features! 

Currently, the Spring’21 release is under the pre-release program. On the and 08th & 09th of January, Sandboxes will be upgraded, as a result, your organization will get the look and feel of Spring’21 release.  In case you have not read the entire 491 pages of Salesforce Spring’21 release notes, check out the Spring’21 release quick summary written by me.

I combed through the release notes and highlighted the added capabilities to the Lightning Component features. Believe me, it was hard to stop at just five! To kick things off, here is my take on the coolest Lightning Component features from the Spring’21 release.  

1. Create a Lightning Web Component Action (Pilot):- Create a Lightning web component (LWC) and use it as a quick action. Lightning web component actions work side by side on your pages along with Lightning component and Visualforce actions. LWC actions offer advantages such as the ability to easily customize headers and footers and to create actions that have no UI representation.
2. Add Salesforce CMS Content to Custom Lightning Web Components:- Now you can configure CMS content for a custom Lightning web component by specifying type=”ContentReference” for the component property type in the .js-meta.xml file. You can also configure your component to filter for a specific content type. For example, to display only published images from your CMS workspace, specify filter=”cms_image”, as follows:

   <property type="ContentReference" name="contentId" label="Content ID" filter="cms_image"/>

   

   In Experience Builder, add the component to the page and click Add Content in the component’s properties. Add images, documents, news articles, and more directly to your site from your CMS workspace.

   
3. Enable Secure Static Resources for Lightning Components (Update, Postponed):- This update is postponed to Summer ’21. It was scheduled for auto-activation (enforcement) in Spring ’21. To improve security, this update serves all static resources from the visualforce domain instead of the lightning domain. This change prevents a script included in a static resource from accessing the document in the lightning domain due to the same-origin security policy.
   1. To enable this update, from Setup, in the Quick Find box, enter Release Updates, then select Release Updates. For Enable Secure Static Resources for Lightning Components, follow the testing and activation steps.
   2. This change applies to Aura and Lightning web components in Lightning Experience, Salesforce Classic, Experience Builder sites, and all versions of the Salesforce app.
4. Create Flow Builder Custom Property Editors That Access Automatic Outputs:- Using custom property editors now you can access automatic outputs, which makes it easy to use upstream variable values as options for input fields later in a flow. Previously, custom property editors could access only values that admins manually assigned to flow variables.
   
   In your custom property editor, expose a public property called automaticOutputVariables. When the custom property editor is initialized or when the admin changes a value in the custom property editor, Flow Builder passes the automatically stored values to automaticOutputVariables.
   
   Write custom logic so that when an admin sets a value for a field such as a combo box or picklist, the automatically stored values appear as input options.

   // myCustomPropertyEditor.js 
   import { LightningElement, api } from 'lwc'; 
   export default class MyCustomPropertyEditor extends LightningElement { 
       @api automaticOutputVariables;
       
       //Insert custom logic.
   }

   For example, this custom property editor gets a list of merge fields automaticOutputVariables and displays them as input options for the Phone field. In this case, the merge fields are standard phone components for Home and Mobile.

   
   The data structure passed into the custom property editor vai automaticOutputVariables describes the automatically stored values. In our example, the flow has two standard phone components with the API names Home and Mobile, so Flow Builder passes this data into the custom property editor.
   

    "Home":[
           {
               "apiName":"label",
               "dataType":"string",
               "description":"The label that appears above the phone field.",
               "hasDefaultValue":true,
               "isRequired":true,
               "label":"Label",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1,
               "defaultValue":"Home"
           },
   
           {
               "apiName":"pattern",
               "dataType":"string",
               "description":"To require the value to follow a specific pattern, use the Inputs tab to set this attribute's value to a regular expression.",
               "hasDefaultValue":false,
               "isRequired":false,
               "label":"Pattern",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1
           },
           {
               "apiName":"placeholder",
               "dataType":"string",
               "description":"Text that appears in the field when it's empty. Use placeholder text to give users a hint about what to enter in the field.",
               "hasDefaultValue":false,
               "isRequired":false,
               "label":"Placeholder text",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1
           },
           {
               "apiName":"readonly",
               "dataType":"boolean",
               "description":"Prevents the user from modifying the value, but not from copying it.",
               "hasDefaultValue":false,
               "isRequired":false,
               "label":"Read Only",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1
           },
           {
               "apiName":"required",
               "dataType":"boolean",
               "description":"Requires the user to enter a value.",
               "hasDefaultValue":false,
               "isRequired":false,
               "label":"Required",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1
           },
           {
               "apiName":"value",
               "dataType":"string",
               "description":"The value of the phone field. To pre-populate the field, use the Inputs tab to set this attribute's value. To use the value elsewhere in your flow, use the Outputs tab to pass this attribute's value to a variable.",
               "hasDefaultValue":false,
               "isRequired":false,
               "label":"Value",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1
           }
       ]
       "Mobile":[
           {
               "apiName":"label",
               "dataType":"string",
               "description":"The label that appears above the phone field.",
               "hasDefaultValue":true,
               "isRequired":true,
               "label":"Label",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1,
               "defaultValue":"Mobile"
           },
           {
               "apiName":"pattern",
               "dataType":"string",
               "description":"To require the value to follow a specific pattern, use the Inputs tab to set this attribute's value to a regular expression.",
               "hasDefaultValue":false,
               "isRequired":false,
               "label":"Pattern",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1
           },
           {
               "apiName":"placeholder",
               "dataType":"string",
               "description":"Text that appears in the field when it's empty. Use placeholder text to give users a hint about what to enter in the field.",
               "hasDefaultValue":false,
               "isRequired":false,
               "label":"Placeholder text",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1
           },
           {
               "apiName":"readonly",
               "dataType":"boolean",
               "description":"Prevents the user from modifying the value, but not from copying it.",
               "hasDefaultValue":false,
               "isRequired":false,
               "label":"Read Only",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1
           },
           {
               "apiName":"required",
               "dataType":"boolean",
               "description":"Requires the user to enter a value.",
               "hasDefaultValue":false,
               "isRequired":false,
               "label":"Required",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1
           },
           {
               "apiName":"value",
               "dataType":"string",
               "description":"The value of the phone field. To pre-populate the field, use the Inputs tab to set this attribute's value. To use the value elsewhere in your flow, use the Outputs tab to pass this attribute's value to a variable.",
               "hasDefaultValue":false,
               "isRequired":false,
               "label":"Value",
               "isInput":true,
               "isOutput":true,
               "maxOccurs":1
           }
       ]
   }

5. Customize Markers and Control Map Behavior in lightning-map Base Component:- You can now make your map look and behave the way you want. Customize map locations to use your SVG image instead of the standard Google Maps markers, or define a shaded circle, rectangle, or polygon around a location. Modify or disable the zoom and dragging behavior, or disable the map controls altogether to create a static map.
   1. For example, say you want to create a simple locator map to show customers where to find your business. You can remove the zoom and Map | Satellite buttons, disable dragging, and add your own SVG to use a star for the marker.
   2. In your component, use the new options attribute to specify properties that enable or disable user interface controls. This example uses a mapOptions object in the component’s JavaScript to set the property values.
   3. In mapOptions, set the disableDefaultUI property, which disables zooming and removes the Map | Satellite buttons. To disable panning the map, set the draggable property.

      <template>
          <lightning-map
              map-markers={mapMarkers}
              options={mapOptions}
         ></lightning-map>
      </template>

   4. In mapMarkers, add the map icon property to the marker definition, and specify the SVG path property for a star. Add fillColorand and fillOpacity properties to set the color and opacity of the image fill. Add the strokeWeight property to set the line weight of the stroke drawn around the SVG image. Optionally, to determine the size of the image, set the scale property.

      import { LightningElement } from 'lwc';
      
      export default class LightningExampleMapCustomMarker extends LightningElement {
          mapOptions = {
                'disableDefaultUI': true // when true disables Map|Satellite, +|- zoom buttons
                'draggable': false, // when false prevents panning by dragging on the map
              };
      
          mapMarkers = [
              {   
                  location: {
                      City: 'San Francisco',
                      Country: 'USA',
                      PostalCode: '94105',
                      State: 'CA',
                      Street: '425 Mission St', 
                  },
                  mapIcon : {
                      path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
                      fillColor: '#CF3476',
                      fillOpacity: .5,
                      strokeWeight: 1,
                      scale: .10,
                  }
             }
          ];
      }

Formative Assessment:

I want to hear from you!  

What are your favorite Spring’21 Lightning Web Component gems? You can download release notes in HTML format!, for PDF files.

Let me know by Tweeting me at @automationchamp, or find me on LinkedIn.