apps
2023.10
true
Apps User Guide
Automation CloudAutomation Cloud Public SectorAutomation Suite
Last updated Nov 7, 2024

Edit Grid

The Edit Grid control allows you to list, edit, paginate, or search tabular records.

General

  • Data source - The source of data you want to edit inside the grid. You must reference an object of type AppsDataSource, such as a Data Service entity, or an Orchestrator process.

    Once you fetch the data source, the grid automatically detects the data columns. Clicking the More icon of each column navigates you to the following properties:

    • Name - The display name of the column header.

    • Source - The field of the referenced entity.

    • Edit mode view - Determines how to interact with the column:

      Edit mode view option

      Description

      Textbox

      Cells in the column behave as a Textbox control.

      Datepicker

      Cells in the column behave as a Datepicker control.

      Checkbox

      Cells in the column behave as a Checkbox control.

      Dropdown

      Cells in the column behave as a Dropdown control.

      Multi select

      Cells in the column behave as a Multi select control.

    • Hidden - If true, hides the column at runtime.

    • Editable - If false, marks the content of the column as read-only.

  • Add new column - Add new columns to your data by clicking the plus "+" icon.

  • Hidden - If true, hides the control at runtime.

  • Editable - If false, marks the control as read-only.

  • Add rows - If true, allows app users to add new rows at runtime. If false, users cannot add new rows.

  • Delete rows - If true, allows app users to delete rows. If false, users cannot delete rows.

  • Search - If true, exposes a built-in search capability.

Events

  • Row selected - Configure what happens when a row is selected.

  • Row added - Configure what happens when a row is added.

  • Row modified - Configure what happens when a row is modified.

  • Row deleted - Configure what happens when a row is deleted.

Note:

To access the errors in updating, adding, or editing operations, use the following syntax:

<PageName>.<ControlName>.<RuleName>.Error.Message<PageName>.<ControlName>.<RuleName>.Error.Message
For example, MainPage.EmployeeDetailsGrid.UpdateEntityRecord.Error.Message.

Style

  • Control Alignment - By default, inherits the parent alignment. A different alignment other than the parent can be set. To default back to the parent alignment, deselect the overridden options.

    Note: The alignment is dependent on the layout selected for the parent (Vertical vs Horizontal).
  • Background color - The background color for the Grid header and Grid body.

  • Border - The border for the control. Border Thickness, Color, and Radius can be configured.

  • Font - The font attributes for both the Column header and Column body text, such as font family, size, color, or style (Bold, Italic and Underline). By default, the control inherits the font family of the immediate parent container which is indicated by the keyword "Inherited".

  • Margin - The margin of the control. By default, a margin of 4px is set. Top/Bottom and Left/Right margin properties are combined. These properties can be detached using the Link button at the right side of the Margin section.

  • Size - The width and height of the control. By default, the size is set to auto. To set minimum or maximum values, click the three dot icon (...). If the size of the control is smaller than the options, a scroll bar is displayed.

VB properties

VB property

Data type

Description

SelectedItem

Apps.Controls.TabularInitClass

References the currently selected item in the control.

DataSource

Apps.Controls.ListSource(Of Apps.Controls.TabularInitClass)

References the data source for the values inside the Table control.

NewItem

Apps.Controls.TabularInitClass

References the item being created by the Add row option. The Row added event references this property.

Editable

Boolean

Determines if the Edit Grid is editable.

AddRows

Boolean

Determines if rows can be added to the Edit Grid.

DeleteRows

Boolean

Determines if rows can be deleted from the Edit Grid.

RowIndex

Integer

References the index of the row for update and delete operations. Should be used for process integration where there entire dataset is in-memory.

Search

Boolean

Enables or disables the search function. If true, search is enabled.

Value

Apps.Controls.TabularInitClass

The currently selected value of the control.

Hidden

Boolean

If true, hides the control at runtime.

Disabled

Boolean

If true, disables the control at runtime.

Converting complex data to AppsDataSource

To convert a data table or a complex data type to a AppsDataSource: save the data table to a variable, then use the .ToListSource method that converts data from data table to AppsDataSource.
  1. Save the data to a variable of type DataTable. For example, name the variable "dt".
  2. In the Data source field of table controls, use the following expression:
    dt.ToListSource()dt.ToListSource()

Generically, complex objects can be converted to AppsDataSource by using the syntax:

Processes.ALLDATATYPES.out_datatable.ToListSource()Processes.ALLDATATYPES.out_datatable.ToListSource()

Using DataTable in Edit Grid controls

Make sure you already have a DataTable object in your app.

DataTables objects can be defined as input, output, or input/output arguments of a process. To use these DataTable objects, you need to reference the process where they are used as arguments.

Note:

DataTable only supports primitives in a column. Complex type arguments in a column do not function in DataTable.

Say you have a process named "Process_A", which has the DataTable objects as arguments:

Input arguments

in_dt1

Output arguments

out_dt1

Input/Output arguments

inout_dt

Edit Grid

  1. Navigate to the General tab of your Edit Grid control.

  2. In the Data source field of the control, open the expression editor, and write the following expression:

    Processes.<process_name>.<datatable_output_argument>.ToListSourceProcesses.<process_name>.<datatable_output_argument>.ToListSource

    For example:

    Processes.Process_A.out_dt1.ToListSourceProcesses.Process_A.out_dt1.ToListSource

  3. To perform operations on the DataTable rows, such as adding, editing, or deleting:
    1. Make sure the Editable, Add rows, and Delete rows properties are set to true.

      docs image
    2. Switch to the Events tab of the Edit Grid control, then configure the corresponding rules:

      1. To add rows, click Create rule for Row added, then use the Set Value rule:

        Item To Set

        Processes.<process_name>.<datatable_output_parameter>Processes.<process_name>.<datatable_output_parameter>

        For example:

        Processes.Process_A.out_dt1Processes.Process_A.out_dt1

        Value

        Processes.<process_name>.<datatable_output_parameter>.AddRow(MainPage.EditGrid.NewItem)Processes.<process_name>.<datatable_output_parameter>.AddRow(MainPage.EditGrid.NewItem)

        For example:

        Processes.Process_A.out_dt1.AddRow(MainPage.EditGrid.NewItem)Processes.Process_A.out_dt1.AddRow(MainPage.EditGrid.NewItem)
      2. To delete rows, click Create rule for Row deleted, then use the Set Value rule:

        Item To Set

        Processes.<process_name>.<datatable_output_parameter>Processes.<process_name>.<datatable_output_parameter>

        For example:

        Processes.Process_A.out_dt1Processes.Process_A.out_dt1

        Value

        Processes.<process_name>.<datatable_output_parameter>.DeleteRowAt(MainPage.EditGrid.RowIndex)Processes.<process_name>.<datatable_output_parameter>.DeleteRowAt(MainPage.EditGrid.RowIndex)

        For example:

        Processes.Process_A.out_dt1.DeleteRowAt(MainPage.EditGrid.RowIndex)Processes.Process_A.out_dt1.DeleteRowAt(MainPage.EditGrid.RowIndex)

      3. To modify rows, click Create rule for Row modified, then use the Set Value rule:

        Item To Set

        Processes.<process_name>.<datatable_output_parameter>Processes.<process_name>.<datatable_output_parameter>

        For example:

        Processes.Process_A.out_dt1Processes.Process_A.out_dt1

        Value

        Processes.<process_name>.<datatable_output_parameter>.UpdateRowAt(MainPage.EditGrid.RowIndex, MainPage.EditGrid.SelectedItem)Processes.<process_name>.<datatable_output_parameter>.UpdateRowAt(MainPage.EditGrid.RowIndex, MainPage.EditGrid.SelectedItem)

        For example:

        Processes.Process_A.out_dt1.UpdateRowAt(MainPage.EditGrid.RowIndex, MainPage.EditGrid.SelectedItem)Processes.Process_A.out_dt1.UpdateRowAt(MainPage.EditGrid.RowIndex, MainPage.EditGrid.SelectedItem)

Using entities with Edit Grid controls

The following example shows how to bind an entity to an Edit Grid control, then perform CRUD operations using the control and entity-specific rules.

The entity used is called "Employee", and has the following fields:

  • Name

  • Age

  • Date of birth

  • Gender

  • Team

  • Date of Joining

  • IsFullTime

  • Skills

Displaying entity records

  1. Create a new VB app, then add the Employee entity to the app.
  2. Add the Edit Grid control to the app.
  3. In the Data source field of the Edit Grid control, use the Query builder and select the Employee entity. The columns of the control are automatically populated with the fields of the entity.
  4. For every column, make sure that the Edit mode view dropdown is set to the correct data type, as follows:
    OptionDescription

    Date of Birth

    Date Picker

    Age

    Textbox

    Name

    Texbox

    Gender

    Dropdown

    Team

    Dropdown

    Date of Joining

    Date Picker

    IsFullTime

    Checkbox

    Skills

    Multi select

    Gender and Team are entity choices sets. When you select Dropdown in the Edit mode view for these columns, two new properties are displayed: List Source and Column.
  5. To fetch the options in a choice set:
    1. In the List source field, use the following syntax
      GetChoiceSet("Choiceset Name")GetChoiceSet("Choiceset Name")

      For example, for Gender and Team columns, the List source field should have:

      • Gender - GetChoiceSet("Gender")
      • Team - GetChoiceSet("Team")
    2. In the Column field, write "Name".
      docs image

    Skills is an entity choice set that allows multiple selection. When you select Multi select in the Edit mode view for these columns, two new properties are displayed: List Source and Column.

  6. Configure the Skills column as you did for Gender and Team.
  7. Go to the Event tab of the Edit Grid control.
  8. For the Row added event, create the following rule:
    1. Add the Create Entity Record rule.
    2. In the Which entity should the record be created in?, select the Employee entity.
    3. In the Values to set field, update the following:
      • Name property - MainPage.EditGrid.NewItem.Name
      • Date of Joining property - MainPage.EditGrid.NewItem.Dateofjoining
      • Age property - MainPage.EditGrid.NewItem.Age
      • Gender property - MainPage.EditGrid.NewItem.Gender
      • Team property - MainPage.EditGrid.NewItem.Team
      • IsFullTime property - MainPage.EditGrid.NewItem.Isfulltime
      • Skills property - MainPage.EditGrid.NewItem.Skills
  9. For the Row modified event, create the following rule:
    1. Add the Update Entity Record rule.
    2. In the Which entity's record should be updated?, select the Employee entity.
    3. In the Entity record Id, write the following expression:
      MainPage.EditGrid.SelectedItem.IdMainPage.EditGrid.SelectedItem.Id
    4. In the Values to set field, update the following:
      • Name property - MainPage.EditGrid.SelectedItem.Name
      • Date of Joining property - MainPage.EditGrid.SelectedItem.Dateofjoining
      • Age property - MainPage.EditGrid.SelectedItem.Age
      • Gender property - MainPage.EditGrid.SelectedItem.Gender
      • Team property - MainPage.EditGrid.SelectedItem.Team
      • IsFullTime property - MainPage.EditGrid.SelectedItem.Isfulltime
      • Skills property - MainPage.EditGrid.SelectedItem.Skills
  10. For the Row deleted event, create the following rule:
    1. Add the Delete Entity Record rule.
    2. In the Which entity record should be deleted?, select the Employee entity.
    3. In the Entity record Id, write the following expression:
      MainPage.EditGrid.SelectedItem.IdMainPage.EditGrid.SelectedItem.Id
  11. Preview your app and interact with the Edit Grid various capabilities such as pagination, search, add new row, update row, or delete rows.

Using relationships in Edit Grid controls

To use entity fields of type Relationship in an Edit Grid control:

  1. In the Edit mode view field, set the relationship fields as a Dropdown.
  2. In the subsequent List source property, use the follwoing expression:
    Fetch(of <entity_name>)(Nothing, Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})Fetch(of <entity_name>)(Nothing, Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})
  3. In the subsequent Column property, write "Name".
  4. In entity-related rules, such as Create, Update, or Delete Entity Records, pass the ID of the relationship field as follows:
    MainPage.EditGrid.SelectedItem.<entity_name>.IdMainPage.EditGrid.SelectedItem.<entity_name>.Id

Demos

Edit Grid: working with entities

Introduction

This app shows how to work with entities using the Edit Grid control.

Demo app - instructions to use

  1. Download the zip file with the demo app. It contains:
    • Schema.json - the schema for the entities the app uses

    • EditGridEntity_DemoApp.uiapp - the UiPath® Apps file

  2. In UiPath® Data Service, import the Schema.json file. Make sure to import both Entities (Country and Employees) and Choice Sets (Gender and Skills).
  3. Populate your entities and choice sets with data.
  4. In UiPath® Apps, create a new app and import the downloaded app.
  5. You may notice some errors. To fix them, replace the referenced Employees entity with the one you recently imported in step 2.
  6. Preview the app and interact with the data in the Edit Grid.

Was this page helpful?

Get The Help You Need
Learning RPA - Automation Courses
UiPath Community Forum
Uipath Logo White
Trust and Security
© 2005-2024 UiPath. All rights reserved.