Skip to main content
OutSystems

How to use Data Grid

Before starting, make sure that the components Data Grid and Data Grid Sample are installed in your environment.

Create interface to view data

Follow these steps to create a grid interface where users can view and filter data.

  1. Create a new Web App and add the references. Search for DataGridComponent and add all elements. Then search for DataGridExample and add only elements under the Entities tree.

  2. Create a REST endpoint to return a JSON required by Data Grid. Right-click on Logic > Integrations > REST and select Expose REST API. Name this REST API "Suppliers". Create a new REST API Method, name it "GetAll" and design it so it returns all entries from the Supplier Entity (find it in Data > DataGridExample). The Data Type of the Suppliers Output Parameter should be Supplier List.

    Logic to fetch data

  3. Create a Server Action to get the REST URI. Right-click Logic > Server Actions and select Add Server Action. Name the action "GetAllSuppliers" and design it so it returns a URL parameter with the value GetOwnerURLPath() + "rest/Suppliers/GetAll". REST server actions

  4. Create a new empty Screen and add a Preparation. Name the Screen "ScreenDataGridRead", and in Preparation add GetAllSuppliers to the Action logic.

  5. Add the Data Grid Container Block. Navigate to Interface > DataGridComponent > Structures and drag GridContainer to the main section of "ScreenDataGridRead". Name it "MyDataGrid". You get an error at this point, but that's fine as we don't provide any data to it yet.

  6. Provide data to the Data Grid. With "MyDataGrid" selected, locate RestURL property and select GetAllSuppliers.URL.

  7. Insert some columns. To add a column, navigate to Interface > DataGridComponent > Columns, drag GridColumnText and drop it in "MyDataGrid". Name the column "ColumnSupplierCode", and in its JSONField property enter "SupplierCode" (with quotes). Repeat for the Supplier Name field, with the JSONField property "SupplierName".
    Data Grid Columns

  8. Publish the app and visit the page in a browser. You should see a Data Grid and be able to use the features enabled by default, for example, show/hide columns and contextual filters.
    Data Grid Preview

Create interface to view, edit, and save data

Continue with these steps to create a grid interface where users can edit and save data, no only view it.

  1. Create a Server Action to get the REST URI. Right-click Logic > Server Actions and select Add Server Action. Name the action "SaveAllSuppliers" and design it so it returns a URL parameter with the value GetOwnerURLPath() + "rest/Suppliers/SaveAll".

  2. Create a REST endpoint to receive the JSON required by the app. Go to Logic > Integrations > REST > "Suppliers" and create a REST API Method with the name "SaveAll". Set the HTTP Method of "SaveAll" to POST.

  3. Design the API Method so it receives a Text Data Type parameter and name it "JSON". Set the Receive In property of this Input Parameter to Body.

  4. Edit the logic of "SaveAll" to save the data. Drag the JSON Deserialize Tool to the Action logic and in the tool properties set: JSON String to "JSON" input parameter and Data Type to "Supplier List". Finalize the Action logic so it saves the received records (you can use CreateOrUpdateSupplier Action of the Supplier Entity). Data Grid Save Logic

  5. Create a new Screen by copying and pasting the Screen "ScreenDataGridRead" and renaming it to "ScreenDataGridSave". Place the SaveAllSuppliers Server Action in the Preparation logic of "ScreenDataGridSave". Note: We are reusing elements from the previous step. All the steps in this section now refer to "ScreenDataGridSave".

  6. Enable the cell editing and row selecting. Select "MyDataGrid" and in the properties set CheckboxSelection to True. Also, select each column of the grid and in properties set Editable to True.

  7. Add the save button. Navigate to Interface > DataGridComponent > Actions, drag SendSelectedRowsButton and place it in the Screen. Enter "Save selected" as the Button label. With the Button still selected, find the RestURL property and set it to SaveAllSuppliers.URL. Data Grid edit cells preview

  8. Publish the app and visit the page in a browser. Edit some cells, select the check boxes of the rows you want to save and click Save Selected. The message "Data updated successfully" shows.

    Data Grid browser preview

Use of Data Grid

Some of the use cases for Data Grid, an Excel-like interface, are bulk data entry, reporting capabilities with sorting, filtering, and editing.

Where Data Grid fits

Here are some examples when using Data Grid benefits user experience.

  • Users need to enter or edit data in bulk.
  • Data has a strong hierarchical relation and users quickly want an overview.
  • Users need to edit or access any cell.
  • Users need an interface with formatting features and have relations and conditions.
  • Users need, in general, richer experience than tables can provide.

Where a table fits better

Here are some examples where using Data Grid might be too complex for users.

  • Users only need to access only one column, not several at the same time.
  • Users do not need to see all fields and can find data by scrolling.
  • Cells have no direct hierarchical relation to each other.
  • Users need to "save view", which means the real functionality they need is configuration, not customization. A customizable table is a better choice.
  • The target app is Mobile App, where a bigger grid format is difficult to manage, particularly in smartphones.
  • Was this article helpful?