This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

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.

The 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.

attribute	Description	Data type	Allowed value
$schema	Schema draft information draft information	string	http://json-schema.org/schema#
type	Data 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
title	Label	string	Item label definition
description	description	string	Displayed as a tooltip
readOnly	read-only status	boolean	default: false The generated form is displayed as read-only
required	List of required input items	array	e.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.

attribute	Description	Data type	Allowed value
form	DevOps Console screen display option Only when set to true, it is displayed on the screen as a Form	boolean	default: false
render	Change renderer	string	password: Used when special handling (masking) such as passwords is required in a Form
format	string format reference reference	string	ip, hostname, uri, etc.: you can input formats provided by default in JSON Schema password_confirm: create an input field for password confirmation
form_locale	Define 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

Creating Helm Charts with Form Input Support

Helm chart that supports Form input

Helm chart file structure and values.schema.json file

Helm chart file structure

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

values.schema.json

JSON Schema Basics

Items defined in the DevOps Console

hierarchical processing

Internationalization handling

values.schema.json example

Examples by Form Type

Input

Password

Checkbox

Dropdown

enum

oneOf

Array

Object Array

values.schema.json full file creation example

system-nginx