Make Variables Editable
In the final step, we want to make the variables for our cookie consent plugin editable, so that the user can choose his own colors and add his own content in the setup of TYPEMILL. In other words, we want to create a user interface. This might sound complicated. But it is totally easy. You don't have to write a single line of code. You just have to define the input fields in the configuration file of your plugin. So let us do this quickly.
Define Input Fields in YAML
Let us remember, that the YAML-configuration file of a plugin can have up to three parts:
- The first part defines the basic informations of a plugin like the version, the name or the author.
- The second part defines the default
settingsfor the plugin.
- The last part defines the
fieldsfor the user interface, so the user can edit the settings.
The field-definitions always start with
fields in the YAML-syntax:
You can add as many fields as you need for your plugin. The rule is: The name of the field must be the name of your default setting. So if you have a default setting for "position" like this...
settings: ... ... position: 'bottom'
... then you define an input field with the same name like this:
forms: fields: position: ... ... ...
The field definition is pretty simple. If you know how to create fields in HTML, then you also know, how to define them in YAML.
Let's have a look at the
position-field. It is a select-box with four values. I am pretty sure that you already guess how it is defined in YAML:
forms: fields: position: type: select label: Position of Cookie Banner options: bottom: Bottom top: Top bottom-left: Bottom left bottom-right: Bottom right
It is basically the same as writing HTML. You simply add the type, the label and the options.
Fields in the User Interface
TYPEMILL will read all your field definitions and automatically create a user input field in the setup. So our select-box for the position looks like this now in the user interface of the TYPEMILL setup:
![Typemill plugins in the setup]()
TYPEMILL will also insert the default value into the field and, of course, store the user input in the settings.
The Complete YAML-file
Let us check the final YAML-file for the cookie consent plugin with the basic informations, with the default settings and with the field definitions for the user interface:
If you want to learn more about the field definitions, then read the documentation about field definitions. There you can find all the possibilities that you have.
What else to say? Well, our plugin is ready now.