Multi step form with custom actions

Help
,
1

So i am trying to integrate the organisation creation in my post register flow. I add a form on onExecutePostLogin which includes the fields for creating an organisational profile. that part works. Now i want to extend it to actually check if a user is registering for an organisation that actually exists and rather prompt the user to to trigger (click a button) an request to invite. (This feature is not native but i am using user meta to store and retrieve users that have a request invite open)

Now i was not able to use the same form with multiple steps or a custom flow between the step where user enters organisational data and the followup step where i lookup again management api > organisation names for duplicates. There is simply no solid way with forms to inject custom js code. Nor do i see it with flows. What i currenty do is something like:

exports.onExecutePostLogin = async (event, api) => {
  const FORM_ID = '...';

  const register_complete = event.user.user_metadata?.register_complete || '';

  console.log('register_complete:', register_complete);

  if (register_complete) {
    console.log(`Skipping onExecutePostLogin for user ${event.user.user_id}`);
    return;
  }

  // Render the form for the first login
  api.prompt.render(FORM_ID);
};

exports.onContinuePostLogin = async (event, api) => {

  const first_name = event.prompt?.fields?.first_name || '';
  ...
  
  api.user.setUserMetadata('first_name', first_name);
  ...

  try {
    const ManagementClient = auth0.ManagementClient;
    const management = new ManagementClient({
        domain: event.secrets.authDomain,
        clientId: event.secrets.authClientId,
        clientSecret: event.secrets.authClientSecret,
    });
    const response = await management.organizations.getAll({per_page: 100})
    const result = checkOrganizationExists(response.data, company_email, company_url);
    if (result) {
      console.log(`Organization: ${result.name} found for ${company_email}. Redirecting to invite request form.`);
      api.prompt.render('....', {
        fields: {
          organisationId: result.id,
          organisationName: result.name
        },
        vars: {
          organisationId: result.id,
          organisationName: result.name
        }
      });
      return;
    }
  } catch (error) {
    console.error('Error management api:', error);
  }

  console.log(`User metadata updated for ${event.user.user_id}: first_name=${first_name}, last_name=${last_name}`);
};

so i am triggering another form from within another form. So i have these questions:

  • is this an acceptable way
  • is there a better way with forms/flows/…
  • is there actually a way to async hook into onChange events in forms and do a lookup and store the result in a var for a next step
  • If in the second form or in step i would let the user click a “request invitation” button as custom html with onChange attached - how would i trigger the form to continue after wards?
3

Hi @admin76,

Yes, that is a limitation with using Forms in Actions. As mentioned in this documentation, you can only render one form per Action. If you need to render more than one form, you need to render the forms in different Actions.

Unfortunately, the saved fields and shared variables are only available in the resume function of the current action. This is mentioned in this documentation.

You can trigger the form to continue by using one of the available blocks mentioned here, possibly the Next button block or the Jump button block.

Thanks,
Rueben

4

That is helpful. the double form usage in my actions are clear. I will try to go via form + flow and about all the shared variable storage (vars). The only thing i wonder if i could store an array of objects i would retrieve from a custom http post and use it in my form custom component to populate a dropdown? I could if not use a raw encoded json string

5

Actually i managed successfully to use flows the only issue i have is the dynamic dropdowns. will this ever get implemented? its just not possible to mimick the dropdown functionality with custom code

1 Like