Conditional “X-Prompt” in Angular Schematics

[Ankit-sagar32]

It seems feature to add conditional x-prompts is missing in angular schematics.

Requirement : To display conditional prompts, based on the previous selection ( "Analytics", in this case ).

Problem : For any selection, it is still displaying the prompt to add Google Analytics's Tracking Id even if i select AppDynamics or none.

References : Applying Subschemas Conditionally
Angular Schematics

Note: For Simplicity, i have removed "allOf","anyOf" etc. and code for any other analytics tool, still it was not working.

Code (Schema.json):

{
  "$schema": "http://json-schema.org/schema",
  "id": "MyDemoSchema",
  "title": "My Demo Schematics Schema",
  "type": "object",
  "properties": {
    "analytics": {
      "enum": [
        "none",
        "GoogleAnalytics",
        "AppDynamics"
      ],
      "x-prompt": "Which Analytics would you like to use?"
    }
  },
  "if": {
    "properties": {
      "analytics": {
        "const": "GoogleAnalytics"  
      }
    }
  },
  "then": {
    "properties": {
      "GoogleAnalytics": {
        "type": "string",
        "x-prompt": "Enter Tracking ID?"
      }
    }
  }
}

[Stupidism]

Any progress or workaround?

[kroeder]

I have the same goal but a different proposal. Instead of increasing the basic schema.json feature-set, I'd rather use a second function-driven API. I believe adding a condition API to a json file will increase the complexity tremendously.

Here's a proposal. It certainly contains lots of flaws and is meant as a start to discuss further possible approaches.

collection.json

{
  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
    "dynamic-generate-props": {
        "description": "Dynamic inputs",
        "factory": "./dynamic/index#dynamicSchematic",
        "schema": "./dynamic/schema#conditionalInputs"
    }
  }
}

dynamic/schema.ts#conditionalInputs

/**
 * User code
 */
interface MyInput {
    name: string;
    path: string;
    needsFooter: boolean;
    footerColor?: FooterColor;
}

type FooterColor = 'blue' | 'green' | 'red';

export function conditionalInputs() {
    return schematicsSchema<MyInput>({
        name: () => createInput({
            type: InputTypes.STRING,
            xPrompt: "Name of your component"
        }),
        path: () => executionPath(),
        needsFooter: () => createInput({
            type: InputTypes.BOOLEAN,
            xPrompt: "Do you need a footer?"
        }),
        footerColor: (prevValues) => prevValues.needsFooter 
            ? createInput({
                type: InputTypes.ENUM,
                enum: [
                    "blue",
                    "green",
                    "red"
                ],
                xPrompt: "Footer color"
            })
          : noop()
    })
}

Angular framework (pseudo code)

enum InputTypes { STRING, BOOLEAN, NUMBER, ENUM }
type InputFunction<TInput> = { [key: string]: (prevValues?: TInput) => any; }

function schematicsSchema<TInput>(userInputs: InputFunction<TInput>) {
    return {};
}

function createInput(options: any) {}

function executionPath() {}

function noop() {}

Having an interface in the user code is intentional. Right now, if I am writing a schematic, the input properties are not typed and I need to manage two lists of inputs in parallel (schema.json inputs / schematic factory code input type)

Any thoughts on this? Or maybe disagreement to a TS API? 🙂

[tomeustace]

I think you are correct that there is potential for the json to become unwieldy. However, the json approach seems like it would be more consistent and simpler to author, for most use cases. Maybe there's a case for beginning with json and allow for more powerful use cases to use what you suggest?

[kroeder]

Exactly! I might have not been clear enough

My intention was to allow two types of schema sources.

Json: easy to use for easy use cases
Ts: advanced use cases, leaving the easy to use area (though, with a good api it could still be easy enough)

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.