Dynamic fields in Extension Settings

Are you building an extension with configuration fields that change depending on the value of another? This article will show you how to fetch the values of other fields and change other fields.

To fetch the value of another field in your extension settings, change the options to a function which can receive context. In this context is each field and it's value.

Step 1: Change the options to a function

The first step is to change the options property to a function which returns the same array format. See a basic example below:

// Default options
options: [],
// Change to this
options: (options): Array<object> => {
  return [];
}

The function now has access to the options context which contains all your fields and their value.

Step 2: Fetch value of a field

Create some fields in your options function then add a constant for that field. In the example below, I have an action dropdown field with 4 different values.

options: (options): Array<object> => {
  const action: string = options?.['action'];
  return [
    {
      field: 'action',
      name: 'Action',
      type: 'string',
      meta: {
        width: 'half',
        interface: 'select-dropdown',
        options: {
          choices: [
            { text: 'Create', value: 'create', icon: 'add' },
            { text: 'Read', value: 'read', icon: 'visibility' },
            { text: 'Update', value: 'update', icon: 'edit' },
            { text: 'Delete', value: 'delete', icon: 'delete' },
          ],
        },
        required: true,
      },
    },
  ];
}

Step 3: Add a Conditional Field

Now add a new field that will be impacted be the field above. It's important that the field is always present, even it's not needed. This can be done by changing the meta property to an alias when the field is not needed.

Here is an example of hiding and showing an input field based on the value of the action field above.

options: (options): Array<object> => {
  const action: string = options?.['action'];
  const conditionalFieldMeta = ['read','update','delete'].includes(action)
  ? {
    width: 'full',
    interface: 'input',
    note: 'The id of the item.'
    required: true,
  }
  : {
    width: 'full',
    interface: 'presentation-notice',
    options: {
      icon: false,
      text: 'Item ID not required.',
    },
  };
  return [
    {
      field: 'action',
      name: 'Action',
      type: 'string',
      meta: {
        width: 'half',
        interface: 'select-dropdown',
        options: {
          choices: [
            { text: 'Create', value: 'create', icon: 'add' },
            { text: 'Read', value: 'read', icon: 'visibility' },
            { text: 'Update', value: 'update', icon: 'edit' },
            { text: 'Delete', value: 'delete', icon: 'delete' },
          ],
        },
        required: true,
      },
    },
    {
      field: 'item_id',
      name: 'Item ID',
      type: 'string',
      meta: conditionalFieldMeta,
    },
  ];
}

You can also change the choices of a dropdown depending on the value of another field.

options: (options): Array<object> => {
  const graphType: string = options?.['type'];
  
  return [
    {
      field: 'type',
      name: 'Chart Type',
      type: 'string',
      meta: {
        width: 'half',
        interface: 'select-dropdown',
        options: {
          choices: [
            { text: 'Line Graph', value: 'line' },
            { text: 'Area Graph', value: 'graph' },
          ],
        },
        required: true,
      },
    },
    {
      field: 'appearance',
      name: 'Appearance',
      type: 'string',
      meta: {
        width: 'half',
        interface: 'select-dropdown',
        options: {
          choices: !graphType
          ? []
          : graphType === 'line'
            ? [
              { text: 'Option 1', value: 'option_1' },
              { text: 'Option 2', value: 'option_2' },
              { text: 'Option 3', value: 'option_3' },
            ]
            : [
              { text: 'Option 3', value: 'option_3' },
              { text: 'Option 4', value: 'option_4' },
              { text: 'Option 5', value: 'option_5' },
            ],
        },
        required: true,
      },
    },
  ];
}

Next Steps

You can now build extensions with dynamic configuration fields that change depending on the value of other fields. Try exploring the meta property and see how you can transform fields further.