Skip to main content

Creating a Grid Widget

Updated

When to use the 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 find and understand information easily.

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 see the sales figures for each month, the sales of each product, and the sales trends.

6.jpg


How to create a Grid widget 

  1. Navigate to Widgets on the MSPbots app menu and click New Widget. 

    widgets.jpg
  2. Choose the Grid widget type in the New Widget window. 

    widget types
  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.

      New widget builder-grid.jpg

  4. Click the dataset icon   to go to the Dataset tab. Click the plus + button. 
  5. Select New Layer.
  6. In the Dataset window,
    1. Select the Dataset with the data you need. 
    2. (Optional) Enter a data source name in the Show datasource name as field. 
    3. For Columns Display,
      1. Go to the Column Name dropdown list and select a field for the drill-through. 


         
      2. Give an Alias and select a Business Type for your selection. 
      3. Click the plus + button to add more rows.

    4. For Filter,
      1. Click the plus + 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 dropdown lists.
        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 plus + button corresponding to Measure. 

        image add 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.

        image dataset measure
    6. For Dimension,
      1. Click the plus + button corresponding to the Dimension. 

        image dataset dimension
      2. Select a grouping option from the Fields dropdown list.
      3. Give an Alias for the dimension.
      4. Select a Format Type.
      5. Click Add. 

        image dimension parameters
    7. For DrillThrough Order By,
      1. Click the plus + icon.
      2. Select a parameter to sort drill-throughs automatically. 

        image drill-through sorting options
    8. For Order By (Optional)
      1. Click the plus + icon. 
      2. Select a parameter to sort the data. 
         
        image sort data order by
    9. Row Limit - Select an option to set a limit on how many rows of data will be shown. (Optional) 

      image set row limit
    10. Remove duplicate data - Select this option if you have duplicate data to delete. 

      image remove duplicate data
    11. Materialized - Select an option according to your requirements. 

      image materialized
    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: 
       
      widget-config-settings.jpg
      • Grid Lines - Select the grid lines for the table. (Default, Both, None, Horizontal, Vertical) 
      • Toolbar - Select the file type for exporting. 
        • PdfExport

          new widget builder26.jpg

        • CsvExport

          new widget builder27.jpg

        • ColumnChooser

          new widget builder25.jpg

      • Show Paging - If ON, the paging settings will be displayed at the bottom of the table. 

        new widget builder28.jpg

      • Show Toolbar - If ON, the toolbar will be shown at the top of the table. 

        new widget builder24.jpg

      • Column Width Fits Content - Set the column width to display based on the length of the content.
      • Auto Scroll - Turn this switch ON to allow the widget to scroll automatically. 
      • Display 0 When No Data Available - Enable this switch to show the value "0" when no data is available. This switch is OFF and displays a blank widget by default. 
      • Show Export Option - This option is available only when PDF is the selected Toolbar option. 
        • If enabled, clicking PDF Export will show the following export options:
          • Page orientation: 
            • Portrait - vertical
            • Landscape - horizontal
          • Page size:
            Select the appropriate size. 

            image export settings
        • 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 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 the text to align to the Left, Center, or Right. 
      • Allow Filtering - Toggle to allow users to filter the column. 
      • Disable HTML - Turn the Disable HTML toggle switch ON to disable the use of HTML codes. This toggle switch is enabled by default.
        • When the Disable HTML switch is ON and the 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 appears to display the full content.

          Disable HTML.jpg

          • If you encounter excessive content in the field or if your HTML codes are not working properly, enable the Disable HTML switch. This allows the widget to function correctly and avoids performance issues that cause the PDF generation to fail.
        • When the Disable HTML switch is OFF, there are no restrictions on the character count of the field content. However, 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 aggregates. (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. 

      Grid-1.jpg
    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. 


       
      If you set multiple conditional formatting rules for the same field, the order in which these rules take effect is from top to bottom. You can drag the rules to reorder them.

      Conditional Formatting_1.jpg
  9. Click Apply to save and show a preview of the grid widget you created.