Editable Tables

If you choose the Editable Table chart type, an additional tab ‘Editable Settings’ will be displayed in the ‘Edit chart’ screen. This tab is used to specify the fields in the table that you want to allow users to edit.

Open

HTTP Methods

You can use any of the following methods when defining the Editable Table;

• GET

• POST

• POST (JSON)

• POST (All)

For each object you can choose from:

Open

• Edit Type Disabled - this object isn’t editable

• Text Editor - permit free format entry of a new value

• Dropdown Item Selector - You can configure a finite list of acceptable values

HTTP Call Parameters

You configure the chart to use an API call in the underlying application to edit the chart data (or more specifically the data in the underlying database). If you need to pass URL parameters, you need to define them in the ‘HTTP Call Parameters’ section. In the following example, we’ve specified the URL that the changes will be passed to and specified the username and password for this URL in the ‘HTTP Call Parameters’ field.

We’ve then chosen to only allow changes to the Job Role column and specified the values that users will be able to select from a drop-down list.

Click the ‘Save’ icon to confirm your choices.

Making changes to an editable table

When this table is viewed on the dashboard, an icon will be displayed in the top-left of the chart cell that will inform users how to make changes when they click the icon.

Based on our example in the previous section, we can see that once a user double clicks the Job Role column indicates a drop-down list that they can select a value from.

After making changes to an editable table, users will need to click the tick beneath the table. The number of changes that they made will also be displayed.

Action Button Label

By default, the action button will be displayed as a tick but you could also add a label that will help users. In ‘Editable Settings’ tab in Chart Editor, enter the text that you want to use for the button and also any help text that will be seen when users hover over the button.

Saving changes to an Editable Table

Changes that have been made an editable table will initially be identified with an orange background on the relevant row. This will make the API call and update the data in the underlying database.

After the API call has been made and the updates to the source data are confirmed, the row will turn green.

If the updates are unsuccessful, the row will turn red. Hovering over the relevant row will provide further information.