Passing a Custom Field in the Forms from Actions

Knowledge Articles
1

Overview

This article provides an example of how to pass a custom field from an action and get the default value set in the action displayed using the custom component of a Form.

Applies To

  • Actions
  • Custom Fields

Solution

Please find below the sample code:

Action code:

api.prompt.render('ap_**', {
vars: {
      user_code: '123',
}
});

Accessed the value set in action by using {{ vars.user_code }} in the Params

rtaImage (1).jpeg
rtaImage (1).jpeg726×107 5.94 KB

And for the default value, use the below in the Source Code:

function customInput(context) {
    const input = document.createElement('input');
    input.type = 'text';
    function buildInput() {
        const { user_code } = context.custom.getParams();
        input.value = user_code;
        return input;
    }
    return {
        init() {
            console.log(context.custom.getParams());
            return buildInput();
        },
        getValue() {
            return input.value;
        }
    };
}

Unlike when populating {{fields.}} variables, the {{vars.}} The property does not need to exist in your form before injecting values. The following Auth0 documentation provides more details: Inject custom data with shared variables (server-side)

Form fields {{fields.*}} Forms / Flows Reference data from your form fields and hidden fields
Shared variables {{vars.*}} Forms / Flows Reference data stored as shared variables