Creating Widget Options
The purpose of WidgetStudio is to create a widget and expose its options for customization.
Exposing Options to the Widget User
Here is a widget, a Date & Time Picker.
This library comes with many other options, and they have been exposed in WidgetStudio like this:
Instead of the option
as you see in the library's options, in WidgetStudio, we write
The text between the bookend strings can be anything you want. It might be useful to use the same name as the actual option, to remind you of what it is supposed to be.
Changing the bookend strings
By default, this placeholder text includes two underscore (__) characters before and after the variable. WidgetStudio reads these characters and knows these are placeholder text and to turn them into exposed options. These are the default characters, but you can change what is used through the Widget Settings.
Each placeholder text string exposes something to the user. WidgetStudio, thus creates a variable for that placeholder string and gives you the chance to finish defining the structure of the variable.
In this example, one option was added, so the Variable Definitions button highlighted with a 1. This variable needs to be further set up to complete the exposure of this option.
Anything can be an option
Pretty much anything in the document text can be an option.
You can expose
- A CSS Property
- A JS function parameter
- Text in the HTML
Continue reading Variable Definitions