How to Create a Grid Widget
Getting Started with Grid Widget
If you are a Bold BI Cloud user, log in to your cloud site account. If you are an Embedded BI user, open the Bold BI application installed on your server.
Click the “New Dashboard” button and select the “Blank Dashboard” option. A pop-up box will prompt you to configure a data source.
Bold BI has a great variety of sample data sources to choose from, and for this dashboard, I am selecting our 2018 World Cup data source.
Simply select the data source you would like to use and click “OK.”
Selecting the Grid Widget
Once you have chosen a data source, you can start selecting widgets. For this post, I am going to create a grid widget. These widgets allow you to display and sort tabular data in a straightforward, easy-to-read manner.
Assigning the Data to Grid Widget
First, I need to drag the grid widget from the “Relationship” section of the widget menu onto my dashboard. Then, I am going to resize it by dragging its edges so that it will be easy to read. This is what my grid widget looks like before I have assigned data to it.I would like my widget to display the number of goals scored by each player in the World Cup, and now that I have moved the widget to my dashboard, I can assign data to it. First, I will click the “Settings” icon in the upper right corner of the widget.
Next, I will click the “Properties” tab and change the widget’s name from “Grid1” to “Goals Scored by Player.”
Finally, I will click the “Assign Data” tab. I know that I want my widget to display the number of goals scored by each player in the World Cup, so I will drag the “PlayerName” and “Goals” fields over to the “Columns” box.
Changing the order of the fields in the “Columns” box will change the order of the columns on the widget. I would like the players’ names to display in the first column on my widget, so I will leave the fields in their current positions in the “Columns” box.
Now that my widget displays the desired information, I will customize it further and test its functionality.
Customizing the Grid Widget
If I click over to the “Properties” tab of the widget settings menu, I will find several widget customization options.In the “Basic Settings” section, I can choose whether I would like to allow sorting (this option is selected by default, and we will explore it in more detail later). I can also choose whether I would like my widget to allow me to click through multiple pages and whether I would like the horizontal and vertical lines of my table to be visible. In the “Header Settings” section, I can even change the background color and font color of my header.
After experimenting with these settings, I have decided to change my header background color to a custom shade of green by clicking the down arrow in the “Background” color box, selecting the “Switcher” box in the bottom left corner, and moving the cursor around the color swatch. I have also decided to remove the horizontal lines from my widget.
My widget now looks like this.
I would like to test the widget’s sorting functionality, but before I do, there is one more thing I would like to change. Currently, the columns of my widget display the names of the fields that I dragged to the “Columns” box (“PlayerName” and “Sum Of Goals”).
The column names accurately reflect the data they display, but they are field names—they are not the titles I would ordinarily give to my columns.
To revise my column names, I can scroll down to the “Column Settings” section of the “Properties” tab and click the “Edit Column Names” button. I can then type in the new column names and click “OK,” and the column names on my widget immediately change.
Now, I would like to test my widget’s sorting functionality. If I choose to allow sorting in the “Basic Settings” section of the “Properties” tab, I can sort my data according to either of the columns in my widget.
I can sort by the players’ names in ascending or descending order, or I can sort by the number of goals that were scored in ascending or descending order. To do this, I simply need to click anywhere in the header for the column by which I would like to sort.
For example, if I want the widget to display the most goals scored in descending order, I can click the “Goals” header. My first click displays the goals in ascending order, which is not what I want.
However, if I click the “Goals” header again, the goals will be displayed in descending order.
If you prefer to sort your data by player name, you can click the “Player” heading to display the names in ascending or descending alphabetical order.
As you can see, the simple but powerful grid widget allows you to easily display and sort key pieces of data, and you can even filter the data itself to customize the information the widget displays.
For example, if I want my widget to display only the top ten goal scorers in the World Cup, I can navigate back to the “Assign Data” tab, click the “Options” button that appears beside the “PlayerName” field, and click “Filter(s).”
Then, I can click the “Rank” checkbox, select “Top” from the “Mode” drop-down list box, change the “Count” option to 10, change the “Column” drop-down list box to “Goals,” and click “OK.”
Now, my widget will display only the top ten goal scorers from the World Cup. However, filtering the data has changed my sorting settings, so I will once again click the “Goals” header to sort by the number of goals that were scored in descending order.
