Dynamically include sections in Forge macro config

[AaronCollier]

In a macro configuration, I’d like to include additional sections only if people opt into it. This would keep the form small for most use cases, but allow people to tick a checkbox if they want to add more options.

At the moment, I can’t seem to make it work. I’ve tried standard React syntax like using config.checked === "yes" && ... and a function that should return the additional options. In each case, I can log the correct state to the console, but nothing appears in the UI.

Is something like this possible?

[AaronCollier]

I guess not.

[mpaisley]

Hi @AaronCollier,

Apologies for the slow reply.
It’s possible in the latest version of UI kit, here’s an example of how I managed it:

import React, { useEffect, useState } from 'react';
import ForgeReconciler, {Label, RadioGroup, Select, Textfield, Text, useProductContext } from '@forge/react';
import { invoke } from '@forge/bridge';

const Config = () => {

  const context = useProductContext();
  const config = context?.extension.config;
  const pet_type = config?.petType;

  const typeOptions = [
    { name: 'petType', value: 'all', label: 'All' },
    { name: 'petType', value: 'dog', label: 'Dog' },
    { name: 'petType', value: 'cat', label: 'Cat' },
    { name: 'petType', value: 'rabbit', label: 'Rabbit' },
  ];

  const catBreeds = [
    { name: 'catBreed', value: 'all', label: 'All' },
    { name: 'catBreed', value: 'american_bobtail', label: 'American Bobtail' },
    { name: 'catBreed', value: 'british_shorthair', label: 'British Shorthair' },
    { name: 'catBreed', value: 'maine_coon', label: 'Maine Coon' },
    { name: 'catBreed', value: 'ragdoll', label: 'Ragdoll' },
    { name: 'catBreed', value: 'sphynx', label: 'Sphynx' },
    { name: 'catBreed', value: 'persian', label: 'Persian' },
    { name: 'catBreed', value: 'bengal', label: 'Bengal' },
  ]

  const dogBreeds = [
    { name: 'dogBreed', value: 'all', label: 'All' },
    { name: 'dogBreed', value: 'australian_cattle_dog', label: 'Australian Cattle Dog' },
    { name: 'dogBreed', value: 'australian_shepherd', label: 'Australian Shepherd' },
    { name: 'dogBreed', value: 'beagle', label: 'Beagle' },
    { name: 'dogBreed', value: 'boxer', label: 'Boxer' },
    { name: 'dogBreed', value: 'chihuahua', label: 'Chihuahua' },
    { name: 'dogBreed', value: 'english_cocker_spaniel', label: 'English Cocker Spaniel' },
    { name: 'dogBreed', value: 'english_setter', label: 'English Setter' },
    { name: 'dogBreed', value: 'german_shepherd', label: 'German Shepherd' },
    { name: 'dogBreed', value: 'great_pyrenees', label: 'Great Pyrenees' },
  ]

  const ageOptions = [
    { name: 'age', value: 'baby', label: 'Baby' },
    { name: 'age', value: 'young', label: 'Young' },
    { name: 'age', value: 'adult', label: 'Adult' },
    { name: 'age', value: 'senior', label: 'Senior' },
  ];

  const sizeOptions = [
    { name: 'size', value: 'small', label: 'Small' },
    { name: 'size', value: 'medium', label: 'Medium' },
    { name: 'size', value: 'large', label: 'Large' },
    { name: 'size', value: 'xlarge', label: 'Extra Large' },
  ];

  const genderOptions = [
    { name: 'gender', value: 'male', label: 'Male' },
    { name: 'gender', value: 'female', label: 'Female' },
  ];
  
    return (
      <>
        {config && (console.log(config.petType))}
        <Label>Pet type</Label>
        <RadioGroup options={typeOptions} name="petType" value="any" />
        {pet_type == "dog" && <Label>Dog Breed</Label>}
        {pet_type == "dog" && <Select options={dogBreeds} isClearable={true} isMulti={true} name="dogbreed"/>}
        {pet_type == "cat" && <Label>Cat Breed</Label>}
        {pet_type == "cat" && <Select options={catBreeds} isClearable={true} isMulti={true} name="catbreed"/>}
        <Label>Age</Label>
        <Select options={ageOptions} isClearable={true} isMulti={true} name="age"/>
        <Label>Size</Label>
        <Select options={sizeOptions} isClearable={true} isMulti={true} name="size"/>
        <Label>Gender</Label>
        <Select options={genderOptions} isClearable={true} isMulti={true} name="gender"/>
      </>
    );
  };```

If this has answered your question please mark this post as the solution, otherwise let me know if you're still stuck!

All the best, 
Mel

[mpaisley]

Here’s a screenshot showing how it works:

[AaronCollier]

Hmm. It wasn’t working before, but I went in a different direction so can’t reproduce it. Seems to be working, but I’d want to test it more if it comes up in an actual situation.

[AaronCollier]

I see it was a recent fix. So it’s now possible and I won’t try reproducing.