Skip to content
LogoLogo

Conditions

A condition uses JSON Logic to evaluate the client state. Use a condition to control when an experience starts, to choose the next step, and to show or hide a field.

Conditions in experiences

A common pattern puts a condition between two steps. The flow then takes a branch that the form responses decide:

import { createExperience } from '@picked/client/plugins/create-experience'
 
const questionaireFunnel = createExperience({
  id: 'mini-funnel',
  // experience config
})
 
const userInformationStep = funnel.addStep({
  fields: ['email-address-field', 'sign-up-for-newsletter-field'],
})
const signUserUpToNewsletter = funnel.addStep({
  // step config
})
const userDoesNotWantNewsletter = funnel.addStep({
  // step config
})
 
const isSigningUpForNewsletter = funnel.addConditional({
  condition: {
    '==': [
      {
        var: 'responses.sign-up-for-newsletter-field',
      },
      true,
    ],
  },
})
 
userInformationStep.nextConditional(isSigningUpForNewsletter)
 
isSigningUpForNewsletter.addTrue(signUserUpToNewsletter)
isSigningUpForNewsletter.addFalse(userDoesNotWantNewsletter)

Conditional fields

A JSON Logic condition can show or hide a field. The condition can read an earlier response or a predicate:

import { createField } from '@picked/client/plugins/create-experience'
 
// Show the email field only when the user chose "email" as a contact method.
export const emailField = createField({
  id: 'email-input',
  name: 'email-input',
  type: 'text',
  label: 'Email Address',
  multiple: false,
  required: true,
  condition: {
    in: [
      'email',
      {
        var: 'responses.communication-methods',
      },
    ],
  },
})
 
// Show the field when the predicate returns true.
export const mailingAddressField = createField({
  id: 'mailing-address',
  name: 'mailing-address',
  type: 'text',
  label: 'Mailing Address',
  multiple: false,
  required: true,
  condition: {
    '==': [
      {
        invoke: {
          var: 'predicates.user-allows-mail',
        },
      },
      true,
    ],
  },
})

Field options with conditions

Individual options within a field can also have conditional visibility:

import { createField } from '@picked/client/plugins/create-experience'
 
export const contactMethodsField = createField({
  id: 'contact-methods',
  name: 'contact-methods',
  type: 'text',
  label: 'How should we contact you?',
  multiple: true,
  required: true,
  options: [
    {
      id: 'email',
      label: 'Email',
      value: 'email',
    },
    {
      id: 'phone',
      label: 'Phone',
      value: 'phone',
    },
    {
      id: 'mail',
      label: 'Postal Mail',
      value: 'mail',
      // Only show this option if user has a verified address
      condition: {
        '==': [
          {
            invoke: {
              var: 'predicates.has-verified-address',
            },
          },
          true,
        ],
      },
    },
  ],
})