Skip to main content

NoCode Template Builder

In the following documentation, we will explore the utilization of StackGuardian's NoCode Template Builder for creating and configuring templates. Additionally, we will delve into the various custom UI widgets introduced, understand the SG noCode tab, and provide examples for using these widgets in your templates.

The NoCode Template Builder allows users to build and configure templates using JSONSchema Form representation of input JSON data, providing a streamlined experience for creating Orchestrator Workflows without needing extensive coding knowledge.

info

The NoCode interface enables flexible UI structuring for a seamless user experience. Explore its capabilities at React JSONSchema Form.

  1. Navigate to Orchestrator > Library > select one of the subscribed templates.
  2. SG noCode: This tab contains the JSONSchema Form representation of the input JSON data, used to provide the SG noCode experience for template users.
  3. Click on “Show Schema” to enable the Form JSON Schema.

JSON Schema Example​

Below is an example of a JSON Schema defining properties, types, descriptions, and default values. Accepted types include "array", "boolean", "integer", "null", "number", "object", and "string".

{
  "$schema": "http://json-schema.org/schema#",
  "type": "object",
  "properties": {
    "enable_autoscaling": {
      "type": "boolean",
      "description": "Controls if autoscaling should be enabled for the deployment",
      "default": true
    },
    "max_replicas": {
      "type": "integer",
      "description": "Maximum number of replicas for the autoscaling group",
      "default": 10
    },
    "log_level": {
      "type": "string",
      "description": "Specifies the log level for the application (e.g., DEBUG, INFO, WARN, ERROR)",
      "default": "INFO"
    }
  },
  "required": ["enable_autoscaling", "max_replicas"]
}

Custom UI Widgets​

Apart from the types mentioned above, we introduced custom UI widgets. The following custom UI widgets enhance the user experience by providing more flexibility and functionality in form creation.

1. Textarea Widget​

Allows users to input multiline text, making it suitable for fields requiring extensive text entries, such as JSON objects.

{
    "$schema": "http://json-schema.org/schema#",
    "type": "object",
    "properties": {
        "tags": {
            "type": "string",
            "default": "Some default text"
        }
    }
}

2. MultiSelectWidget​

Enables users to select multiple options from a predefined list. This is useful for scenarios where multiple selections are needed.

{
    "$schema": "http://json-schema.org/schema#",
    "type": "object",
    "properties": {
        "mime_types": {
            "type": "array",
            "title": "A multiple-choice list",
            "minItems": 2,
            "items": {
                "type": "string",
                "enum": [
                "foo",
                "bar",
                "fuzz",
                "fooing"
                ]
            },
            "default": [
                "foo"
            ]
        }
    }
}

3. SelectWidget​

Allows users to select a single option from a dropdown list. It is similar to the default Select field in RJSF but offers additional customization.

{
    "$schema": "http://json-schema.org/schema#",
    "type": "object",
    "properties": {
        "mime_types": {
            "type": "string",
            "title": "Where are you headed?",
            "enum": [
                "canada",
                "usa",
                "international"
            ],
            "enumNames": [
                "Canada",
                "USA"
            ]
        }
    },
    "required": [
        "bucket_region",
        "mime_types"
    ]
}

4. Password Widget​

The password widget renders a string field with password type functionality, masking the input.

{
    "password": {
        "type": "string",
        "description": "Enter your password",
        "default": ""
    }
}

5. CustomAutoSuggestWidget​

The CustomAutoSuggest renders a string field with autocomplete, letting users pick from a list or enter a custom value and offering more flexibility than regular dropdowns.

{
"properties": {
    "terraformVersion": {
        "enum": [
            "1.5.7",
            "1.5.6",
            "1.5.5",
            "1.5.4",
            "1.5.3",
            "1.5.2",
            "1.5.1",
            "1.5.0",
            "1.4.6",
            "1.4.5",
            "1.4.4",
            "1.4.3",
            "1.4.2"
        ],
        "title": "Terraform version",
        "type": "string"
    }
},
"required": [
    "terraformVersion"
],
"title": "",
"type": "object"
}

6. AsyncSelectWidget​

The AsyncSelectWidget is a dynamic select component that makes an API call to fetch options. This is useful for scenarios where the options are not static and need to be retrieved from a server.

{
    "$schema": "http://json-schema.org/schema#",
    "type": "object",
    "properties": {
        "products": {
            "type": "string",
            "description": "This is an example of an async select widget",
            "default": "Samsung Universe 9"
        }
    }
}

7. CustomCodeFrontendWidget​

The CustomCodeFrontendWidget enables dynamic and context-aware customization of form fields in real-time, allowing users to fetch, process, and populate form data dynamically. Unlike the CustomCodeWidget, where the JavaScript code is executed in a backend Lambda environment, this widget executes the JavaScript directly in the user's browser.

This is useful for scenarios where users need to dynamically adjust the form fields based on real-time data, such as fetching workflow outputs from the StackGuardian API.

note

The CustomCodeFrontendWidget does not make use of Cloud Connectors (Azure, AWS, GCP) to fetch data from Cloud Providers. For these use cases, the CustomCodeWidget should be used.

Key Features​

  1. Dynamic Data Fetching: Fetch data from APIs or other sources in real-time.
  2. Custom JavaScript Support: Users can write custom JavaScript to handle data processing and form updates.
  3. Contextual Awareness: Leverages variables like sg_context for details such as org, wfgrp, stack, and wf.

How It Works​

Users provide custom JavaScript code in the apiSchema.handler configuration. This code is executed directly in the frontend (in the user's browser) to process data and dynamically update the jsonSchema and uiSchema of the form.

Accessible Variables in JS Code​

  • sg_context:
    • viewContext: Contains contextual keys like org, wfgrp, stack, wf.
    • token: User's authentication token for making secure API calls.
    • user: Provides user details, such as email and role.
    • triggerInfo: Contains information about the trigger of code execution, including:
      • triggerType: Specifies the type of trigger that initiated the code execution, such as "onSelection" or "onLoadItems".
      • valueSelected: Present only when "triggerType" is "onSelection", representing the value selected by the user during execution.
  {
    "$schema": "http://json-schema.org/schema#",
    "type": "object",
    "properties": {
        "workflows": {
            "type": "string",
            "title": "Workflow List",
            "description": "Select your workflow",
            "enum": [
                "CUSTOM-TEdH",
                "CUSTOM-4sg7",
                "test-26-May",
                "CUSTOM-gitlab",
                "CUSTOM-github",
                "aws-s3-demo-website-0OH2-Copy",
                "aws-s3-demo-website-0OH2"
            ]
        },
        "outputs": {
            "title": "Workflow Outputs",
            "type": "string"
        }
    }
 }

8. CustomCodeWidget​

The CustomCodeWidget enables dynamic and context-aware customization of form fields in real-time. By executing custom JavaScript (JS) code in a Node.js v20 runtime environment, it allows users to fetch, process, and populate form data dynamically.

Key Features​

  1. Dynamic Data Fetching: Fetch data from APIs or other sources in real-time.
  2. Custom JavaScript Support: Users can write custom JS code to handle data processing and form updates.
  3. Runtime Environment: Executes in a Node.js v20 environment with pre-configured capabilities.
  4. Contextual Awareness: Leverages variables like sg_context for details such as org, wfgrp, stack, and wf.

How It Works​

Users provide custom JavaScript code in the apiSchema.handler configuration. This code is executed to process data and dynamically update the jsonSchema and uiSchema of the form.

Accessible Variables in JS Code​

  • sg_context:
    • viewContext: Contains contextual keys like org, wfgrp, stack, wf.
    • token: User's authentication token for making secure API calls.
    • user: Provides user details, such as email and role.
    • triggerInfo: Contains information about the trigger of code execution, including:
      • triggerType: Specifies the type of trigger that initiated the code execution, such as "onSelection" or "onLoadItems".
      • valueSelected: Present only when "triggerType" is "onSelection", representing the value selected by the user during execution.
  • deploymentPlatformConfig: Contains configurations for the selected connector, if applicable.
  {
      "$schema": "http://json-schema.org/schema#",
      "type": "object",
      "properties": {
          "workflow_output": {
              "title": "Workflow Outputs",
              "type": "string"
          }
      }
  }

These custom UI widgets enhance the user experience by providing more flexibility and functionality in form creation. By leveraging these widgets, users can create more interactive and dynamic forms tailored to their specific needs.