Introducing the Repeater Widget

4.9
(13)

Tables are everywhere. They’re unequaled as a way to organize and present data clearly. But they’re not as flexible or compelling as other types of visualization. With a table, you’re confined within cells that have limited options for display and styling. The limitations apply to any basic tables, including those in Tableau CRM.

That’s why we’ve built a new repeater widget that provides the layout flexibility of dashboards and the styling capabilities of widgets, all powered by a query. 

The intent of the repeater widget is not to replace tables. It’s to provide a new way of visualizing your tabular data. The power resides in the limitless layouts you can build and in the richness of the styling possibilities. It is up to you to decide the position and size of each element that will be part of your repeater widget.

Let’s dive in!

Repeater widget modes

When setting up a repeater widget in the dashboard editor, you have access to two modes, each with a different level of configuration.

Standard mode

Standard mode is the same as for all other widgets. In this mode, you control overall repeater widget settings, including layout, cell padding, and style.

Focus mode

Focus mode is where all the editing of the repeater content happens. In this mode, you have access to four widget types (text, number, image, and chart). You can drag them to the repeater widget grid and then size and style them just like you would on the dashboard grid.

Use cases – The leaderboard

Let’s start with a leaderboard for your sales or service agents. Leaderboards are a great way to highlight the top 3 to 5 leaders in a specific domain.

For this use case, we’ll focus on building a one-card layout. The completed widget will automatically pull in all of your data and fit it in the layout that you design.

Let’s take a closer look at building the widget.

Before you read how you can create and edit a repeater widget, let’s take a quick look at the demo of the same.

Now that you have watched the video, the steps below should be easier to follow.

Note: If you want to watch a more detailed video on the repeater widget, you will find it here.

1. Set up your query

Drag and drop a repeater widget to your dashboard grid (1) and then choose a query to power it (2).

The query building panel opens up so you can choose the fields (or columns) to include in your widget. Choose the fields that you want to share with the dashboard users.

You can use any visualization in the query builder, but to get a clear view of the available fields, we recommend that you use tables.

Note: If you want your cards to be selectable you should use a visualization that supports it such as compare tables.

You can also use this time in Explorer to add style to your repeater widget by setting up conditional formatting on the desired fields. When the query looks good, it’s time to dive into the new widget.

If you forget to add or remove a field, no worries. You can edit the query that powers the repeater at any time.

2. Set up your repeater layout

You’re now in focus mode, where you build the layout of your widget. The right property panel has settings to modify the grid and card properties of the widget. These settings provide a high level of control when designing and styling your widget. If the widget size doesn’t look good for your layout, click Done in the top right corner and then resize it. To return to focus mode, click Edit repeater content.

As a tip, I would recommend using the “fine” grid mode as it will provide a finer level of control for the size of your widgets.

3. Configure your widgets

To build the layout, use the text, image, and chart widgets on the left sidebar.

Start by dropping an image widget in the top left corner for an icon of our sales representative. Then add a text widget to show the sales rep’s name next to their picture. Below, add a text widget with two dynamic fields to show the opportunity name they’re driving and the amount it represents. All the familiar widget properties are available, including rich text (for the text widget) and styling.  Finally, add a flat gauge chart to show the account’s annual revenue, and use the min and max range properties of the chart widget to make it look suited to your data.

4. Repeat it! 

Now adjust the size of your widget so it looks good, and you’re ready for the magic.

For each data row in the query, your customized layout repeats in a scrollable list in the dashboard. That’s why it’s called a repeater widget. So if your query has more than one row of results and you go to view mode, you find that all the rows are shown with your new layout design.

Often some additional adjustment is needed when you see the rows together. You can edit your repeater widget again to increase the width and expand the content layout section. Modify the “Items per row” property to fit the space you want to allocate to your repeater and the space the layout requires. Try experimenting — the best solution depends on the look you want to create. Other properties, like cell padding and widget style, can help you fully customize your repeater widget.

Last but not least, you can take your leaderboard a step further by making it “personalized”.

As an example, you could embed the dashboard on a product page and add a filter to see leaderboard by the current product, or add dynamic start values to see it by “My Team”, you can also add a default view to make it completely personalized.

Use cases – the toggle

Another example is how to use the repeater as a toggle widget. This use case isn’t the main intent of the widget, but it lets you take advantage of more styling capabilities.

Start by creating a query as a compare table. A compare table allows you to make selections on the repeater widget to pass to the rest of the dashboard. You can add the field you want to display as toggle buttons in the “Group by” section. 

Next, add the query to a repeater widget and use a text widget to display the fields you added to the query. You can even add an image widget powered by an extra column with static images.

Here you have it. You’ve created a clickable button to facet the rest of the dashboard. You can now style the widget and the selected card with color, position, and even add emojis.

These are just two examples of what a repeater widget can be used for. We’ve built it to provide as much freedom and styling as you could imagine. So go out there, get creative, and share your beautiful repeater widgets with your community!

Lastly, we would love to make it even better. So reach out to me here or find me on TCRM trailhead group and share your use cases and feedback.

How useful was this post?

Click on a star to rate useful the post is!

Written by


3 thoughts on “Introducing the Repeater Widget”

  • 1
    Prathyusha on February 15, 2022 Reply

    Hello Arthur,
    Is there a possibility to apply conditional formatting for flat gauge chart in repeater widget?
    I do not see that from UI and tried from advance editor too but it doesn’t apply.
    Thanks in advance!

  • 2
    Arthur Fabre on February 23, 2022 Reply

    Hi Prathyusha,

    Thank you for the question, and the answer is not yet. This is something we did not manage to fit in our GA version of the repeater. But it definitely is on our enhancement list.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.