CRM Analytics Configuration

Now that the Lightning Web Component code is ready to go, it’s time to bring the component into a CRM Analytics dashboard.

After pushing your code into a Salesforce org, go to the CRM Analytics dashboard designer and create a blank dashboard.

1. To create a dashboard component, drop a component widget () onto a dashboard.

2. Select the Lightning Components tab.

   If you don’t see this tab, you must enable this feature. For enablement information, see the Setup page.

   Note

3. Choose the Hello World Lightning Web Component that you created from the list.

4. To see the title attribute, expand the Component Attributes on the right-hand side. Type your name in the box, and then watch your code in action.

Let’s make your component dynamic by adding some user attributes. You can use SOQL with a filter by the current user token to grab any field from your user object. For this example, use the First.Name field.

1. On your dashboard, click Edit.

2. In the dashboard editor, click a blank space.

3. At the top-right, click the Create Query button.

4. Select the Salesforce Object tab.

5. Select the User object.

6. To edit the SOQL, click .

7. Paste this SOQL into the editor:

   1SELECT FirstName, COUNT(Id) FROM User WHERE Id= '!{User.Id}' GROUP BY FirstName ORDER BY FirstName ASC LIMIT 1

8. Name the query and click Done.import chartjsPluginSubtitle from ‘@salesforce/resourceUrl/chartJsPluginSubtitle’;

Now you have a query that returns one row containing the current user’s first name. Use the interactions UI to wire it into your step.

1. To bring up the query panel to the right, click a blank space on the dashboard.
2. Find your new SOQL query, and then from its dropdown menu, select Properties.
3. Click Advanced Editor.
4. Under Source Query, select your query.
5. For Source Data, choose cell, 0, and FirstName.
6. For Interaction Type, keep Result.
7. Optionally, add a default value in case no results are found. This example uses You.
8. Copy the interaction.
9. Save your work.
10. Click on your component and then click Advanced Editor in the Widget menu.
11. In the editor, paste the interaction as the title value and click Save.

Next. Try it out. You have a dynamic value automatically set by the current user viewing your content. If it’s not working, preview your results from the query panel to verify the data is coming back correct. To debug for typos, use the Advanced Editor, or cmd+e/CTRL+e to view the dashboard JSON.

Using bindings, you can create any dynamic value from existing queries and selections. Let’s make a set of discrete values that an end user can select that drives an attribute in your LWC code.

1. Drag a toggle widget onto the dashboard page.
2. To configure the widget, click the Toggle button.
3. At the bottom of the configuration menu, choose Create Custom Query.
4. Under the Display column, add a few options. This example uses the many names of Salesforce Analytics:
5. Click Done.
6. To show the Properties panel on the right, click your LWC Component.
7. Click Advanced Editor.
8. To create an interaction, choose the static query you created.
9. For Source Data, select cell, 0, and Display.
10. Choose a selection binding.
11. Optionally, add a default value in case no results are found. This example uses whoever the user is.
12. Copy and paste the interaction as the title value.
13. Save your changes.

And there you have it. Preview your dashboard to try it out. Select a name from the toggle and then watch your Lightning Web Component say “Hello” to that name.

Now that you have an understanding of attributes and configuration, feel free to add more to your widget. You can add style and CSS options to your component and expose them as attributes, such as Text Size, Text Color, or Background Color.

See Also

• Component Attributes
• Lightning Dashboards Configuration
• Query Data
• Other Widgets

j

Lightning Web Components in CRM Analytics and Lightning Dashboards

Hello World Component Example

Component Attributes

CRM Analytics Configuration

Lightning Dashboards Configuration

Query Data

Other Widgets

Reference

Release Notes

Previous Versions