---
schema_version: "1"
id: 9214ff6609e151110436f1ca77e2eeb04d216e501fc1e3727703f930155403d9
title: Component Attributes
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/analytics/bi-dev-guide-lwc-in-db/guides/concept/bi-lwc-in-db-hw-example-attributes.md
canonical_url: https://developer.salesforce.com/docs/analytics/bi-dev-guide-lwc-in-db/guide/bi-lwc-in-db-hw-example-attributes.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 1e3bc283d1c35d234123cc69f2352e2ed1caccb700b11ffae4485d91ad96e2c5
products:
  - Lightning Web Components in CRM Analytics Dashboards
  - analytics
---

# 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:

```nolang
<targets>
    <target>analytics__Dashboard</target>
</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:

```nolang
<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:

```nolang
<targetConfigs>
    <targetConfig targets="analytics__Dashboard">
        <hasStep>false</hasStep>
        <property name="title" type="String" label="Title" description="Title of the component" required="true" />
    </targetConfig>
</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:

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

```nolang
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>

    <masterLabel>Hello LWC</masterLabel>
    <description>Test project for LWC.</description>

    <targets>
        <target>analytics__Dashboard</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="analytics__Dashboard">
            <hasStep>false</hasStep>
            <property name="title" type="String" label="Title" description="Title of the component" required="true" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

```

**note:** 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.

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:

```javascript
import { LightningElement, api } from "lwc";

export default class HelloWorld extends LightningElement {
  @api title;
}
```

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.

```html
<template>
  Hello World: {title}
</template>
```

**See Also**

- [CRM Analytics Configuration](https://developer.salesforce.com/docs/analytics/bi-dev-guide-lwc-in-db/guide/bi-lwc-in-db-hw-example-config.md)
- [Lightning Dashboards Configuration](https://developer.salesforce.com/docs/analytics/bi-dev-guide-lwc-in-db/guide/bi-lwc-in-db-hw-example-lightning-dashboard-config.md)
- [Query Data](https://developer.salesforce.com/docs/analytics/bi-dev-guide-lwc-in-db/guide/bi-lwc-in-db-hw-example-query-data.md)
- [Other Widgets](https://developer.salesforce.com/docs/analytics/bi-dev-guide-lwc-in-db/guide/bi-lwc-in-db-hw-example-other.md)