Interface Builder

The Interface Builder allows you to create the user interface for your project by selecting templates, then filling out simple forms to add components like charts and tables. The Interface Builder generates HTML files in the Interface section of your project.

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

In this section, read more about:

• System Requirements for the Interface Builder
• Choosing your Project Type
• Working with Global Settings
• Working with Pages
• Working with Components and Properties
• Previewing, Saving, and Publishing

System Requirements for the Interface Builder

Supported Browsers for working with Interface Builder: Chrome, Firefox.

Supported Browsers for interfaces created using Interface Builder: Chrome, Firefox, Internet Explorer (Edge), Safari.

Supported Modeling Languages: Excel, Forio SimLang, Powersim, Stella, Vensim.

If your project uses one of the other modeling languages supported by Epicenter, you'll need to create your interface by writing your own code, for example using the JavaScript libraries Flow.js or Epicenter.js, or using the Epicenter RESTful APIs.

Choosing your Project Type

The first time you work with Interface Builder for a project, you are prompted to choose which type of project you are building.

• Turn by Turn projects are usually time-based and simulated one step at a time. For example, many projects that allow users to input data or change variables after each time step use this type.

• Run Comparison projects typically also have time-based models, but are usually simulated to the end once initial assumptions are set. Then, these scenarios (that is, these runs with different initial assumptions, all simulated to the end) can be compared. For example, many projects that look at the effects of different policy decisions use this type.

Working with Global Settings

The Global Settings allow you to customize information that is shared across all of the pages in your project.

• Project Defaults includes settings for number formats for charts and variables.
• Header/Footer Settings includes information that should appear in the header or footer for all pages, such as the project title, logo, and copyright notice.
• Model Settings includes information about the state of the model when end users first begin working with your project.
  • Optionally, you can specify one or more model operations that you want to call immediately after a run is created.
  • Optionally, you can also designate which variables from your model are "output" variables (those intended for display in graphs or tables). Adding variables here automatically adds them to your model context file.
• Navigation Settings allows you to change the navigation that appears on each page:
  • Add navigation items (especially useful if you have added new pages)
  • Edit the labels and page links for each navigation item
  • Remove or reorder existing navigation items
  • Add a drop-down menu and populate it with navigation items
• Themes allows you to choose from several pre-built themes (colors, fonts, styles) for your project.

Working with Pages

When you first start creating the user interface for your project, Interface Builder automatically makes several basic pages.

Each page is filled with empty components — labels, variables, charts, and buttons — that you can customize or remove. Additionally, each page has a header, footer, and navigation.

You can customize the header, footer, and navigation in the Global Settings. Changes you make there are shared across all of the pages in your project.

To add new pages, select Add Page. Then, select the Page Type and choose from the available templates.

To delete pages, click the trash icon next to the page name.

Once you have added or deleted a page, remember to adjust your project's navigation using the Navigation Settings.

Working with Components and Properties

As soon as you have one or more pages, you can begin customizing the components for each page:

1. Select the page you want to work on from the Pages list.
2. Click to select any of the components on that page.
   • Most components are labeled with their purpose, for example "Click to set chart type" or "Click to set decision type."
   • A few components are labeled with the function they are set up to perform by default, for example, a "Simulate" button that calls the step operation to advance your model by one step.
3. Fill in the Properties for the selected component.
   • In some cases, for example with text or buttons, the properties are immediately available.
   • In other cases, for example with decisions (variables that the end user will enter) or charts, you must first choose from a few options for the display of the component. For instance, for decisions you must choose the input type (text input, slider). For charts, you must choose the chart type (column, line, bar, pie). Once the basic component display is set, you can set the other properties.

Labels are available on the Introduction pages. Label properties include:

• Header Text

Decisions are available on the Introduction and Decisions pages. Decision properties include:

• Input Type: Text Input or Slider
• Label
• Model Variable
• Number Format
• Min. (sliders only)
• Max. (sliders only)
• Increment (sliders only)

Buttons are available on the Introduction and Decisions pages. Button properties include:

• Button Text
• Operation
• Parameters

Charts are available on the Dashboard and Report pages. Chart properties include:

• Chart Type: Column Chart, Line Chart, Bar Chart, Pie Chart
• Title
• Data
  • X-Axis Variable (column, line, and bar charts)
  • Y-Axis Variable (column, line, and bar charts)
  • Variable (pie charts)
  • Display Name (dependent variables in all charts)
  • Title (dependent variable axis in column, line, and bar charts)
  • Number Format (dependent variable axis in column, line, and bar charts)
• Legend (enabled or not)

Tables are available on the Report pages. (There is also a table on the Run Manager page, but it is not configurable.) Table (row) properties include:

• Time Variable
• Label
• Model Variable
• Number Format

Page Legends are available on the Dashboard pages. Page Legend properties include:

• Legend For (choose from the charts on the page)

Previewing, Saving, and Publishing

• While working in the Interface Builder, you can toggle the Preview at any time. When enabled, the Preview display shows you what end users will see when interacting with your project. You can use the device icons to preview your UI on specific devices or screen sizes.

• The Interface Builder automatically saves your work both when you change pages, when you Preview, and when you return your project's dashboard. You can also save your changes manually as you work, using the Save button in the upper right.

• Once saved, your project's user interface is immediately available for end users in your project. If you would like to restrict access to your project during development, you have several options:

  • Keep your project access settings set to "Private" until you are ready for end users to play with the project; and/or
  • Do not assign end users to groups for this project until you are ready for end users to play with it. (Remember that end users are created for each team and can then be assigned to different projects. See more on end users and groups.)