Component Attributes

You can convert any Lightning Web Component into a CRM Analytics Lightning Web Component by adding specific attributes.

The Lightning Web Component framework requires a special tag to know your component is compatible for use in CRM Analytics dashboards. Let’s start by adding this XML to your js-meta.xml file:

1<targets>
2    <target>analytics__Dashboard</target>
3</targets>

The target attribute informs the designer UI that this widget is compatible with CRM Analytics and Lightning dashboards, and allows the component to show up in the component selector. This stage in the process is also a good time to make sure your component widget is visible. To enable visibility, check out this line in the js-meta.xml:

1<isExposed>true</isExposed>

Now any dashboard author can add your widget after it’s published to an org, but you also want to expose configuration options. To do that, create an attribute:

1<targetConfigs>
2    <targetConfig targets="analytics__Dashboard">
3        <hasStep>false</hasStep>
4        <property name="title" type="String" label="Title" description="Title of the component" required="true" />
5    </targetConfig>
6</targetConfigs>

Here, you set hasStep to false because you aren’t using any query data. You’re adding a single attribute title, which is type String, so that the dashboard author can type any free text to configure. Set required="true" so that authors can’t make blank components. When you’re done, the whole file looks something like:

In Lightning dashboards, the <hasStep> tag is always set to false since the custom Lightning web components don’t query any data.

Note

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>53.0</apiVersion>
4    <isExposed>true</isExposed>
5
6    <masterLabel>Hello LWC</masterLabel>
7    <description>Test project for LWC.</description>
8
9    <targets>
10        <target>analytics__Dashboard</target>
11    </targets>
12
13    <targetConfigs>
14        <targetConfig targets="analytics__Dashboard">
15            <hasStep>false</hasStep>
16            <property name="title" type="String" label="Title" description="Title of the component" required="true" />
17        </targetConfig>
18    </targetConfigs>
19</LightningComponentBundle>

Your API version can be different so that it matches the version of the Salesforce org that you’re developing your Lightning Web Component for.

Note

To wire up the component, start by adding these attributes with @api annotations in your .js file. After you add them, the .js file looks like:

1import { LightningElement, api } from "lwc";
2
3export default class HelloWorld extends LightningElement {
4  @api title;
5}

You don’t use any custom logic in this example, so no additional code is needed. You do need your component to say hello, so edit the HTML template in the .html file.

1<template>
2  Hello World: {title}
3</template>

See Also