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.

UI Schema Properties​

  1. API Schema - The apiSchema key in the UI schema is used to define the logic required for dynamic behavior. It allows you to pass custom JavaScript code, specify when it should run, and provide cloud configuration to support it.
    1. handler - JavaScript code to be executed based on the trigger. Typically used to fetch dynamic options or perform actions on selection.
    2. triggerType - The triggerType key defines when the JavaScript code should be executed. It supports the following values:
      • onLoadItems – Executes the JavaScript code when the options dropdown is opened. Applicable only to select and multiselect fieldTypes.
      • onSelection – Executes the JavaScript code when an option is selected from the dropdown or after value has been passed in case of string fieldType.
  2. Field Type – The fieldType key in the UI schema determines the type of input field to render. It supports the following values:
    • select – Renders a single-select dropdown input. This is the default fieldType and is commonly used for selecting one item from a list.
    • multiselect – Renders a multi-select dropdown input, allowing users to choose multiple options.
    • string – Renders a basic text input field.

Accessible Variables in JS Code​

  • fetch - The standard JavaScript Fetch API, used for making network requests.
  • sg_context - Provides contextual information and user metadata.
    • viewContext - Contains contextual identifiers related to the current form or view. Keys may include:
      • org
      • wfgrp
      • stack
      • wf
      • template
      • templateType
    • user - Contains information about the current user, such as:
      • email
      • role
    • token - The user's ID token (JWT). Can be used to authenticate API requests to StackGuardian’s backend or other secured endpoints.
    • jsonSchema - This can be used to access current jsonSchema.
    • uiSchema - This can be used to access current uiSchema.
    • formSource - This can be used to access form source i.e where exactly from is being rendered. Possible values: WORKFLOW_UPDATE, WORKFLOW_CREATE, TEMPLATE_UPDATE, TEMPLATE_CREATE and POLICY_UPDATE.
    • triggerInfo - Use this to access information about the trigger of code execution. triggerInfo will always contain triggerType (onSelection or onLoadItems), and valueSelected will only be present when triggerType is onSelection, which indicates the value selected by the user.
  {
    "$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.

UI Schema Properties​

  1. API Schema - The apiSchema key in the UI schema is used to define the logic required for dynamic behavior. It allows you to pass custom JavaScript code, specify when it should run, and provide cloud configuration to support it.
    1. handler - JavaScript code to be executed based on the trigger. Typically used to fetch dynamic options or perform actions on selection.
    2. triggerType - The triggerType key defines when the JavaScript code should be executed. It supports the following values:
      • onLoadItems – Executes the JavaScript code when the options dropdown is opened. Applicable only to select and multiselect fieldTypes.
      • onSelection – Executes the JavaScript code when an option is selected from the dropdown or after value has been passed in case of string fieldType. The onSelection trigger in the string field Custom Code widget functions behaves like an onblur event. That is , this trigger activates when the user clicks away from or leaves the field, rather than when text is selected within the field.
    3. Deployment Platform Config - Cloud providers can be passed and then used inside Javascript code using deploymentPlatformConfig.
  2. Field Type – The fieldType key in the UI schema determines the type of input field to render. It supports the following values:
    • select – Renders a single-select dropdown input. This is the default fieldType and is commonly used for selecting one item from a list.
    • multiselect – Renders a multi-select dropdown input, allowing users to choose multiple options.
    • string – Renders a basic text input field.

Accessible Variables in JS Code​

  • fetch - The standard JavaScript Fetch API, used for making network requests.

  • SDK - The SDK object provides access to classes and methods exported by the following JavaScript cloud SDKs:

    • @azure/identity
    • @azure/arm-resources
    • @aws-sdk/client-ec2
    • @aws-sdk/client-ssm

    These SDKs can be used within your JavaScript code to interact with Azure and AWS services programmatically.

  • sg_context - Provides contextual information and user metadata.

    • viewContext - Contains contextual identifiers related to the current form or view. Keys may include:
      • org
      • wfgrp
      • stack
      • wf
      • template
      • templateType
    • user - Contains information about the current user, such as:
      • email
      • role
    • token - The user's ID token (JWT). Can be used to authenticate API requests to StackGuardian’s backend or other secured endpoints.
    • deploymentPlatformConfig - Provides configuration details for the selected cloud connector, if any. These are the AWS and Azure deployment platform configurations that can be accessed:
      • **AWS*: integrationId, profileName, awsDefaultRegion, awsAccessKeyId, awsSecretAccessKey
      • **AZURE*: integrationId, profileName, armClientSecret, armClientId, armSubscriptionId, armTenantId
    • jsonSchema - This can be used to access current jsonSchema.
    • uiSchema - This can be used to access current uiSchema.
    • formSource - This can be used to access form source i.e where exactly from is being rendered. Possible values: WORKFLOW_UPDATE, WORKFLOW_CREATE, TEMPLATE_UPDATE, TEMPLATE_CREATE and POLICY_UPDATE.
    • triggerInfo - Use this to access information about the trigger of code execution. triggerInfo will always contain triggerType (onSelection or onLoadItems), and valueSelected will only be present when triggerType is onSelection, which indicates the value selected by the user.
  {
      "$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.

Custom Code Alerts​

Overview​

StackGuardian's SG NoCode enables users to use templates without writing infrastructure code. However, certain templates may contain custom frontend or backend code, which might contain unverified or potentially harmful logic.

To improve transparency, user safety and reduce the risk of unintentionally running malicious code, the platform empowers users to make informed decisions by clearly identifying Templates when such custom logic is detected. These alerts give users visibility into the presence of Custom Code, before proceeding with usage or activation.

info

Users must explicitly acknowledge the Custom Code before form fields become interactive. Each time the SG NoCode tab is reloaded, the Custom Code acknowledgment resets, causing the alert to reappear and the flow to restart.

Key Features​

  1. Alert on the SG NoCode Tab - Revision: Draft - Displays an inline alert whenever a template includes custom code.

    • When a user is viewing a template and the SG NoCode tab is selected, users see an inline alert indicating the presence of Custom Code;
    • Enter "Edit mode" to view all the code in full context;
    • Trigger Properties modal to review the Custom Code with more details;
    • Choose to "Acknowledge Custom Code";
    • After Custom Code is Acknowledged, fields and buttons are enabled and the form becomes functional.

    View SG NoCode Tab - Draft

  2. Alert on the SG NoCode Tab - Revision: Published - Displays an inline alert whenever a template includes custom code.

    • When a user is viewing a template and the SG NoCode tab is selected, users see an inline alert indicating the presence of Custom Code;
    • Click "View source" to view all the code in full context
    • Trigger Properties modal to review the Custom Code with more details
    • Choose to "Acknowledge Custom Code"
    • After Custom Code is Acknowledged, fields turn into "read only" (since editing is not available for published templates) and buttons are enabled

    View SG NoCode Tab - Published

  3. Alert on Template Activation - Displays an inline message before template execution, ensuring users are aware of any embedded logic.

    • Before activation, the system prompts the user with an info message if the latest published template revision contains custom code.
    • User can decide to check SG No Code tab to review the custom code before activating.

    Activating Template with Custom Code

Security Best Practices​

When working with templates that contain Custom Code:

  1. Review the Code: Always examine the custom JavaScript code in the CustomCodeWidget or CustomCodeFrontendWidget before acknowledging
  2. Understand the Logic: Ensure you understand what the Custom Code does, especially if it makes API calls or processes sensitive data
  3. Verify Sources: Check that any external API endpoints or data sources used in the Custom Code are trusted
  4. Test in Safe Environment: Consider testing templates with Custom Code in a development environment before using in production
  5. Regular Review: Periodically review templates with Custom Code to ensure they still meet your security requirements
Security Recommendation

Only acknowledge Custom Code in templates from trusted sources. If you're unsure about the safety of Custom Code, consult with your security team or StackGuardian support before proceeding.