3. Create a Grid App

Owned by Lakshminarayanan1 S CTOO (Unlicensed)
Last updated: Aug 24, 2020

Simple Grid (also known as Classic Grid) is an App view type, which is used to present data in a grid with paging toolbar for navigating across various pages. In this view, the user gets new data every time the grid paginates by user's forward or backward click on the Pagination bar.

Device Compatibility

In Tablet devices, only the first three columns will appear allowing the other columns accessible through the collapsible expand icon without the pagination tools. All the event handlers (context click, cell click and data drilling) will be disabled and each page records will load by scrolling.

In Mobile devices, only the first two columns will appear allowing the other column accessible through the collapsible expand icon without the pagination tools. All the event handlers (context click, cell click and data drilling) will be disabled and each page records will load by scrolling.

You can easily create a grid app (widget) using App Designer in Canvas Studio with viable and feasible configurations. Apps (Widgets) serve the purpose of displaying the data from the selected data source.

A brief overview on creating a grid app in Canvas Studio is provided as follows:

  1. In Canvas Studio, click App Designer.
  2. Clickto create a new app. 

  3. Provide unique names in the App Display Name, App ID and View ID fields.  

    No blank spaces and special characters should be used in the App ID and View ID fields. The underscore symbol can be used.

  4. In the App Resource bundle field, provide the bundle key of the associated property file. 
  5. Select the appropriate Product, Sub-Product and Function Codes. 
  6. Select the CLASSIC_GRID view type. 
  7. Click the Datasource Tab. 
  8. In the Data Src ID field, select the data source of your choice and then click Proceed to design the app. 
  9. Click Columns tab. 
  10. Drag and Drop the columns in the designer area. To select all the columns at the same time, click Select All. 
  11. Clickto save the grid app. 


The step-by-step procedure to create a grid app in Canvas Studio is listed as follows:

  1. On the home page of Canvas Studio, click App Designer.




  2. Click icon to create a new app.



  3. Enter an appropriate name in the App Display Name field, e.g. ACCOUNT SUMMARY DETAILS.
    1. Enter an appropriate ID in the App ID and View ID fields, e.g. ACCOUNT_SUMMARY_DETAILS_WGT.
    2. In the App Resource Bundle field, enter the name of the bundle key associated with the property file, e.g. common.

    3. Select the appropriate Product, Sub-Product and Function Codes. For detailed information on Product, Sub-Product and Function Codes, refer Configuring Entitlements and Creating Product, Sub-Product and Function Codes.

    On entering the App ID, the View ID gets filled automatically. However, you can still apply changes to the View ID. No blank spaces and special characters should be used in the App ID and View ID fields. The underscore symbol can be used. During the creation of an app, you can edit the App ID and View ID fields. However, while editing an app, you cannot apply changes to the App ID and View ID fields.




  4. Select the CLASSIC_GRID chart view type.



    1. Click the Datasource tab to select the relevant data source for the classic grid widget.



  5. Click the Data Src ID field and type the name of the Data Source to select it.

    You can uncheck the Use Existing Data Source and Use Default instruction Class checkboxes to connect to any data source using SQL Param Map ID. For detailed information on using the SQL Map and the instruction class to display data on the app, refer Adding the SQL Map and Instruction Class with App.

    1. Click Proceed to design the app.



  6. Click Columns tab.



  7. You can quickly select all the columns by clicking the Select All option. Alternatively, you can drag and drop the columns of your choice.



  8. Click icon to save the app.



    A confirmation message, indicating a successful save appears.




  9. Click Ok.

    Alternatively, you can view the following video that shows you how to create a Simple Grid App using App Designer: