Drop-Down select with Event Mapping

The following article shows a best practice approach to use select tag in Structr pages with EAM.

What we want to achieve?

For Example we have status field in a task type with options ‘new’, ‘started’, ‘finished’.
When editing the task we want to choose the current status for a dropdown field.
This change should be applied immediately without submitting or reload the current page.

To make this task status editable, we use a html select tag:

1. Create select element in your page responsible for editing the task

2. Go to ‘HTML’ tab and set name to ‘status’ (this will ensure, that the value will be directed to ‘status’ field on each task)

3. Go to ‘Events’ tab and set Event to change, Action to Update object, UUID to ${current.id} (if you want, you can also set Success notification to inline text message)

4. Insert one option tag inside select element

5. On the option go to ‘Repeater’ tab, select Function Query and paste this code and press Save

   {
       const stati = [
           'new',
           'started',
           'finished',
       ];
   
       return $.toGraphObject(
           stati.map(v => ({value: v}))
       );
   }
   

6. Type in option inside Repeater Keyword and press save

7. Go to ‘HTML’ tab and set selected to ${is(eq(option.value, current.status), 'selected')} (which will automatically make the current status selected)

8. In ‘HTML’ tab set value to ${option.value}

9. Now your task status changer should work

How does it work?

Through the Event Mapping functionality in Structr, you can wire up html tags to react on events.
In our case, the select tag will update the status field on the current task (represented by keyword current).
As we did not mention the status field inside parameter mapping located on events tab, the Event Mapping will use the html name of the select automatically.
To prevent manually adding each option manually inside the select, we have used a repeater to create these options. For each option, the repeater will check if this option matches the current status of task and mark it as selected. Also it give each option its value.