forio Toggle navigation

UI Builder (Deprecated)

The UI Builder has been deprecated in favor of the Interface Builder. The UI Builder is currently available for older projects, but may be removed in the future.

The UI Builder is a drag-and-drop tool that generates HTML and JavaScript, including both the components of your project's interface (charts, text, forms, images, etc.) and the connection between those components and your project's model.

You can edit or add to the generated HTML by hand, so working with the UI Builder is a nice way to get your feet wet with HTML and JavaScript coding as well.

In this section, read more about:

Getting Started

To open the UI Builder for your project:

  • From your project home page (Dashboard > [UserId] > [Project Name] or Dashboard > [Team Name] > [Project Name]), select UI Builder from the left.
  • The UI Builder appears.
  • Follow the prompt in the main workspace to select or create a file. Files should have a .html extension and the initial file is typically called index.html.
  • On the left, the design panel includes the Components tab and the Properties tab. Components are elements of the user interface, such as text, tables, or buttons. Properties describe characteristics of each component, such as how the component relates to the model as well as its size, color, or CSS class.

System Requirements:

The UI Builder and the user interfaces you create with it require one of:

  • latest Firefox,
  • latest Chrome,
  • Safari 8 or higher, or
  • Internet Explorer 10 or higher.

Model

In general, your user interface references your model to ensure that user inputs are written to model variables, model variables are displayed and updated in the interface, and operations in the model are called from the interface at appropriate times.

To connect your model to your project's interface:

  • When you create a new file, follow the prompts to enter:

    • Model File: This is the name of the primary model file — the one file in your project's Model section that explicitly exposes variables and methods. For example, this might be "myModel.vmf" or "supply-chain-game.eqn". Note: You will not be able to save your work in the UI Builder until you have selected a Model File.

    • Optionally, the Initial Operation: This is the operation (function or method) from the model to call when the run is first created.

      • If you have a Vensim model, this is probably startGame.
      • To call multiple operations serially when the run is first created, use a pipe (|) to separate them. For example: startGame | step(10).

  • If you need to change this information, select Page Properties from the upper right.

Components

In general, components are the text and graphic elements on each page of your interface. They may or may not reference specific variables or methods from your project's model. (If they do, these references are part of the component's properties.)

To add interface components to your project:

  • Select the Components tab in the design panel.
  • Drag and drop a component onto your main workspace.
  • Once the component is in your workspace, you can:
    • Drag to reposition as needed.
    • Select to edit its Properties.
    • Double-click to edit the content of headings, subheadings, text, labels, and buttons.

See also Notes for specific components and properties, below.

Properties

In general, properties describe characteristics of the component. These may be HTML characertistics such as id, class, margin, or padding. They may also be specific variables or operations that the component is referencing from the model.

To set the properties of interface components:

  • Select the interface component in the main workspace.
  • Click the properties icon immediately below the component to select the Properties tab for this component.
  • Update the appropriate property.

Notes for Specific Components and Properties

Many components and their properties are self-explanatory (text color, class, etc.). A few may be a little less familiar.

The general rule is:

  • Whenever you see the property Model Variable, you can enter the name of any variable.
  • If you have a Vensim model, remember that variable names are case sensitive. The variable names entered here must match their case with the variable names in your Vensim model.

In particular:

  • Button: The Model Operation is the name of any method from the model.
  • Column: The Y-Axis Variable, X-Axis Variable, and Legend Variable are the names of any variables in the model.
  • Decisions: This component is a form for a set of decisions. For Model Variables, enter any variables in the model, separated by new lines (carriage returns).
  • Image: This component is an image file to place on your page. The URL can be either absolute or relative to current file. (That is, all images for your project, if stored in Epicenter, should be stored in the Interface section of your project or its subfolders.)
  • Line Chart: The Y-Axis Variable, X-Axis Variable, and Legend Variable are the names of any variables in the model. The X-Axis Ticks and Y-Axis Ticks are comma-separated lists of tick marks to show on the axis. Leave blank to have the chart automatically determine reasonable placing and labeling for tick marks. (For more advanced graphing, see Flow.js and Data Visualization.)
  • Link: This component creates a link. You can style the link in the Properties. To edit the details of the link, hover over it in your main workspace and click the edit icon. You can change the link text and the destination URL. For external links, enter the entire URL (for instance, http://www.example.com). For links to files in your project, use relative paths (relative to the Interface section of your project, for instance, sub_folder/sim_page_two.html).
  • Navigation: This component allows end users to move between different HTML pages in your project. For each of the Links in the component, enter the text that the end user sees, then click the folder icon to browse for the HTML page to link. These HTML pages must be in the Interface section within your project. They may have been created with the UI Builder or manually.
  • Radio Group: This component allows users to select a value from a set. For Model Variable, enter any variable in the model. The Label is the text label for the set of options. Under Options, list each possible value that the user can select and the label for that value. Use the format value,Label, and separate the options with new lines (carriage returns).
  • Results Table: This component lists any set of variables and their values. For Model Variables, enter any variables in the model, separated by new lines (carriage returns).
  • Slider Input: This component allows users to set a value from a range. For Model Variable, enter any variable in the model. The Value Format can be any Excel-based number format, for example, #,###, $0.00, $0., etc. See the underlying Flow.js description for additional details.
  • Text Input: The Model Variable is the name of any variable from the model. The Default Value is the value to assign to that variable if the user of your project does not enter anything.
  • Variable: The Model Variable is the name of any variable from the model. The Value Format can be any Excel-based number format, for example, #,###, $0.00, $0., etc. See the underlying Flow.js description for additional details.

Saving and Previewing

When you get to a stopping point, select Save & Preview to save the interface you have created using the UI Builder. Optionally, you can view the result at forio.com/app/user-id-or-team-id/project-id.

Saving your work in the UI Builder:

  • Adds new files to the Interface section of your project. This includes: index.html (the main interface page for your project) as well as several files used in rendering your interface (the bower_components/, css/, and elements/ directories).
  • Overwrites existing files with those names. CAUTION!
  • Publishes the current version of your project's interface in a new tab or window in your browser. Depending on the project's Access, this new interface may be available to all users of your project.

You will not be able to save your work in the UI Builder until you have selected a Model File.

Customizing and Extending

You can edit the HTML and JavaScript generated by the UI Builder yourself after you're done using the UI Builder.

This generated code is primarily in the index.html file in your project's Interface section. The generated code is based on Flow.js, the JavaScript framework that sits on top of the Epicenter stack.

For more on advanced graphing, see Flow.js and Data Visualization.