Creating a Grid Widget

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.



Watch this video or follow the procedure below to create a grid-type widget in MSPbots.

How to create a Grid widget 

1. Navigate to Widgets on the MSPbots app menu and click New Widget. 
   
   
   
   
2. Choose the Grid widget type in the New Widget window. 
   
   
   
   
3. When the Widget Builder window opens, go to the Basic Setting tab. Provide the following and click Apply:
   • Name - Give the widget a name.
   • Description - Give the widget a short description.
   • More Info
   • Role - Select the roles that will have access to the widget.
   • Tag 
     
     
     
     
     If you want to create or edit a Grid widget using the New Widget Builder mode, refer to How to Create a Grid Widget Using the New Widget Builder.
     
     
     
     
4. Click    to go to the Dataset tab. Click the + button. 
   
   
   
   
5. Select New Layer.
   
   
   
   
6. In the Dataset window,
   
   1. Select the Dataset with the data you need. 
      
      
      
      
   2. (Optional) Enter a datasource name in the Show datasource name as field. 
   3. For Columns Display,
      1. Go to the Column Name dropdown and select a field for the drill-through. 
         
         
          
      2. Give an Alias and select a Business Type for your selection. 
      3. Click the + button to add more rows.
   4. For Filter,
      1. Click the + icon and choose either Add Condition or Add Group. 
         
         
         
         
         
         
      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 What Filter Conditions and Formats are Available for Creating Widgets.
      4. Select the logical operator AND or OR for the filter group. 
         
         
         
         
   5. For Measure,
      1. Click the + button corresponding to Measure. 
         
         
         
         
      2. When the Measure window opens, select a Summary Type.
      3. Select a computation option from the Fields list.
      4. Type an Alias for the measure.
      5. Select a Format Type.
      6. Click Add.
         
         
         
         
   6. For Dimension,
      1. Click the + button sign corresponding to Dimension. 
         
         
         
         
      2. Select a grouping option from the Fields dropdown.
      3. Give an Alias for the dimension.
      4. Select a Format Type.
      5. Click Add. 
         
         
         
         
   7. For DrillThrough Order By,
      1. Click the + icon.
      2. Select a parameter to sort drill-throughs automatically. 
         
         
         
         
   8. For Order By (Optional)
      1. Click the + icon. 
      2. Select a parameter to sort the data. 
          
         
         
         
   9. Row Limit - Select an option to set a limit on how many rows of data will be shown. (Optional) 
      
      
      
      
   10. Remove duplicate data - Select this option if you have duplicate data to delete. 
       
       
       
       
   11. Materialized - Select an option according to your requirements. 
       
       
       
       
   12. Click Save to keep the Dataset configuration. 
       
       The optional settings Order By and Row Limit are also available in the Widget Builder window. The settings configured in this area are applied to the grid widget. If the configurations were done in the Dataset window, the settings are applied to the drill-down. 
       
       
       
       
7. Go to the Config tab and configure the following settings: 
   1. Under Grid Option: 
       
      
      
      
      • Grid Lines - Select the type of grid lines to use for the table. (Default, Both, None, Horizontal, Vertical) 
      • Toolbar - Select the file types for the export feature. 
        • PdfExport
          
          
          
          
        • CsvExport
          
          
          
          
        • ColumnChooser
          
          
          
          
      • Show Paging - If toggled on, this will show the paging settings at the bottom of the table. 
        
        
        
        
      • Show Toolbar - If toggled on, this will show the toolbar at the top of the table. 
        
        
        
        
      • Column Width Fits Content - Set the column width to display based on the length of the content.
      • Auto Scroll -Turn on the switch, the widget will scroll automatically.
      • Show 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. 
            
            
            
            
        • If disabled, clicking PDF Export, will export the PDF file with the following default settings:
          • • Page orientation: Portrait
            • Page Size: A4 
      • Font Size - Set the font size for the text in the table. 
      • Grid Style - Select the style of the grid for the table.
      • Alternate row colors - If toggled on, a background color will be displayed for every alternate row.
   2. Under Columns Setting, edit the following options for each column:
      • Header Text - Assign a column name.
      • Header Tooltip - Add a tooltip for the column.
      • Text Align - Set to the Left, Center, or Right. 
      • Allow Filtering - 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. 
      • Aggregates - Select if the column's total will be included at the bottom of the table (Sum, Count, Avg, Min, or Max). 
      • Number Format only Set how many decimal places will be shown for the aggregate. (This is available only if Avg is selected.) 
        
        
        
        
8. Lastly, add conditional formatting under the Condition tab.
   
   
   
   
   1. Click the +Add a rule link. 
   2. Enter a name for the new widget rule. 
      
      
      
      
   3. Set the conditions for the rule.
   4. Select the format to be applied once conditions are satisfied. You can apply color to a cell or row. 
      
      
       
      
   5. Click Apply to save and show a preview of the grid widget you created.