How to pass non-user input into Symphony Element Actions

Symphony Elements lets you reuse our standard UX component libraries to create rich workflows for your bots, without having to worry about complicated code and UI design.

 

Symphony Element Actions only pass user input that is requested in the form. In order to pass values you do not want the user to edit, you will need to hide it within the Elements form. There are 2 ways to accomplish this securely.

 

Form-ID/Submit Button

One option is to insert the required values in the Form-ID or Submit button. This method is secure as the values are not as easily changed.

 

To do this, use the JSON representation of what you want to pass. The values will be returned in the action property and you can then use a JSON deserializer to get the values you passed, as seen below:

<messageML>
<form id="my-form">
<text-field name="userInput" placeholder="User Input">Default Input</text-field>
<button name='"action":"submit","secret-1:"My Secret 1","secret-2":"My Secret 2"' type="action">Submit</button>
<button type="reset">Reset</button>
</form>
</messageML>

Elements Action 1

...
"formValues": {
"action": "\"action\":\"submit\",\"secret-1:\"My Secret 1\",\"secret-2\":\"My Secret 2\"",
"userInput": "Default Input"
}
...

 Elements Action 2

 

Entity JSON

The second option is to set the Entity JSON of the Elements form to the value you want to pass. This method is very secure as the data is stored and obtained from the server side.

This method works in a very similar way to the first method, but here the value is set in the data payload of the message instead of in the form. The formMessageId of the Symphony Elements Action can then be used in the the Get Message By ID API call to obtain the entity JSON that was originally passed to it, as seen below:

Value for message in form-data:

<messageML>
<form id="my-form">
<text-field name="userInput" placeholder="User Input">Default Input</text-field>
<button name="submit" type="action">Submit</button>
<button type="reset">Reset</button>
</form>
</messageML>

Value for data field in form-data:

{"secret-1":"My Secret 1", "secret-2":"My Secret 2"}

Elements Action:

...
"formMessageId": "cADVMNeLkd1js-2GMDWneX___o0iPtQwbQ",

"formId": "my-form",
"formValues": {
"action": "submit",
"userInput": "Default Input"
}
...

The formMessageId is then used to obtain the entity JSON that was originally passed to it:

Note: https://{{agentUrl}}/agent/v1/message/:id where :id is the messageId:

...
"message": "<div data-format=\"PresentationML\" data-version=\"2.0\"> <form id=\"my-form\"> <input type=\"text\" name=\"userInput\" placeholder=\"User Input\" value=\"Default Input\"/> <button type=\"action\" name=\"submit\">Submit</button> <button type=\"reset\">Reset</button> </form> </div>",
"data": "{\"secret-1\":\"My Secret 1\",\"secret-2\":\"My Secret 2\"}",
...

Note: Refer to the article found here for further information

 

If you require further assistance with Symphony Element Actions, please contact the Symphony Support team at support@symphony.com