How to allow multiple button selection in Symphony Elements

Symphony Elements is our standard UX component library used to create rich workflows for bots, without having to worry about complicated code and UI design.

 

There may be some cases where a user may want to be able to click on one button without disabling the other buttons but, after another different button is clicked, the other buttons are disabled. To do this, a message needs to be created.

 

The reason for this is that a form can only be submitted once, however a message allows a user to define multiple forms. This then allows a user to create a messageML with multiple buttons that can be submitted without disabling the others, as seen below in Figure 1 and Figure 2:

<messageML>
<h2>Table</h2>
<table>
<thead>
<tr>
<td>Name</td>
<td>Value</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Banana</td>
<td><form id="selected-item1"><button name="submit-row1">Submit 1</button></form></td>
</tr>
<tr>
<td>Cow</td>
<td>Dinosaur</td>
<td><form id="selected-item2"><button name="submit-row2">Submit 2</button></form></td>
</tr>
<tr>
<td>Elephant</td>
<td>Frog</td>
<td><form id="selected-item3"><button name="submit-row3">Submit 3</button></form></td>
</tr>
</tbody>
</table>
</messageML>

 Figure 1 Table Code

 

2.png

Figure 2 Resulting Table 

 

Note: Refer to the article found here for further information