Edit table element (extend with dropdown selection)

Apps (Frontend) Apps Builder
,
1

Hi,

I have a table element with two columns. One displaying the “keys”, the other the “values”.
Via the “Edit table” functionality the user can edit the column “values”. For certain rows I do not want to provide the opportunity to enter an arbitrary string rather to have a dropdown menu where the user can select from a few predefined values.

Is this currently possible? If yes, how?

Thanks for your help :slight_smile:

2

For anyone encountering this issue: The property config.editing.valueOptions should help to solve this issue. The property config.valueMapping can also be helpful in this context.

3

Yes, it is possible indeed via the valueOptions. In this option, you specify a separate data source table datasource_mapping_table containing three columns: plan_key, plan_value_1 (for the valueColumn), plan_value_2 (for the labelColumn).

plan_key | plan_value_1 | plan_value_2
a | b | b
a | c | c

Then, in the app you configure this code to specify how the Join on the plan_key should occur. In each key’s dropdown, all the plan_value_1 corresponding to plan_key are going to be visible and selectable:

{
  "id": "ele_table_dropdown_column",
  "config": {
    "columns": [
  
      {
        "name": "plan_key",
        "label": "Plan Key",
        "width": "160px",
        "edit": true
      }
    ],
    "dataLabels": true,
    "download": {
      "fileName": "Download File Name",
      "full": true,
      "type": "excel"
    },
    "rangeFilter": true,
    "valueFilter": true,
    "editing": {
      "labels": {
        "startEditing": "Edit Table",
        "stopEditing": "Cancel"
      },
      "edit": true,
      "add": false,
      "delete": false,
      "saveToMicroservice": {
        "id": "workflowID",
        "targetProjectId": "projectId",
        "fullDeletedRows": false,
        "synchronizeResults": true,
        "variableAssignments": [
		//optional variable to pass to the WF when editing
          {
            "variableName": "var_1", // (Technical) Name of the variable
            "variableValue": "my_value_var_1"
          }
        ]
      },
      "lockAppWhileEditing": true,
      "lockDataUpdatesWhileEditing": false,
      "valueOptions": [
        {
          "column": "plan_key",
          "source": "datasource_mapping_table",
          "valueColumn": "plan_value_1",
          "labelColumn": "plan_value_2",
          "allowNewValues": false,
          "syncSets": []
        }
      ]
    }
  },
  "source": "data_table_datasource",
  "sourceOptions": {
    "sql": "SELECT i.* FROM inputTable i "
  },
  "styles": {},
  "type": "table"
}
1 Like
4

But I think these valueOptions seem only to be column based? I can not specify individual dropdowns for each row separately. For example, row 0 has a dropdown with the values 1,2 and 3 whereas row 1 has a dropdown containing the values 4,5 and 6 ?

5

Yes, my suggested approach is column-based and wouldn’t work with a different dropdown specific for every row.

All the available options are visible and selectable in all the rows.