Customizing a Widget

Without knowing any JavaScript or HTML or CSS, you can customize a widget and make it work for your custom app. The entire process is contained in this one screen.

The options

On the left you see the customization options that the author of the widget has exposed for editing. 

Details about the Options

The author of each widget has set up the options for you to edit. You don't have to know the JavaScript behind it. Change an option, and it updates the widget's look. Here's some more details about the options

  • The author has chosen the best field type for each option.
  • There is a ? next to many options. In this popover, you can read details about the option such as the type of value to enter or what this option will adjust in the widget
  • The options are grouped in categories the author decided on, and each section can be expanded or collapsed. They are all expanded by default.
  • For number fields, you'll see increment arrows. Those will change the value by the author's chosen amount
  • The options contain sample data
  • The options contain information for the fmp protocol.
  • Some options are more advanced. They are "JS Snippet", "CSS Snippet", and "HTML Snippet". Here the author is exposing some actual coding. In most cases, the author will provide additional information about how to edit these.

The Live View

On the right you see the live update of the widget. It will update every time a change is made to the options on the left.

Other Parts

Code Editor

On the left at the bottom is a "Code Editor" button. This allows for direct creating or editing of the HTML, CSS, and JavaScript. Feel free to view it, but you don't need to open that up to make the widget work for you.

Deploy

With these buttons you can deploy the widget to your custom app by 

Export or Share the Widget

At the bottom right is a button to export the widget for sharing to others.