Explore… Toolbox, Editor & Quick Nav

To help you build up functionality within application, CommonTime Infinity provides a wide variety of items which can be added to your app. Items can come in a number of different formats based on what their purpose is within the app, such as displaying content or adding functionality.

The available items reside in an area of the Studio known as the ‘Toolbox‘, separated into a number of lists based on their purpose and how they are implemented within the app. Where multiple lists are available on the same screen, the menu icon at the top of the Toolbox can be used to navigate between them.

To add a chosen item to your app, they should be dragged from the Tooolbox into an area known as the ‘Editor‘. Any items placed within the Editor will be included within your app, though may not be displayed/used until they have been configured.

On larger screens the Toolbox and Editor are placed side-by-side allowing you to see both areas at the same time. On smaller screens, only one of the screens will be shown at a time, with a set of tab provided at the bottom of the page to navigate between the two sections.

Topics covered in this article

1. Toolbox
2. Editor
3. Quick Nav

1. Toolbox

The Toolbox holds all of the items which can be added to an application. For ease of navigation, the items have been separated into a number of lists based on their purpose and how they are implemented within the Studio. Depending on your location within the Studio, a number of lists may be available. Where multiple lists can be used in the same screen, the menu icon at the top of the Toolbox can be used to change which list is displayed.

Pressing on an item within the Toolbox will reveal a short description of its use and/or behaviour. The item can then be added to the page by using the drag handle to drag it from the Toolbox onto the Editor.

Note that some items are restricted to a single instance (e.g. XMPP Config Item). Once the item has been added to the application, the drag handle will be replaced by a green tick to indicate no additional copies can be dragged into the app.

Items

Items are used to add content and structure to a page within the application. This includes the ability to capture input from a user, display information, add a button or arrange items within an area.

The ‘Items’ list contains a wide variety of items to cater for different style of applications. Some items are more specialised (such as the ‘Take Photo Button’) whereas others (e.g. Text, Number, Select) can be used in a number of different scenarios.

Actions

Actions are used to define the behaviour of a CommonTime Infinity application. They can be used to carry out a wide range of functionality within an app, such as changing pages, taking photos or calling an API.

In some cases, the action is used to call an associated config item. For example, in order to use the ‘Call API’ action, it is necessary to add and configure an ‘API’ item via the App Config screen.

My Items

Items which you frequently use within an application can be saved to the ‘My Items‘ list. These items will retain any pre-configured settings and appear in a separate ‘My Items’ list for easy access.

Note that the ‘My Items’ list will not be displayed in the Toolbox menu until one or more items have been saved.

Components

Custom web components can be added to the app to provide additional question types and functionality. Once an component has been created via the App Content screen, it will appear in the ‘Components’ section of the Toolbox.

Note that the ‘Components’ list will not be displayed in the Toolbox menu until one or more components have been created within the app.

Config

Config items are used to configure features within an application or page. This includes the ability setting up functionality (such as APIs or messaging), adding assets, modify styling and storing information.

Note that the ‘Config’ list appears on both the App Config and Page Config screens. However, the items listed within the Toolbar will differ depending one which location is selected.

Steps

Steps are used to process and manipulate data within a Dataflow. For more information, see the Dataflow documentation.

2. Editor

The Editor displays a list of items which have been added to the application. There are a number of different Editor screens used throughout the Infinity App Studio (Page Editor, Config Editor, Dataflow Editor etc) with each offering slightly different functionality based on the type of content they hold.

At the top of the Editor there are a number of buttons which can be used to configure elements of the page/flow. Some of the buttons are visible across all of the Editors, whereas other differ based on which Editor you are using. Below is an explanation of the options available within the Page Editor:

1. Back

Closes the current editor and returns to the previous screen.

Note: On Config screens this option is represented by the ‘Done’ option in the upper right corner.

2. Save as Template

Saves the current page as a template.

Note: This option is only available in the Page Editor.

3. Preview

Opens Preview mode. This pauses all development on the app and displays a preview of the app in the main Studio window.

4. Edit Mode

Enters Edit Mode which can be used to duplicate, delete or rearrange items within the Editor.

5. Config

Opens a droplist which can be used to navigate to the StudioApp and Page Config screens. Note that the list of available pages changes based on the location within the Studio.

6. Quick Nav

Opens the Quick Nav to easily navigate between pages/flows

2a. Add Items to an App

If you wish to add an item your application, locate it within the Toolbox and use the arrow symbol at the side of the the item to drag it onto the Editor. When you have positioned the item in the desired location, release the item to drop it into place.

On smaller screens (where the Toolbox is displayed in a separate tab) you can automatically swap from the Toolbox to the Editor by dragging the item to the right hand side of the screen.

If you have started to drag an item, but decide you no longer wish to add it to your app, you can drag it to the top of the editor and drop it on the bar which states ‘Drop here to cancel‘. Alternatively you can drop it onto the page and then use Edit Mode to move/delete the item.

Note that some items have additional criteria which restrict where the item can be added. For example, all page items must be contained within an Area, and Actions can only be placed within an Actionflow or ‘Actions’ tab of another item.

 

2b. Configuring Items

The majority of items contain settings which are used to control how the item looks or behaves. Once an item has been added to the Editor, you can reveal these settings by pressing on the item.

Where the item has multiple settings, these may be spread across a collection of tabs to group similar values together. Conversely, if the item cannot be configured in any way, a message will instead be displayed to indicate that there are no settings available.

The number and type of settings will vary depending on which item has been selected. Any settings which are mandatory will be highlighted in red, indicating that the item may not function correctly if these have not been set.

In some cases, the item may be pre-configured with basic settings to speed up development or help demonstrate how the item works. For example, a HTML item comes pre-populated with a sample title and text, whereas the Select item features 3 example options. These can easily be deleted/modified to suit the need of your application.

The order in which items are listed within the Editor can impact how the app appears and behaves. For example, actions will be executed in the order they are listed (from top to bottom) and the position of an item within the Page Editor will affect where how they are displayed to the end user. If you wish to re-arrange items within an editor, you can enable Edit Mode.

 

3. Quick Nav

When editing a Page, Actionflow or Dataflow, selecting the icon in the upper right corner of the Editor will reveal the Quick Nav panel. This appears on the right hand side of the screen and can be used to quickly change to another page/flow in the application without needing to return to the App Content screen.

The list of pages/flows available is restricted to the type of content which you are currently editing. For example, opening the Quick Nav from an Actionflow will only display other Actionflows.

If you decide that you no longer wish to change to another page/flow, you and press on the icon a second time to hide the Quick Nav panel.