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.

It comes with many options. These are found in the calling JavaScript function and are formatted as key/value pairs.

This library comes with many other options, and they have been exposed in WidgetStudio like this:

In WidgetStudio, we create create placeholder text inside the HTML or CSS or JavaScript. This placeholder text then creates variables that we can further set up. 

Instead of the option 

singleDatePicker: true

as you see in the library's options, in WidgetStudio, we write

singleDatePicker: __singleDatePicker__

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 JavaScript Library option
  • A JS function parameter
  • Text in the HTML

You can even expose snippets of HTML or CSS or JavaScript. These are useful but require good documentation for the average WidgetStudio user to understand if you plan on sharing the widget.

Continue reading Variable Definitions