Left Tree Right Table and Interaction

Background

For a project's user list, there's a tree-structured organizational hierarchy on the left and a user list on the right. When clicking on a record on the left, it filters the data in the right user table.

To refer to this section, you need to master the use of Listeners and Sub-objects.

Implementation Steps

We can implement this function through the following methods:

• Open the data table: User Data >> Basic Information >> Sidebar

  Select "Module" for the type, and choose "Organization Structure Table" for the module (this table needs to be created in advance, with related sub-object configurations, which won't be detailed here).

  The presentation of our user data table will be as follows:

• Next, we need to click on the organization name in the left organizational structure to filter the user data on the right. The operation is as follows:

  Add an associated record field "orgRel" to the user table, and select the associated organizational structure table.

  User table fields overview:

  Now the user table data can be filtered through the "orgRel" field.

  Then, use a table listener to get the event when a record in the organizational structure table is clicked, and call automation in the listener event to set the filter conditions for the right user data table.

  To create a listening event: Organizational Structure Table >> Table Settings >> Event Listening >> Create Listener

  In the create listener editing page, select the already written automation program (Set User Filter Conditions).

  Scroll to the bottom of the automation input parameter values to see the clicked record: clickRecord

• Detailed explanation of the automation program (Set User Filter Conditions)

  The automation program is as follows:

  Print eventValue (clickRecord passed by the listener), which returns the following JSON data:

  "eventValue":{
    "id":"sdakdhssdf",
     "name":"Group"
  }

  It's easy to see that the expression ${eventValue.id} is our organization ID.

  So by setting the filter condition expression to ${eventValue.id}, we can filter out the user data associated with that organization.

Effect

• Click on the organizational structure on the left, and the corresponding user data will be filtered on the right.