Contents

  1. Home
  2. Contents
  3. How to Create a Card Widget
  4. Customizing the Card Widget

Customizing the Card Widget

Now that I have assigned data to my widget, I am going to click the “Properties” tab to customize it. First, I am going to change the widget’s name from “Sum of Amount Paid vs Sum of Amount” to “Payments Received vs Total Sales.”

option to rename properties tab from Sum of Amount Paid vs Sum of Amount to Payments Received vs Total Sales using the settings menu

 

Next, I will scroll down to the “Basic Settings” section and locate the “Secondary Value Type” drop-down list box. Selecting the “Variation” or the “Target Value” option will change my widget’s appearance.

Variation or the Target Value option allows card widget to change the widget’s appearance.

 

“Variation” is selected by default. When this option is selected, the widget shows the following information:

  • The dollar amount of payments I have received ($37,122)
  • The dollar amount of payments I have not received ($5,500)
  • The percentage of total sales dollars for which I have received payment (87.1%)

 

widget explores the result of the Variation option If I select “Target Value,” the widget shows the following information:

  • The dollar amount of payments I have received ($37,122)
  • The dollar amount of total sales ($42,622)
  • The percentage of total sales dollars for which I have received payment (87.1%)

 

widget explores the result of the Target Value option For this example, I am going to select the “Variation” secondary value type.

As I continue to scroll down the “Properties” column, I see a section titled “Behavior.” In this section, I can choose whether I would like a high value to be a positive or negative indicator. The box is checked by default, but if I uncheck it, some of the numbers in my widget will change from red to green.

In this case, a high value would initially seem to be positive; after all, I want to receive payment for my sales, so if I have received payment for 87% of my sales, that is a good thing. Even so, because I have not received payment for 100% of my sales, I want this number to stay red. Thus, I will leave the box checked.

Behavior option helps to customize the primary value of the widget

 

The “Behavior” section also contains a drop-down list box called “Primary Value Type.” By default, the “Percent of Target” option is selected, but selecting different options from this drop-down list box will allow me to further customize my widget by either changing the information it displays or changing the order in which certain pieces of data are arranged.

We will now explore each of the five options in this drop-down list box to see how they alter the card widget’s appearance.

primary Value Type shows five options in the drop-down list

 

Absolute Difference

If I select the “Absolute Difference” option in the “Primary Value Type” drop-down list box, my widget displays the following information:

  • The dollar amount of payments I have received ($37,122)
  • The percentage of total sales dollars for which I have not received payment (12.9%)
  • The dollar amount of payments I have not received ($5,500)

This option highlights the total dollar amount of payments that I have yet to receive, which is $5,500.

widget explores the Absolute Difference option in the Primary Value Type

 

Percent of Difference

If I select the “Percent of Difference” option in the “Primary Value Type” drop-down list box, my widget displays the following information:

  • The dollar amount of payments I have received ($37,122)
  • The dollar amount of payments I have not received ($5,500)
  • The percentage of total sales dollars for which I have not received payment (12.9%)

This option emphasizes the fact that I have not received payment for 12.9% of my total sales.

widget explores the Percent Of Difference option in the Primary Value Type

 

Percent of Target

If I select the “Percent of Target” option in the “Primary Value Type” drop-down list box, my widget displays the following information:

  • The dollar amount of payments I have received ($37,122)
  • The dollar amount of payments I have not received ($5,500)
  • The percentage of total sales dollars for which I have received payment (87.1%)

This option highlights the fact that I have received payment for 87.1% of  my total sales.

widget explores the Percent Of Target option in the Primary Value Type

 

Actual Value

If I select the “Actual Value” option in the “Primary Value Type” drop-down list box, my widget displays the following information:

  • The percentage of total sales dollars for which I have not received payment (13.79%)
  • The dollar amount of payments I have not received ($5,500)
  • The dollar amount of payments I have received ($37,122)

This option clearly illustrates that I have received a total of $37,122 in payments.

widget explores the Actual Value option in the Primary Value Type

Percent of Change

If I select the “Percent of Change” option in the “Primary Value Type” drop-down list box, my widget displays the following information:

  • The dollar amount of payments I have received ($37,122)
  • The dollar amount of payments I have not received ($5,500)
  • The dollar amount of payments I have not received ($5,500) divided by the dollar amount of payments I have received ($37,122), which is 12.90%.

 

widget explores the Percent Of Change option in the Primary Value TypeThis percentage value represents the difference between the “Sum(Amount)” and the “Sum(Amount Paid)” fields divided by the “Sum(Amount Paid)” field. Though it is not particularly useful for my purposes, it is worth keeping in mind in case you would like to use it in the future.

 

 

Now that I have seen the five different display options that are available for my card widget, I need to choose the one that is the best fit for my needs. I know that the “Percent of Change” option is not the best fit for the information I want to present, so I essentially have four options.

 

I can choose to emphasize the total amount of outstanding payments as either a numeric value or a percentage value ($5,500 or 12.9%). The “Absolute Difference” and “Percent of Difference” options would allow me to do this.

 

Alternatively, I can choose to highlight the total amount of payments I have received as either a numeric value or a percentage value ($37,122 or 87.1%). The “Percent of Target” and “Actual Value” options would allow me to do this.

 

I have decided to use the “Percent of Target” primary value type as I would like to easily see the percentage value of sales for which I have received payment. My completed card widget looks like this.

dashboard view explores the dollar amount of payments received and not received while hovering the widget

 

It is also worth noting that no matter which customization options you choose, you can always hover over your widget to obtain the key pieces of information you have chosen to display.

 

In this case, I can hover over my widget to see the dollar amount of payments I have received, the dollar amount of total sales, the dollar amount of payments I have not received, and the percentage of sales for which I have received payment.

series box in the card widget list various categories in the dashboard

 

Though my card widget now displays the information I want to highlight, there is one additional customization I can make so that the information will be even more detailed.

 

Right now, the widget shows my total sales numbers. This is because when I assigned data to the widget, I moved the “Sales Type” field into the “Series” box. Thus, my data is technically sorted by sales type, but as all of my sales are online sales, there is only one category. This means that the card widget simply shows the total amount of all of my sales.

 

However, if I add the “Product Name” field to the “Series box,” my data will be sorted according to the different products I offer.

Series box option shows the PlayerName field added

 

 

dashboard view shows the PlayerName field changes added to the Series box

After I drag the “Product Name” field to the “Series” box, my card widget immediately changes its appearance. It still displays the same information (the information I selected when I chose the “Percent of Target” primary value type). Now, however, the widget sorts the data by product.

 

I can now see the dollar amount of payments received, the dollar amount of outstanding payments, and the percentage values of sales dollars for which I have received payment for each product category.

 

If I would like to change anything else about my widget’s appearance—if I would like to change the color of high values from red to green, for example, or if I would like to update the primary or secondary value type drop-down list boxes to change the information that the widget displays—I need only click the “Properties” tab and follow the steps that we previously reviewed.

dashboard view with better results with Percent of Difference from the Primary Value Type drop-down list box

 

As a final example, let us say that I would like to change the “Primary Value Type” field from “Percent of Target” to “Percent of Difference.”

After I select “Percent of Difference” from the “Primary Value Type” drop-down list box, I am going to resize my widget by dragging its edges so that I can see all of my data without having to scroll.

In each product’s rectangle, I can see the dollar amount of payments received, the dollar amount of outstanding payments, and the percentage values of sales dollars for which I have not received payment for each product category.

 

How can we help?