The page has been translated by Gen AI.

Creating Helm Charts with Form Input Support

Users can create a Helm chart that supports Form input.

Reference
Only available in versions Helm 3 or higher.

Helm chart that supports Form input

When you use a Helm chart that supports Form input and run helm install, a user UI is provided that allows you to enter each field.

Helm chart file structure and values.schema.json file

Helm chart file structure

To support Form input, an additional values.schema.json file is required in the basic Helm chart file structure.

Helm chart directory structure
Figure. Helm chart directory structure

The relationship between values.schema.json and values.yaml files

Relationship between values.schema.json and values.yaml files
Figure. Relationship between values.schema.json and values.yaml files

values.schema.json

  • This file defines a JSON Schema to validate the values entered in the values.yaml file.
  • In the DevOps Console, in addition to the JSON Schema functionality, we added a feature that displays a form on the screen so that users can easily input data.

JSON Schema Basics

The values.schema.json file used in DevOps Console supports the standard format defined by JSON Schema.

Reference

For detailed guidance on the standard format, refer to the site below.

The description of the basic attributes is as follows.

attributeDescriptionData typeAllowed value
$schemastringhttp://json-schema.org/schema#
typeData type
  • The default rendering form is determined by the data type
string
  • string
    • Create an input field that receives a string
    • Render a combobox when oneOf or enum is present
    • Render an input password when render is password
  • number
    • Create an input field that receives integers and real numbers
  • integer
    • Create an input field that receives an integer
  • object
    • define a form group with properties
    • used for hierarchical structure processing
  • array
    • Rendering a list of input fields that can accept multiple data entries
  • boolean
    • checkbox rendering
  • null
titleLabelstringItem label definition
descriptiondescriptionstringDisplayed as a tooltip
readOnlyread-only statusboolean
  • default: false
  • The generated form is displayed as read-only
requiredList of required input itemsarraye.g, "required": ["username", "password"]
Table. JSON Schema property items

Items defined in the DevOps Console

The following items are defined in the DevOps Console and operate only within the DevOps Console.

attributeDescriptionData typeAllowed value
formDevOps Console screen display option
  • Only when set to true, it is displayed on the screen as a Form
booleandefault: false
renderChange rendererstring
  • password: Used when special handling (masking) such as passwords is required in a Form
formatstring format reference referencestring
  • ip, hostname, uri, etc.: you can input formats provided by default in JSON Schema
  • password_confirm: create an input field for password confirmation
form_localeDefine for internationalization processing
  • If no locale is set, use the default property values
  • Korean (ko)/English (en) support
object
  • ko
    • label
    • description
  • en
    • label
    • description
Table. Items defined in DevOps Console

hierarchical processing

To handle hierarchical structures, JSON Schema can define a "type": "object" property value and a properties attribute.
For child properties, define them under the properties item.

Below is an example that defines the service.internalPort property.

Color mode
"service": {
    "type": "object",
    "form": true,
    "properties": {
        "internalPort": {
            "type": "number",
            "title": "Container Port",
            "description": "HTTP port to expose at container level",
            "form": true
        }
<중략>
"service": {
    "type": "object",
    "form": true,
    "properties": {
        "internalPort": {
            "type": "number",
            "title": "Container Port",
            "description": "HTTP port to expose at container level",
            "form": true
        }
<중략>
Hierarchical processing example

Internationalization handling

For internationalization processing, use the form_locale attribute and define it as follows.

Korean and English are supported.

Color mode
"db": {
  "type": "string",
  "title": "DB",
  "description": "choose db type",
  "oneOf": [
    {
      "const": "in",
      "title": "internal"
    },
    {
      "const": "ex",
      "title": "external"
    }
  ],
  "form": true,
  "form_locale": {
    "ko": {
      "label": "Database",
      "description": "Select the database type"
      "internal": "internal"
      "external": "external"
    },
    "en": {
      "label": "Database"
    }
  }
}
"db": {
  "type": "string",
  "title": "DB",
  "description": "choose db type",
  "oneOf": [
    {
      "const": "in",
      "title": "internal"
    },
    {
      "const": "ex",
      "title": "external"
    }
  ],
  "form": true,
  "form_locale": {
    "ko": {
      "label": "Database",
      "description": "Select the database type"
      "internal": "internal"
      "external": "external"
    },
    "en": {
      "label": "Database"
    }
  }
}
Example of Internationalization Handling

values.schema.json example

Examples by Form Type

Input

To display the fields defined in the values.schema.json file as a form on the screen, you must set the form field’s value to true.

Color mode
{
  "$schema": "http://json-schema.org/schema#",
  "type": "object",
  "properties": {
    "form_field": {
      "type": "string", <--- create an input field that receives a string
      "form": true <----- displayed on screen when true
    },
    "hide_field": {  <-- not displayed
      "type": "string"
    }
  }
}
{
  "$schema": "http://json-schema.org/schema#",
  "type": "object",
  "properties": {
    "form_field": {
      "type": "string", <--- create an input field that receives a string
      "form": true <----- displayed on screen when true
    },
    "hide_field": {  <-- not displayed
      "type": "string"
    }
  }
}
Input processing example

Password

Color mode
{
  "$schema": "http://json-schema.org/schema#",
  "type": "object",
  "properties": {
    "password_field": {
      "type": "string",
      "form": true,
      "render": "password", <---- displayed as password
      "format": "password_confirm" <--- when adding a password confirmation input field
    }
  }
}
{
  "$schema": "http://json-schema.org/schema#",
  "type": "object",
  "properties": {
    "password_field": {
      "type": "string",
      "form": true,
      "render": "password", <---- displayed as password
      "format": "password_confirm" <--- when adding a password confirmation input field
    }
  }
}
Password processing example

Checkbox

Color mode
"enabled": {
  "title": "enable persistence",
  "type": "boolean",
  "form": true
}
"enabled": {
  "title": "enable persistence",
  "type": "boolean",
  "form": true
}
Checkbox handling example

To display a dropdown field on the screen and specify allowed values, you can use the enum and oneOf properties.

enum

Use when the text displayed on the screen matches the stored value.

Color mode
"postgres": {
  "type": "string",
  "title": "Postgres",
  "description": "choose PostgreSQL type.",
  "enum": [
    "internal",
    "external",
    "both"
  ],
  "form": true
}
"postgres": {
  "type": "string",
  "title": "Postgres",
  "description": "choose PostgreSQL type.",
  "enum": [
    "internal",
    "external",
    "both"
  ],
  "form": true
}
Enum handling example

oneOf

Use this when the displayed text on the screen and the stored value need to be different.

Color mode
"Oneof": {
  "type": "string",
  "title": "DB",
  "description": "choose db type",
  "oneOf": [
    {
      "const": "in",  <-- value saved to the yaml file when selected
      "title": "internal" <-- value displayed in the dropdown form
    },
    {
      "const": "ex",
      "title": "external"
    }
  ],
  "form": true
}
"Oneof": {
  "type": "string",
  "title": "DB",
  "description": "choose db type",
  "oneOf": [
    {
      "const": "in",  <-- value saved to the yaml file when selected
      "title": "internal" <-- value displayed in the dropdown form
    },
    {
      "const": "ex",
      "title": "external"
    }
  ],
  "form": true
}
Example of oneOf handling

Array

Color mode
"Array": {
  "type": "array",
  "items": {
    "type": "string",
    "form": true
  },
  "form": true
}
"Array": {
  "type": "array",
  "items": {
    "type": "string",
    "form": true
  },
  "form": true
}
Array processing example

Object Array

Color mode
"objectArray": {
  "type": "array",
  "title": "Object Array",
  "form": true,
  "items": {
    "type": "object",
    "form": true,
    "properties": {
      "host": {
        "type": "string",
        "form": true
      },
      "path": {
        "type": "string",
        "form": true
      }
    }
  }
}
"objectArray": {
  "type": "array",
  "title": "Object Array",
  "form": true,
  "items": {
    "type": "object",
    "form": true,
    "properties": {
      "host": {
        "type": "string",
        "form": true
      },
      "path": {
        "type": "string",
        "form": true
      }
    }
  }
}
Object Array processing example

values.schema.json full file creation example

system-nginx

Color mode
{
    "$schema": "http://json-schema.org/schema#",
    "type": "object",
    "form": true,
    "properties": {
        "service": {
            "type": "object",
            "form": true,
            "properties": {
                "type": {
                    "type": "string",
                    "title": "Service Type",
                    "form": true,
                    "enum": ["ClusterIP", "NodePort", "LoadBalancer", "ExternalName"]
                },
                "externalPort": {
                    "type": "number",
                    "title": "Service Port",
                    "description": "HTTP port to expose at service level",
                    "form": true
                },
                "internalPort": {
                    "type": "number",
                    "title": "Container Port",
                    "description": "HTTP port to expose at container level",
                    "form": true
                }
            },
            "required": ["type", "externalPort", "internalPort"]
        },
        "ingress": {
            "type": "object",
            "form": true,
            "properties": {
                "enabled": {
                    "type": "boolean",
                    "title": "Use Ingress",
                    "form": true
                },
                "domain": {
                    "type": ["string", "null"],
                    "format": "hostname",
                    "title": "Ingress Domain",
                    "description": "Default host for the ingress resource (required when `ingress.enabled=true`)",
                    "form": true
                }
            }
        },
        "networkPolicy": {
            "type": "object",
            "form": true,
            "properties": {
                "enabled": {
                    "type": "boolean",
                    "title": "Use NetworkPolicy",
                    "form": true
                }
            }
        }
    }
}
{
    "$schema": "http://json-schema.org/schema#",
    "type": "object",
    "form": true,
    "properties": {
        "service": {
            "type": "object",
            "form": true,
            "properties": {
                "type": {
                    "type": "string",
                    "title": "Service Type",
                    "form": true,
                    "enum": ["ClusterIP", "NodePort", "LoadBalancer", "ExternalName"]
                },
                "externalPort": {
                    "type": "number",
                    "title": "Service Port",
                    "description": "HTTP port to expose at service level",
                    "form": true
                },
                "internalPort": {
                    "type": "number",
                    "title": "Container Port",
                    "description": "HTTP port to expose at container level",
                    "form": true
                }
            },
            "required": ["type", "externalPort", "internalPort"]
        },
        "ingress": {
            "type": "object",
            "form": true,
            "properties": {
                "enabled": {
                    "type": "boolean",
                    "title": "Use Ingress",
                    "form": true
                },
                "domain": {
                    "type": ["string", "null"],
                    "format": "hostname",
                    "title": "Ingress Domain",
                    "description": "Default host for the ingress resource (required when `ingress.enabled=true`)",
                    "form": true
                }
            }
        },
        "networkPolicy": {
            "type": "object",
            "form": true,
            "properties": {
                "enabled": {
                    "type": "boolean",
                    "title": "Use NetworkPolicy",
                    "form": true
                }
            }
        }
    }
}
Complete values.schema.json file example
Helm Chart
Code Quality