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 the need for complicated code and UI design.

There may be some cases where a user may want to be able to select one button without disabling the other buttons but, after another different button is selected, the other buttons are disabled. To do this, a message with multiple forms 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 Code

Figure 2 Resulting table 

Further information on interactive elements forms can be found in the Elements Interactive Forms page in the Symphony Developers Documentation.