How to Create a Grid Widget Using the New Widget Builder

Background information

The new Widget Builder integrates all widget configuration options on a single page.

• By centralizing the management of all configuration options, users no longer need to switch between various pages, saving time and effort, enhancing user experience, improving work efficiency, and simplifying the operation process.
• This integrated design is easy to use and makes the configuration process more intuitive and efficient.  

When to use Grid widget

• When you need to visualize data and show relationships and patterns between data.
• When you want to display structured data and compare or categorize data in rows and columns, allowing readers to easily find and understand information.

For example, when you need to show the sales department's monthly sales data changes, you can use a grid chart to present it. Through the grid chart, you can clearly see the sales figures for each month, the sales of each product, and the sales trends.

Required permissions

Only users with admin roles can access the New Widget Builder and edit the widget settings. 

1. Access New Widget Builder

1.1 Create a new Grid widget using the New Widget Builder

1. Navigate to Widgets on the MSPbots app menu and click New Widget. 
   
   
   
   
2. Choose the Grid widget type on the New Widget window. 
   
   
   
   
3. Turn on the Try New Widget Builder switch.
   
   
   
   

1.2 Configure an existing widget using the New Widget Builder

1. Navigate to Widgets on the MSPbots app menu.
2. Search and click the widget to open it.
   
   
   
    
3. Turn on the Try New Widget Builder switch.
   
   

2. Add datasets

1. In the Dataset tab, Click the + Dataset button.
   
   
    
2. Select a dataset with the data you need, then click Add Selected.
   
   
    
   Click Dataset name bar to show the fields in the dataset.
   
   
    

What else can you do in the Dataset section?

• Search fields - Use keywords to search for the fields you need.
  
   
   
• Order By - Sort all data from the added datasets based on the selected fields and sorting rules. 
  
   
   
  1. Fill in the Field and Order By rules.
     
     
      
  2. Click Save.
     
      
• Row Limit - Select an option to limit the rows of data for all added datasets.
  
   
   
• Replace the dataset with another one you want.
  1. Hover over the name of the dataset.
  2. Click the ellipsis    button, then select Select.
     
      
      
  3. Click your desired dataset and click Add Selected.
     Replace the dataset with one that matches the structure of the original dataset. For example, a dataset that only differs in field data values is essential to avoid error reports and widget malfunctions.
     
     
     
      
• Rename, Clone, or Delete the dataset
  1. Hover over the name of the dataset.
  2. Click the ellipsis    button, then select Rename/Clone/Delete.
     
      
      
     • When you hover over the dataset, it displays the original name of the dataset. 
        
        
     • If you have renamed the dataset, hovering over it displays both the original name and the name you renamed it to.
       
       
        

   *   If you want to add a Calculate Layer, refer to Adding a Calculate Layer to a Widget.
   *   When you add a dataset with fields next to the triangle icon, it indicates that the field is associated with other datasets. 
   *   The fields in the associated datasets can be dragged or added to the widget configuration area for settings. 
   *   If you configure fields from the associated dataset in Query, Drill Through, or Options, the Widget Builder mode will stay in the New Widget Builder mode and cannot switch back to the original mode. You can switch back to the original mode only after you clear the fields from the associated dataset.


 

3. Set filters for the dataset

1. Data Scope

• When the dataset you are configuring has only one layer, this option is not editable. Skip this option and proceed to the next step.
• When the dataset you are configuring has multiple layers, select a layer you want to configure.
  
  
   
  • How to check the number of layers in the dataset you are configuring?
    1. Search for the dataset you are setting up in Datasets and edit it. 
       
       
        
    2. Click Layer to see how many layers there are.
       
       
        

2. Query
 

 

1. Click Query bar to show the settings.
   
   
    
2. For Measure - Configure the fields to be calculated and the formula for calculating measures.
   1. Drag the required fields from the Dataset column to the Measure area, or click the    button to add a measure.
   2. Configure the following fields:
      1. Fields - Select a computation option from the Fields dropdown. 
      2. Alias - Type an Alias for the measure.
      3. Select one from Formula, Format, or Custom SQL to set.
         • Formula
           • Summarize Type - Select a Summary Type.
             • sum
             • count
             • avg
             • max
             • min
             • string_agg
               
               
                
         • Format
           1. Format Type - Select a Format Type.
              • Text
              • Number
              • Date
              • Date Time
              • Yes/No
              • User
              • Hyperlinks
           2. Display Type
           3. Symbol - When the Display Type is Prefix, set the Symbol. The symbol displayed before the value. For example, if you enter $, it will be displayed as $888.
           4. Decimals - Enter the number of decimal places. 0 represents an integer, such as 1; 1 represents one decimal place, such as 1.1; 2 represents two decimal places, such as 50.21%.
              
              
               
         • Custom SQL
           • Enter your SQL in the Calculate Measure.
           • Save promptly after entering the SQL. If you switch to Formula or Format without saving, the SQL will be automatically cleared.
      4. Remove duplicate data - If you want to remove duplicate data when calculating data, please check this option.
   3. Click Save.
3. For Dimension - Configure the fields and format you want to be displayed as a group.
   1. Drag the required fields from the Dataset column to the Dimension area, or click the    button to add a dimension.
   2. Configure the following fields:
      1. Fields - Select a grouping option from the Fields dropdown.
      2. Alias -Give an Alias for the dimension.
      3. Format
         • Format Type - Select a Format Type.
           • Text
           • Number
           • Date
           • Date Time
           • Yes/No
           • User
           • Hyperlinks
         • Display Type
      4. Custom SQL
         • Calculate Measure
   3. Click Save.
      
      
       
4. For Filter - Add conditions for filtering fields.  
   1. Click the    button.
   2. Select the fields you want to filter.
   3. Set conditions for each field using the subsequent two dropdowns.
      For a guide on each option on the list, refer to the article What Filter Conditions and Formats are Available for Creating Widgets.
   4. Select the logical operator AND or OR for the filter group.
   5. If you want to add multiple conditions or groups, click either + Condition or + Group to add.
      
      
       
   6. Click    to set advanced settings. 
      • Case SenSitive - Configure whether to be case-sensitive when filtering the fields.
      • Slicer - Configure whether to set Slicer.
        
        
         
        1. If you want to add a slicer, turn on the Slicer switch.
           
           
            
        2. Select a slicer from the dropdown list.
           • Ignore Filter - When the Ignore Filter option is checked, the value field will be grayed out. Only the column field and query string need to be filled in. And only the slicer will be effective.
             
             
              
   7. Filter Inspector - Click Filter Inspector to check the filter settings by viewing the Filter Expression and Filter SQL.
      
      
      
      
       
   8. Click Save.
      
      
       
5. For Order By - Sort the data of a specific layer in a certain dataset based on the selected fields and sorting rules. 
   1. Click + Click to Add.
   2. Configure the following fields:
      • Field - Select a parameter to sort the data. 
      • Order By
        • Ascending
        • Descending
   3. Click Save. 
      
      
       
6. Row Limit - Select an option to limit the data rows for a specific layer in a certain dataset.
   
   
    
7. Remove duplicate data - If you want to remove duplicate data, select this option.
   
    
8. Materialized - Select an option from the Materialized dropdown menu to materialize data based on the actual conditions.
   
   
    

3. Drill Through

1. Click Drill Through bar to show the settings.
   
   
    
2. Column - Configure which fields are included in the widget.
   1. Drag the required fields from the Dataset column to the Column area, or click the    button to add a condition.
   2. Configure the following fields:
      • Field
      • Alias
      • Format
        • Format Type
          • Text
          • Number
          • Date
          • Date Time
          • Yes/No
          • User
          • Hyperlinks
        • Display Type
      • Custom SQL
   3. Click Save.
      
      
       
3. Order By - Sort the data from drilling through a specific dataset based on the selected fields and sorting rules.
   1. Drag the required fields from the Dataset column to the Order By area, or click the    button to add a field.
   2. Fill in the following fields:
      • Field
      • Order By
        • Ascending
        • Descending
   3. Click Save.
      
      

4. Clear Query

When you want to clear all fields in Query and Drill Through at once, you can click the Clear Query button to avoid deleting them individually.

1. Click Clear Query at the bottom of the page.
   
   
    

2. Click Continue.
   
   

    

4. Set the Options for the widget

4.1 Chart Type

Switch widget types by clicking the icon of your desired widget type.

The available types for switching in New Widget Builder mode are:

• Card Number
• Grid
• Column Chart
• Line Chart
• Heatmap
• Pie Chart
• Progress Tracker
• Pivot Table
  
  
   

4.2 Toolbar

1. Click Toolbar bar to show the settings.
2. Display - Activate the switch to display the toolbar at the top of the widget.
   
   
   
   
3. CSV - Activate the switch to show the CSV Export button on the widget toolbar. 
   
   
   
   
4. PDF - Activate to show the PDF Export button on the widget toolbar.
   
   
   
   
5. Export Option - This option applies only when the PDF is the option selected for Toolbar. 
   • If enabled, clicking PDF Export will show the following export options:
     • Page orientation: 
       • Portrait - vertical
       • Landscape - horizontal
     • Page size - Select the appropriate size. 
     • Export Data - Select the pages for inclusion in the exported CSV file.
       
       
       
       
   • If disabled, clicking PDF Export, will export the PDF file with the following default settings:
     • • Page orientation - Portrait
       • Page Size - A4 
6. Column Chooser - Click the switch to show the Column dropdown list on the widget toolbar. 
   
   
   
   

4.3 Body

1. Click Body bar to show the settings.
2. Grid Style - Select the style of the grid widget, including Data Grid, Table, List.
   
   Which fields are supported by the three Grid Styles for configuration?
   
   

   Is support configured?	Data Grid	Table	List
   Font Size	Yes	Yes	Yes
   Border	Yes	No	No
   Column Width Fits	Yes	Yes	No
   Content	Yes	Yes	No
   Stripe	Yes	Yes	Yes
   Auto Scroll	Yes	Yes	No

3. Font Size - Set the font size for the text in the table. 
4. Border - Configure the display of lines in the data area of the widget.
   • - Show both horizontal and vertical lines
   • - Only show vertical lines
   • - Only show horizontal lines
   • - Do not show lines
5. Column Width Fits Content - Set the column width to display based on the length of the content.
6. Stripe - Configure if the rows of the widget are displayed in a striped style.
7. Auto Scroll -Turn on the switch, the widget will scroll automatically.

4.4 Footer

• Pagination - Configure whether pagination is displayed in the bottom of the widget.
  
  
  
  

4.5 Customization

Configure the columns you selected in the Drill Through. 



 
 

Editing a column

1. Click Customization bar to show the settings.
2. Click    to edit a column.
3. Configure the following options.
   
   
    
   • Header Title - Assign a column name.
   • Tooltips - Add a tooltip for the column.
   • Text Align - Set alignment to Left, Center, or Right.
   • Allow Filter - Toggle to allow users to filter the column.
   • Disable HTML - Turn on the Disable HTML toggle switch to disable the use of HTML codes. This toggle switch is enabled by default.
     • When the Disable HTML switch is turned on, if the field's content exceeds 300 characters (including spaces and punctuation), the text will be trimmed to 300 characters. To see the complete content of the field, hover over the field in the widget, and a tooltip will appear to display the full content.
       
       
        
       • If you encounter excessive content in the field or if your HTML codes are not working properly, please turn on the Disable HTML switch to ensure it functions correctly and to avoid performance issues that may cause PDF generation to fail.
     • When the Disable HTML switch is turned off, there are no restrictions on the character count of the field content, but excessive characters may lead to performance issues.
   • Max Width - Set the width for the column.
   • (Optional) Aggregates - When the column type is Number, calculate the values in the column. The calculation result is displayed at the bottom of the widget.
     1. Click + Add button.
     2. Choose one of the following calculation methods:
        • Sum - Calculates the sum value.
        • Min - Finds the minimum value.
        • Max - Finds the maximum value.
        • Count - Counts the number of items.
          
          
           
        • Average - Calculates the average value.
          • When you select Average as the Aggregates, you can customize the precision of the Number Format. There are five options for precision: 0, 0.0, 0.00, 0.000, 0.0000.
            
            
             
4. Click Save.

Hiding a column

• Click button to hide a column.
  
  
   
• If you want to display the hidden column, click button to show it.
  
  
   

Adjusting the column order

You can adjust the order of the columns by dragging and dropping, and the changes will be applied to the widget immediately.


 

5. Conditional Formatting

If you want to change the text or background color when the fields meet specific conditions, or display as an icon, set a conditional formatting rule for your widget.

 
 

1. Click Conditional Formatting bar to show the settings.
2. Click the    button.
3. Configure the following fields:
   1. Name
   2. Field
   3. Value
   4. Color Cell - Select the format to be applied once conditions are satisfied. You can apply color to a cell or row.
      • Background Color
      • Text Color
      • Icon
   5. Color Entire Row
      • Background Color
      • Text Color
4. Click Save.
   
   
    

6. Save your settings

1. Click the    button in the upper right corner.
   
   
    
2. Fill in the following fields.
   • Name
   • Description
   • More Info
   • Tag
   • Role
     
     
      
3. Click Save.

   New widgets are at the bottom of dashboards, scorecards, and reports. When you save a new widget, the screen will automatically scroll to show where the new widget is.

   You can edit the dashboard design by modifying the widget's placement in the dashboard.

What other actions are available from the widget's screen in the new Widget Builder?

Switching to the original Widget Builder

If you want to switch back to the original Widget Builder page, click to open the Unsaved Changes pop-up window.

• If you do not want to save the settings in the New Widget Builder, click Leave without Saving.
• If you want to save the settings in the New Widget Builder, click Save Changes.
  
  

Creating a bot from the widget

1. Click   > Create Bot.
   
    
    
2. For more details on creating a bot, see How to Create a Bot from a Widget in New Widget Builder mode.

Creating a filter for the widget

The filter is for secondary filtering of the data filtered in the Dataset.

1. Click   > Filter.
   
    
    
2. Select a field you want to filter.
   
   
    
3. Set a condition for the field using the subsequent two dropdowns. For descriptions of each option, refer to What Filter Conditions and Formats are Available for Creating Widgets.
4. If you want to add multiple filter conditions,
   1. Click the Add icon and choose either Add Condition or Add Group.
      • Add Condition - Add a filter condition.
      • Add Group - Add a condition group.
        
        
         
   2. Repeat steps 2 and 3.
5. Select the logical operator AND or OR for the conditions or filter groups.
   • AND - Conditions within a group or groups are connected by an AND relationship, which requires that all conditions or groups must be fulfilled.
   • OR - Conditions within a group or groups are connected by an OR relationship, which means that only one of the conditions or groups needs to be fulfilled.
6. Click ok to keep your settings.
   
   
    

Cloning the widget

1. Click the    button in the upper right corner.
2. Hover over Clone to and select from:
   • Clone to "My Widgets"
   • Clone to Existing Dashboard
   • Clone to New Dashboard
     
      
      
3. Follow the steps below:
   • If you select Clone to "My Widgets",
     1. Fill in the following fields:
        • Name
        • Role
        • Description
          
          
           
     2. Click Confirm to clone the widget as a new widget.
   • If you select Clone to Existing Dashboard,
     1. Select a existing dashabord from the list.
        
        
         
     2. Click Clone.
     3. The page will redirect to the editing mode of the existing dashboard. For more information on how to edit the dashboard, see How to Create and Use Dashboards in MSPbots. 
        You can also find the cloned widget in My Widgets category in Widgets.
   • If you select Clone to New Dashboard,
     1. Select Dashboard or Report.
        
        
         
     2. For more information on how to edit the dashboard or report, refer to the below articles. 
        • How to Create and Use Dashboards in MSPbots
        • How to Create and Use Reports in MSPbots 
          You can also find the cloned widget in My Widgets category in Widgets.

Deleting the widget

1. Click More Options , and then select Delete.
   
    
    
2. Click Confirm.
   
   

Sharing the widget

1. Click the Share icon to copy the URL of the widget.
   
   
    
2. The message Copy Success indicates that the copy was successful and you can share the URL with others who want to view the widget.
   
   

Adding the widget to My Favorites

Click the   button in the upper right corner to add the widget to My Favorites.


 

• When   changes to  , it means the addition was successful.
• After that, you can find the widget in the My Favorites tab.
  
  
   
• If you want to remove it from My Favorites, click   to change it to  .