---
schema_version: "1"
id: 894ba955688136b5f7d9ecc40dfab5e850fb2f0014be7390e9b2cc8701161b6e
title: Add Style to Your Toggles with the Repeater Widget
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/analytics/264-0-0/bi_dashboard_repeater_widgets_toggle.md
canonical_url: https://help.salesforce.com/s/articleView?id=analytics.bi_dashboard_repeater_widgets_toggle.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 3d2dad6a898c128b1a1b77a50609243df3af1a63ba2a96659dc4640a680608ff
description: Liven up your dashboard toggles using a repeater widget instead of a toggle widget. With a repeater widget, you can add images to provide visual cues for the available toggle states, change the text position, and add emoji to the text.
products:
  - CRM Analytics
  - Cross Cloud
release: "264"
---
# Add Style to Your Toggles with the Repeater Widget

Liven up your dashboard toggles using a repeater widget instead of a toggle widget. With a repeater widget, you can add images to provide visual cues for the available toggle states, change the text position, and add emoji to the text.

You can use the toggle at the top of this dashboard (1) to highlight the quantity sold in these three product categories. Each toggle option includes a photo representing the product category. When you click a toggle, that product category is highlighted in the bar chart (2).

![Dashboard preview with 2 numbered callouts showing that selecting a toggle highlights a bar in the chart](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/bi/images/bi/bi_dashboard_repeater_toggle_preview_callouts.png)

Here’s how you do it.

1\. Upload images to your gallery.

In the dashboard builder, use an image widget to upload the images that you want to use. You can place the image widget anywhere on the dashboard. Click the image icon in the widget to open the Select Image window. Follow the on-screen instructions to upload the first image. To add more images, click the image name in the Widget panel on the right of the dashboard builder.

After you upload all the images, copy their URLs to store in a text file for later use. In the Widget panel, click the image name to open the Select Image window. On the Gallery tab (1), right-click each image and select **Copy Image Address** (2). Paste the image addresses into the text file.

![Gallery tab in the Select Image window with 2 numbered callouts showing how to copy an image URL](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/bi/images/bi/bi_dashboard_repeater_toggle_gallery.png)

When you’re done copying the URLs, close the image widget.

1\. Create a query.

Use a compare table to create the query you want (1). In this example, for the data source, we use a dataset of quantities sold for each product category. For Group By, select the field that you want to associate with the toggle action (2). The grouping in this example is by product category.

![Create Query window with 2 numbered callouts](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/bi/images/bi/bi_dashboard_repeater_toggle_compare_no_photo.png)

3\. Add a column for the image URLs using Query Mode.

In Query Mode (1), create a SAQL statement to associate each product category with the appropriate image, and store the URL in a new Photo column (2). Use the URLs that you saved in the text file.

![SAQL statement with 2 numbered callouts showing the SAQL statement for adding the photo URLs](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/bi/images/bi/bi_dashboard_repeater_toggle_saql.png)

This SAQL statement was created for our example. Each product category is mapped to its image and added to the Photo column. You can use this statement as a model when creating your own.

```
q = load "SuperStoreSales";
result = group q by 'Product_Category';

result = foreach result generate q.'Product_Category' as 'Product_Category', count(q) as 'A', (case 'Product_Category'
   when "Furniture" then "https://example.com/file-asset/furniturejpeg?v=1"
   when "Office Supplies" then "https://example.com/file-asset/office_suppliesjpeg?v=1"
   when "Technology" then "https://example.com/file-asset/technologiejpeg?v=1"
   else "Unspecified"
end) as 'Photo';

result = order result by ('Product_Category' asc);
result = limit result 2000;
```

To confirm what you did, click back over to the compare table view. The image URLs are listed in the Photo column (1), and the new grouping is on the left (2).

![Compare table view with 2 numbered callouts showing the results of applying the SAQL statement](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/bi/images/bi/bi_dashboard_repeater_toggle_compare_with_photo.png)

4\. Design the repeater widget toggle.

Now design the repeater widget using the image URLs from the Photo column.

- Drag the repeater widget to the dashboard canvas.
- Drag your query from the right panel to the widget.
- Drag an image widget to the repeater. In the property panel, select **Photo** as the image source. Adjust the image scale to fit. Click **Done**.
- Edit the repeater content again. Drag a text widget to the repeater widget. In the Widget panel on the right, change the text to \[Product\_Category\]. Add color and style. To add an emoji, right-click in the text area. When you’re finished, click **Done**.
- Under Content Layout in the right panel, enter three items per line so that the toggle options for this example are displayed side by side.

That’s it! Save and preview the dashboard. When you click one of the toggles, the bar for that product category is highlighted.

![Preview of the completed dashboard showing the bar chart and toggles](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/bi/images/bi/bi_dashboard_repeater_toggle_preview.png)

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-bi-264-0-0-production-enus/ec791473-f5b4-4f64-a656-9104f455d966/images/icon_tip.png)

Tip Use the techniques in this example to add images to any of your queries.