HTML Widget Controls

Monday, 14 August 2017 by Paul Hammond

Controls for HTML Widgets are now provided to make creating HTML Widgets easier and to provide functionality required to implement customisable forms in finPOWER Connect Cloud.

Our online demo lets you check out the latest build of finPOWER Connect Cloud.

NOTE: This is regularly updated to show new features and may not match screenshots shown in this article.

Overview

Versions of finPOWER Connect prior to 3.00.06 required the use of vanilla HTML controls or external libraries.

Since we are implementing many finPOWER Connect Cloud forms (such as Client Contact Methods) as HTML Widgets, we had the requirement to make available to HTML Widgets the controls used by built-in finPOWER Connect Cloud forms such as the Client Log form.

This allows all forms to look consistent and for controls to interact with finPOWER Connect Cloud, e.g.:

Widget Controls

Basic Controls

Some of the more basic Widget controls include:

  • CheckBox
    • A Check Box (including "Radio Button" styling)
  • ComboBox
    • A dropdown list into which the user can also type a value
  • DateBox
    • Date entry including a dropdown calendar
  • NumberBox
    • Number entry including currency (monetary) values
  • TextBox
    • Single and multi-line text entry

Advanced Controls

Grid

The Grid control is useful for reports and displaying tables of information.

It allows sortable columns, grouping and also limited editing, e.g., displaying check boxes.

Grid

ButtonList

The ButtonList control is useful for displaying a list of icons, e.g., to allow the User to select a Contact Method:

Button List

Scripting

All of the Widget controls are JavaScript objects which can be scripted via the Scripts form in finPOWER Connect (on the "Template Text" page).

Limited Intellisense in provided for creating Widget controls and pressing Alt+F1 displays Widget help, including help for Widget controls.