PingOne

Configuring conditional component visbility

You can configure components so that they’re shown or hidden in a user-facing form based on one or more Boolean values pulled from your DaVinci flow.

The following components don’t have visibility controls:

  • Submit button

  • MFA Device Selection - Authentication

  • MFA Device Selection - Registration

  • FIDO2

  • Error Display

To configure conditional component visibility:

  1. In the PingOne admin console, go to User Experience > Forms.

  2. Click the Pencil () icon next to the form to configure.

  3. In the preview form, click a component to open its configuration settings.

  4. In the Visibility list, select whether the component is always visible, shown by default, or hidden by default.

  5. (Optional) Change the default Visibility Key. You’ll need this key for the PingOne Form connector’s Component Visibility field.

  6. Click Save.

Use case: Reusing one form for multiple scenarios

In this example, we’ll build a one-time passcode (OTP) prompt form for registration that will allow a user to register with either an email or a text message.

  1. In the PingOne admin console, go to User Experience > Forms.

  2. Click the icon.

  3. Enter a form name and optional description and click Add Form.

  4. Select Email OTP Prompt - Registration.

  5. On the Fields and Toolbox tabs, customize the form to include components for a text message OTP prompt for registration:

    Form configured in the form builder with components for both email and text message OTP registration.

  6. To make the user-facing form a conditional form that shows an OTP form for email by default but can also be a text message OTP form based on Boolean values in the DaVinci flow:

    1. Click the Translatable Rich Text heading component for email in the form builder.

    2. In the configuration panel, set the Visibility to Show by default.

    3. (Optional) Change the Visibility Key to something meaningful, such as otpEmail.

      This key doesn’t need to be unique, as multiple components can share the same Visbility Key, allowing you to show or hide a group of components.

    4. Repeat for the Translatable Rich Text description and Email Address components, ensuring the Visibility Key is otpEmail so the components are grouped for visibility.

    5. Repeat these steps for the text message OTP form components, but set the Visbility to Hide by default and create a shared Visibility Key, such as otpText.

  7. Click Save.

Next steps

With the component visibility configured in forms, you must further configure the PingOne Forms connector in your DaVinci flow with the Override Component Visibility table. Learn more in PingOne Forms connector.