What I want to achieve:

1 repeating element with;

1 detail region for update, and
1 detail region for delete, and
1 detail region for display result only.

If possible, how to achieve it?
note: I've tried it but the later detail regions did not print the output.

Alternative question can I use a single form for both update and delete?

Update: From the Dynamic Events of Properties panel, it is only possible to have one dmx-on:click event. In the Actions panel, there's also no option to select multiple actions. I've tried adding ; to the line and add second action after the first but this will produce error.

I hope multiple onClick events is possible so is multiple detail regions.

Hello, multiple detail regions are not possible.
You only need one detail region to do what you need. Just create a var in app connect, call it "action". Then in the repeat region you have 3 buttons - Details, Update and Delete

On every button add dynamic action > on click > variable set value
For details add: details
For update add: update
For delete add: delete

Then in the details region use dynamic attributes:
> show >when var.action = "details" for the details container
> show >when var.update = "details" for the update form
> show >when var.action = "delete" for the delete container/button.

Hi Teodor, I've tried (almost) exactly as your step above but fail to achieve what is expected.

Example site here (I only setup repeat and detail region to test variable) . From my understanding, Dynamic Attribute should show the respective div based on variable value set by button click (for example, for detail div in my case <div class="col-lg-4" dmx-show="action.value == &quot;detail&quot;"> ) , but it doesn't happen here, the div keep hidden. Tell me what's wrong with it.

Thanks.

You've selected wrong data type when binding the onclick event .... it must not be identifier but string:
Identifier should be set for dynamic data binding:
dmx-on:click="action.setValue(detail)"


when you select string, which you must select, the code should be:
dmx-on:click="action.setValue('detail')"

I used to think that part is auto selected . That fixed it. Thank you very much for this solution.