Design Attribute in Lightning Web Component

Aura Component Bundle Design Resources controls which attributes are exposed to builder tools like the Lightning App Builder, Community Builder, or Flow Builder. What if we want the design attribute in Lightning Web Component? How we can specifies a public property of a Lightning Web Component that can be set in Lightning App Builder, App Manager, Lightning Flow Builder, or Community Builder?

Why Design Attributes plays a significant role?

It allows you to build reusable and dynamic components

How to use Design Attribute in Lightning Web Component?

First understand some Key Words. They are:-

targetConfigs :- Configure the component for different page types and define component properties. For example, a component could have different properties on a record home page than on the Salesforce Home page or on an app page.
targetConfig :- Use a separate targetConfig for each different page type configuration. Specify one or more page types in the targets attribute, such as <targetConfig targets="lightning__RecordPage"> or <targetConfig targets="lightning__RecordPage,lightning__AppPage">.
property :- Specifies a public property of a component that can be set in Lightning App Builder, App Manager, Lightning Flow Builder, or Community Builder. The component author defines the property in the component’s JavaScript class using the @api decorator.
datasource :- Renders a field as a picklist, with static values. Supported only if the type attribute is String.
description :- Displays as an i-bubble for the attribute in the tool.
default :- The default value for the attribute.
label :- Displays as a label for the attribute in the tool.
type :- The attribute’s data type.
name :- Required if you’re setting properties for your component. The attribute name. This value must match the property name in the component’s JavaScript class.

The Lightning web component bundle consist three files in its bundle.

The migratedesignAttributeToLWC.js-meta.xml have the Configuration File Tags. The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Community Builder.

Example of design attribute in Lightning web component

migrateDesignAttributeToLWC.html

The html file has progress indicator component with properties current-step, type and variant. We will expose these attribute to Lightning App Builder as pick list.

<template>
  <lightning-progress-indicator
    current-step={currentStep}
    type={type}
    variant={variant}
  >
    <template for:each={steps} for:item="step">
      <lightning-progress-step
        label={step.label}
        value={step.value}
        key={step.label}
      ></lightning-progress-step>
    </template>
  </lightning-progress-indicator>
</template>

migrateDesignAttributeToLWC.js

To expose an property to Lightning App builder, the property must be annotated with @api decorator. Hence, the properties in js file have been annotated with @api. When you annotate a property with @api decorator, it becomes reactive in nature. The component re-render itself whenever reactive property changes.

import { LightningElement, api } from "lwc";

export default class MigrateDesignAttributeToLWC extends LightningElement {
  @api currentStep = "step-1";
  @api type = "base";
  @api variant = "base";
  steps = [
    { label: "Contacted", value: "step-1" },
    { label: "Open", value: "step-2" },
    { label: "Unqualified", value: "step-3" },
    { label: "Nurturing", value: "step-4" },
    { label: "Closed", value: "step-5" }
  ];
}

migrateDesignAttributeToLWC.js-meta.xml

This is the configuration file of the component. We have used targetconfig which supports property tag. The property tag specifies a public property of a component that can be set in Lightning App Builder, App Manager, Lightning Flow Builder, or Community Builder. We have exposed currentStep, type and variant property to tools like Lightning app builder. Admin can set their values while adding the component on the Lightning page.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="migrateDesignAttributeToLWC">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Migrate Design Attribute to LWC</masterLabel>
    <description>This component shows ability to expose public property to Lightning App Builder, App Manager.</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage,lightning__AppPage,lightning__HomePage">
            <property name="currentStep" type="String" datasource="step-1,step-2,step-3,step-4,step-5" />
            <property name="type" type="String" datasource="base,path" />
            <property name="variant" type="String" datasource="base,shaded" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Demo