Dependent Selector Configurations

The last article explained how to make a dynamic configuration, a setting where the options are fetched from an API or database so they change from tenant to tenant

This article will explain how to make a dependent selector configuration, a setting where the options are fetched from an API or data base and vary based on the user's selection of an earlier config (which can also be dynamic)

Here is an example of a dependent selector configuration:

A tenant settings page that allows the the user select their favorite food.

The options for the favorite food will be fetched from an API or database, so they will be different from tenant to tenant.

There will also be a food type configuration.

• The user's selection for food type will also affect what options are presented to the user when they are selecting their favorite food.

• The food type config is also dynamic, so the food type options will vary from tenant to tenant.

Here are what the options could look like to different users:

• Tenant A: food type options will be Sweet and Savory.

  

  The only food type option for Tenant A are "Sweet" and "Savory"

  • If the user chooses food type Sweet then the favorite food options will be: Chocolate, Caramel, Jello

  

  When the user selects the "Sweet: food type, the options for favorite food are only sweet foods.

  • If the user chooses food type Savory then the favorite food options will be: Chips, Pizza, Bread

  

  When the user selects the "Savory" food type, the options for favorite food are only savory foods.
• Tenant B: food type options will be Fruits and Veggies.

  

  The only food type option for Tenant B are "Fruits" and "Veggies"
• If the user chooses food type Fruits then the favorite food options will be: Strawberry, Banana, Kiwi

  

  When the user selects the "Fruits" food type, the options for favorite food are only fruits.
• If the user chooses food type Veggies then the favorite food options will be: Carrot, Broccoli, Pepper

  

  When the user selects the "Veggies" food type, the options for favorite food are only vegetables.

A dependent dynamic configuration is implemented by creating a parent selector and a dependent selector:

1. Create the parent selector: This is the dynamic configuration whose selected value determines the options available for the dependent selector.

   • In this example the parent selector is the food_type.

   • Here is a quick review on how to set up a dynamic configuration:

     1. Like other dynamic configurations, the schema property for this must have a reference to a list of options in the schema's definitions.

        • In this example the food_type schema property must have a reference to food_type_options.

     2. Like other dynamic configurations, the schema needs to have a definitions section with an entry that has the options for the parent selector.

        • In this example the schema definitions must include a list of food_type_options.

     3. Like a normal configuration, the uischema elements section must have an entry for the parent selector.

        • In this example there must be a uischema element with type: control and scope: '#/properties/food_type'

     4. Like other dynamic configurations, the integration's code must have an init sync which fetches the tenant specific options for the parent selector and prints them to the standard out.

        • Its value must be an array of objects, each of which has a const and title property. The const will be the ID of that option, and the title will be the name of the option.

        • In this example the standard out of an init sync must include food_type_options

          • It could look like this: food_type_options = [

            {'const': 1, 'title': 'Fruits'},

            {'const': 2, 'title': 'Veggies'},

            ]

          • It could look like this: food_type_options = [

            {'const': 3, 'title': 'Sweet'},

            {'const': 4, 'title': 'Savory'},

            ]

2. Create a dependent selector: This is the configuration whose options will depend on the parent selector and the values fetched from a database/API.

   • In this example the dependent selector is favorite_food.

   • Here is how a dependent selector is set up:

     1. Like a normal configuration, the schema property for this must have a type. The type for a dependent selector should be string.

     2. Like other dynamic configurations, the schema needs to have a definitions section with an entry that has the options for the dependent selector. It's type should be object.

        • In this example the schema definitions must include a list of food_options.

     3. Like a normal configuration, the uischema elements section must have an entry for the dependent selector. However a dependent selector's uischema element has some additional requirements:

        1. Its type must be DependentSelectControl.

        2. It must have an options property which includes:

           1. dependentMappingsScope: This must reference the schema definition that has the options for the dependent selector.

              • In this example it will be '#/definitions/food_options'.

           2. parentScope: This must reference the schema property for the parent selector which controls the options that will be present.

              • In this example it will be '#/properties/food_type'

     4. Like other dynamic configurations, the integration's code must have an init sync which fetches the tenant specific options for the dependent selector and prints them to the standard out.

        • It's value must be a map of the option type IDs (from the parent selector) to a list of the options for that type.

        • All the options for every list must be either entirely string or entirely oneOf(an objects with a title and const)

        • In this example each option for every list will be a string.

        • In this example the standard out of an init sync must include food_options

          • It could look like this food_options = {

            1: ['Strawberry', 'Banana', 'Kiwi'],

            2: ['Carrot', 'Broccoli', 'Pepper']

            }

          • It could look like this food_options = {

            3: ['Chocolate', 'Caramel', 'Jello'],

            4: ['Chips', 'Pizza', 'Bread'],

            }

Putting it all together

The configs section of the PANDIUM.yaml would include this:

configs:

  schema:
    definitions:
      food_type_options:
        oneOf:
          - const: Placeholder
            title: Placeholder
      food_options:
        type: object
    properties:
      food_type:
        $ref: "#/definitions/food_type_options"
      favorite_food:
        type: string

  uischema:
    type: VerticalLayout
    elements:
      # Parent
      - label: Food Type
        scope: '#/properties/food_type'
        type: Control
      # Dependent
      - label: Favorite Food
        scope: '#/properties/favorite_food'
        options: 
          dependentMappingScope: '#/definitions/food_options'
          parentScope: '#/properties/food_type'
        type: DependentSelectControl

A TypeScript implementation of the init sync of the integration in could look like this:

if (pandium.context.runMode === 'init') {
    const foods = await foodClient.getMany('food');
    /* foods is a list that could look like this: 
    [
     { type: 'Sweet', name: 'Chocolate' },
     { type: 'Sweet', name: 'Caramel' },
     { type: 'Sweet', name: 'Jello' },
     { type: 'Savory', name: 'Chips' },
     { type: 'Savory', name: 'Pizza' },
     { type: 'Savory', name: 'Bread' },
    ]
    */
    
    // Loop over the foods to identify the food types.
    const uniqueFoodTypes = foods.reduce((foodTypesList, currentFood) => {
      if(!foodTypesList.includes(currentFood.type)){
        foodTypesList.push(currentFood.type)
      }
      return foodTypesList
    }, [] )
    
    // Map each food type to the oneOf format
    const foodTypes = uniqueFoodTypes.map((type, index) => {
      return {
        const: index + 1,
        title: type
      }
    })
    /* foodTypes could look like this:
    [
     { const: '1', title: 'Sweet' },
     { const: '2', title: 'Savory' },
    ]
    */
    
    // Create a map from food type to ID, which can be used to organize foods into lists by type.
    const foodTypeToIdMap = foodTypes.reduce((typeToIdMap, foodType) => {
      typeToIdMap[foodType.title] = foodType.const
      return typeToIdMap
    }, {})
    /* foodTypeToIdMap could look like this:
    {
      'Sweet': '1',
      'Savory': '2'
    }
    */
    
    // Organize the foods into lists of their types
    foodListByTypeId = foods.reduce((foodListByType,currentFood) => {
      const typeId = foodTypeToIdMap[currentFood.type]
      if(!foodListByType[typeId]) {
        foodListByType[typeId] = [] 
      }
      foodListByType[typeId].push(currentFood.name)
      return foodListByType
    }, {} )
    /* foodListByTypeId could look like this:
    [
      '1': ['Chocolate', 'Caramel', 'Jello' ],
      '2': ['Chips', 'Pizza', 'Bread']
    ]
    */

    const stdout = {
      food_type_options: foodTypes,
      food_options: foodListByTypeId
    };
    // Print json string to stdout and end the script.
    console.log(JSON.stringify(stdout));
    return
}

Another example

This example has a static parent selector and the options for the dependent selector will be oneOf rather than string.

The configs section of the PANDIUM.yaml would include this:

configs:
  schema:
    type: object
    definitions:
      pokemon_types:
        oneOf:
          - const: Fire
            title: Fire
          - const: Water
            title: Water
          - const: Rock
            title: Rock
          - const: Flying
            title: Flying
      pokemon_options:
        type: object
    properties:
      pokemon_type:
        $ref: "#/definitions/pokemon_types"
        type: string
      pokemon_1:
        type: string
      pokemon_2:
        type: string

  uischema:
    type: VerticalLayout
    elements:
      - label: Pokemon Type
        scope: "#/properties/pokemon_type"
        type: Control
      - type: Section
        label: Pokemon Selection
        hintText: Choose your Pokemon
        elements:
          - label: First Pokemon
            scope: "#/properties/pokemon_1"
            options:
              dependentMappingScope: "#/definitions/pokemon_options"
              parentScope: "#/properties/pokemon_type"
            type: DependentSelectControl
          - label: Second Pokemon
            scope: "#/properties/pokemon_2"
            options:
              dependentMappingScope: "#/definitions/pokemon_options"
              parentScope: "#/properties/pokemon_type"
            type: DependentSelectControl

A TypeScript implementation of the init sync of this integration in could look like this:

if (pandium.context.runMode === 'init') {
    const pokemon = await pokeClient.getMany('pokemon');
    /* pokemon is a list that could look like this: 
    [
     { type: 'Fire', name: 'Charmander', id: 1 },
     { type: 'Fire', name: 'Vulpix', id: 2  },
     { type: 'Water', name: 'Squirtle', id: 3  },
     { type: 'Water', name: 'Poliwag', id: 4  },
     { type: 'Rock', name: 'Geodude', id: 5  },
     { type: 'Rock', name: 'Onix', id: 6  },
     { type: 'Flying', name: 'Butterfree', id: 7 },
     { type: 'Flying', name: 'Pidgeot', id: 8  },
    ]
    */

    // The parent control, pokemon_type, has a static list of options: pokemon_types. 
    // so the unique options for pokemon_types do not need to be identified.
    const pokemonOptions = {
      Fire:[],
      Water:[],
      Rock: [],
      Flying: [],
    }

    // Add each pokemon to the list for the appropriate type.
    for (const currentPokemon of pokemon) {
      pokemonOptions[currentPokemon.type].push({
        title: currentPokemon.name,
        const: currentPokemon.id
      })
    }
 
    /* pokemonOptions could now look like this:
    {
      Fire: [ 
          { title: 'Charmander', const: '1'},  
          { title: 'Vulpix', const: '2' },
      ],
      Water: [ 
          { title: 'Squirtle', const: '3'},  
          { title: 'Poliwag', const: '4' },
      ],
      Rock: [ 
          { title: 'Geodude', const: '5'},  
          { title: 'Onix', const: '6' },
      ],
      Flying: [ 
          { title: 'Butterfree', const: '7'},  
          { title: 'Pidgeot', const: '8' },
      ]
    }
    */
    

    const stdout = {
      pokemon_options: pokemonOptions
    };
    // Print json string to stdout and end the script.
    console.log(JSON.stringify(stdout));
    return
}