Overview

The User Interface Designer facilitates the creation of the web interface for your application. From here, you can modify the contents of your page by dragging and dropping controls and wiring them up against named ranges in your spreadsheet model.

Building the Web Interface

The left-hand menu of the User Interface Designer is referred to as the Context Menu. The Context Menu of the User Interface Designer contains the series of controls that are supported by the Designer platform. Hovering over these controls will provide you with a brief description regarding their purpose.

The center area of the User Interface Designer is known as the Staging Area. The Staging Area is the section of the interface where you will define the layout and control sets in your application page.

You can drag and drop the controls from the Context Menu into the Staging Area to add a new instance of that control. The control module that you are dragging will have a dashboard border around it as you hover over a section where it can be placed. Moving a control module over an invalid drop location will not show you the preview of the control within the Staging Area. You can also move control modules that have already been created in order to change their positioning within the application.

Getting Started

You must start by adding a Section control. All other controls are placed within sections, which constitute a row within your application. Sections can be split into multiple horizontal segments by selecting their layout.

Clicking on a control module that is placed within the Staging Area will select the control (noted by the change in border around it) and will bring up the Properties Menu on the right-hand side. From here, control-specific properties can be configured, such formatting, labels, and other settings.

You can de-select a control by clicking anywhere in the staging area that does not contain another control.

In order to save changes to the properties of a control, simply click on the Submit button at the bottom of the properties menu or utilize the CTRL + Enter hotkey.

In order to delete a control, simply select it and click on the Delete button at the bottom of the properties menu or use the CTRL + Del hotkey while it is selected.

Note that deleting a structural control that contains other controls within it will also delete the nested controls.

Switching Pages / Quick Navigation

Note that the User Interface Designer is a single-page editing module. You cannot edit multiple pages simultaneously.

In order to switch between pages in the User Interface Designer, simply click on the Properties Menu icon (which looks like a Newspaper) in the top-right corner of the navigation menu and utilize the Quick Navigation to edit the target page.

If a control is selected (noted by a change in the border around it), the properties menu for that control will show up when when launching this menu. In order to de-select the control, simply click anywhere in the staging area that does not contain another control.

Structural Elements

Structural elements are the backbone of your page layout. Section and Container controls allow you to partition your page and creates a nestable space for other labels and controls.

Input Elements

Inputs allow your end-users to interact with and perform data entry into your web application. The following input types are currently supported by the Designer:

• Textbox
• Checkbox
• Dropdown
• Radio Button List
• Calendar
• File Upload
• Input Grid

Input modules can be dragged and dropped inside a Section and Container. If the placement area doesn't have a Section and Container, the system will automatically place one of each, and also create the module. Click on the control to modify its properties.

More details regarding these input elements and their properties are detailed in their corresponding help pages.

Additional input controls will be included in the Designer in future revisions.

Output Elements

Output elements can display static content or calculation results by being linked to named ranges associated with your spreadsheet model. Once the element has been placed, click on the output control to edit its contents and properties. You can add static content such as text, images, or hyperlinks into a Content control, or display a range of data using an Output Grid control.

More details regarding these output elements and their properties are detailed in their corresponding help pages.

Additional output controls will be included in the Designer in future revisions.

Action Elements

Action elements, such as buttons, facilitate the application's workflow by generating triggering triggers corresponding to a series of actions, such as save, export, and navigation. Drag and drop a Button control into a Container to add it into your page. You can then click on the button within your page and configure it to provide users with any combination of these actions.

More details regarding these action elements and their properties are detailed in their corresponding help pages.

Additional action controls will be included in the Designer in future revisions.