Make Variables Editable
In the final step, we want to make the variables for our CookieCconsent plugin editable, so that the user can choose his own colors, and add his own content in the TYPEMILL UI. 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'ss do this quickly.
Define Input Fields in YAML
Let'ss remember that the YAML configuration file of a plugin can have up to three parts:
- The first part defines the basic properties 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 guessed 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 TYPEMILL settings UI. So our select-box for the position looks like this now in TYPEMILL:
![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's check out the final YAML file for the Cookie Consent plugin with the basic information, 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 discover all the possibilities available to you.
What else is there to say? Well, our plugin is ready now.