Appboard/2.4/builder/widgets

HeaderFlow05.png

A "Widget" is a visual component placed on a Board. For example, the Table Widget gives a visual representation of tabular data in a familiar tabular format. Boards contain one or more Widgets, each displaying part of the data to be visualized.


AppBoard uses one or more widgets to present the data objects in a visualization that runs in the Flash Virtual Machine (VM). AppBoard does not restrict the display to certain types of Widgets. The system designer can present the data objects in whatever format will be of most value to the end-user. Typical types of widgets include the following:

  • Geographical map, displaying data overlaid on a map
  • Topological map, representing the structure of a network of devices
  • Data grid (Table)
  • Chart
  • Graph


When creating Widgets, the design elements to consider include the following:

  • Will the Widget be static or interactive? What Actions can the user take when interacting with the data, and what will be the desired behavior of the widget upon invoking these Actions?
  • Will the Widget need to interact with other Widgets?
  • What data objects and attributes are needed to display the Widget?
  • How should the Widget take updates when additional data becomes available?
  • What are the physical dimensions and layout of the Widget?


The following process defines the typical lifecycle of creating a Widget:

  1. Mock up the Widget, considering how it should display on the screen (layout, data elements, and so on).
  2. Implement the Data Collections needed to provide data to the Widget.
  3. Create data filters for displaying the appropriate data in the Widget.
  4. Define events that will trigger Actions to update the data and filters.


This page details how to manage Widgets, including creating, editing, or removing Widgets. Separate individual pages for each type of Widget provide additional detail for configuring the settings of that particular Widget.


Managing Widgets

Perform the following steps to view and manage Widgets:

  1. Log in to AppBoard Builder as an administrator.
  2. In the Builder Modes panel, select Widgets. The Widgets panel is displayed.
  3. Use the "Boards" drop-down list to limit the listed Widgets to those contained on a specific Board.

Adding Widgets

Perform the following steps to add a Widget to an existing Board:

  1. Log in to AppBoard Builder as an administrator.
  2. In the Builder Modes panel, select Widgets. The Widgets panel is displayed.
  3. Click Add. The Add Widget wizard is displayed.
  4. Click in the Widget Type box to locate and select the type of Widget to create.
    • Each available Widget Type will display icons indicating which mobile devices, if any, are supported by that Widget.
  5. Data Collection - Select the name of an appropriate Data Collection that will provide the data to be displayed in the Widget.
    • For convenience, buttons are provided for Adding or Editing a Data Collection.
  6. Widget Name - Enter the name to display for the Widget in the Widget Title Bar.
  7. [Optional] For some Widgets, a button is provided to configure an Alternate Widget to be displayed on mobile devices, if the Widget is only supported for display in the desktop AppBoard Viewer.
  8. Configure the Visualization and Options for the Widget. See the individual Widget documentation page to learn about the settings available for the selected Widget type.
  9. Click Finish.
  10. In the Builder Modes panel, select Builder and navigate to the appropriate Board to observe the new Widget.

Editing Widgets

Perform the following steps to edit an existing Widget:

  1. Log in to AppBoard Builder as an administrator.
  2. In the Builder Modes panel, select Widgets. The Widgets panel is displayed.
  3. Select a Widget and then click Edit to view the Widget's configuration.
  4. Modify the Data, Visualization, and Options for the Widget. See the individual Widget documentation page to learn about the settings available for the selected Widget type.
  5. Click Close.
  6. In the Builder Modes panel, select Builder and navigate to the appropriate Board to observe the updated Widget.


Changing a Widget Type

Perform the following steps to change the type of a Widget:

  1. Follow the steps outlined above under Editing Widgets to launch the Edit Widget Wizard.
  2. On the Data tab, select a different Widget Type.


Where possible, AppBoard will retain the Actions, Options, Data Collection, and Filter Rules that were previously configured for the Widget. There is no intelligent mapping of configuration options from one type to another, so you should expect to re-do some of the Widget configuration after changing a Widget's type.

Copying Widgets

The Copy feature allows administrators to replicate one Widget at a time via the Widgets page.


Perform the following steps to copy an existing Widget:

  1. Log in to AppBoard Builder as an administrator.
  2. In the Builder Modes panel, select Widgets. The Widgets panel is displayed.
  3. Select a Widget and then click Copy. The Copy Widget dialog is displayed.
  4. Enter the following information to create the new Widget:
    1. Name: The name to give to the new Widget
    2. Board: Select the name of Board on which to place the new Widget
    3. Data Collection Selector:
      1. Use Existing Data Collection - The new Widget will use the same Data Collection as the source Widget
      2. New Data Collection - The new Widget will have a new Data Collection that will be auto-generated by AppBoard
        1. Add a Prefix: Check the box and enter the name of a prefix to add at the beginning of the old Data Collection name when generating the name of the new Data Collection
        2. Add a Suffix: Check the box and enter the name of a suffix to add at the end of the old Data Collection name when generating the name of the new Data Collection
        3. If neither "Add a Prefix" nor "Add a Suffix" are checked, the new Widget will use a new Data Collection with the same name as the Data Collection used by the source Widget
  5. Click Copy Widget to create the new Widget that is a copy of the original Widget.


The following settings are shared between copied Widgets (all other settings are replicated per Widget):

Adding and Editing Actions

Perform the following steps to add or edit actions on a currently existing Widget:

  1. Log in to AppBoard Builder as an administrator.
  2. In the Builder Modes panel, select Widgets. The Widgets panel is displayed.
  3. Select a Widget and then click Actions. The Actions panel for that Widget is displayed.
  4. To add an Action, click the Add Action button. To edit an Action, click on any of the configured fields in a currently existing Action and make the desired changes. Actions can be deleted by clicking the red X icon for the corresponding action.
  5. Click Close when finished.

Removing Widgets

A Widget must always be tied to a specific Board. So when removing a Widget from a Board, you have two options:

  1. Move the Widget to another Board
  2. Delete the Widget from AppBoard


Moving a Widget To Another Board

Perform the following steps to move a Widget to another Board:


  1. Log in to AppBoard Builder as an administrator.
  2. In the Builder Modes panel, select Widgets. The Widgets panel is displayed.
  3. Click in the Board column for the Widget and select from the drop-down list the name of the Board to which you want to move the Widget.

Deleting a Widget From AppBoard

Perform the following steps to delete a Widget from AppBoard:


  1. Log in to AppBoard Builder as an administrator.
  2. In the Builder Modes panel, select Builder.
  3. Navigate to the Board displaying the Widget that you want to remove.
  4. Click the "X" in the upper-right corner of the Board. The message is displayed: "Are you sure you want to remove the widget? This action cannot be undone.".
  5. Click OK. The Widget is deleted from AppBoard.


Template-note.png
An alternative to the above is to select the Widget and click Delete in the Widgets panel.

Related Topics

Retrieved from "http://ab.edge-technologies.com/docs/index.php?title=Appboard/2.4/builder/widgets&oldid=3520"