Tutorial - Full Page Preferences Editor (with Preview)

This tutorial has not yet been re-written to reflect the recent refactoring of the Preferences Framework. Stay tuned...

The Full Page With Preview version of UI Options displays the interface controls in a separate page and includes a Preview pane that is updated automatically as the user adjusts the controls. This tutorial will walk you through the process of setting up the full page with preview version of UI Options.

NOTE that the UI Options component is pretty much useless without the UI Enhancer added to the pages of your site, so we highly recommend you visit the UI Enhancer tutorial to learn how to add the UI Enhancer to the pages of your site.

This tutorial assumes that:

you are already familiar with HTML, Javascript and CSS,
you are familiar with what the UI Options and UI Enhancer are and do, and
now you just want to know how to add them to your application.

Scenario

You're putting together a website that you know will have a diverse audience. You'd like to allow your visitors to customize the presentation of the site to their individual needs, such as enlarging the text, or increasing the visual contrast. This tutorial will show you how create a page for the Infusion UI Options component.

These are the basic steps to create a UI Options page for your site:

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

Tutorial - Full Page Preferences Editor (with Preview)

Scenario