Getting Started

Welcome to CommonTime Infinity. To help you get started, this tutorial will guide you through some of the basics of using the Infinity App Studio. Along the way you will learn how to create a new App, explore some of the Studio’s features and find out how to preview your work. 

The example app featured in this guide will capture some basic details about a customer. It will include a number of basic elements, including 3 different input fields, a header, signature box and a navigation button to change pages. Once completed it should look similar to the images shown below:

Topics covered in this article

1. Create an app
2. Create a Page
3. Add Content
4. Additional Pages
5. Preview the App
6. Further Documentation

1. Create an App

Within CommonTime Infinity, all of the pages, files and styling related to an application is stored within an ‘App‘. You can edit an existing app by selecting its icon from the App List. Alternatively you can create a new app by selecting the ‘Create App’ button.

Each app has a number of settings which can be used to configure elements of your application (e.g. metadata, Push Notifications etc). For a full list of settings please see this documentation, or use the steps below to get started:

  1. Select the ‘Create App‘ button on the App List.
  2. Enter a name (e.g. ExampleApp) for the application.
  3. Choose an icon for the app.
  4. Select a splash screen which will be shown when the app is loading.
  5. Press the ‘Save‘ button.

2. Create a Page

Pages are used to hold content, input fields and buttons which the user can interact with. Each page represents an individual screen which can be displayed to the user.

The App Content screen lists all of the pages held within your app. You can enter an existing page by selecting it from the page list, or add a new one using the ‘Create Page’ button.

Below are a set of steps for creating a basic page. For more details on the options available when creating a page, see this page.

  1. Select the ‘Create Page‘ button on the App Content screen.
  2. Enter a name (e.g. Details) for the page.
  3. Select the ‘Blanktemplate.
  4. Select the ‘Save‘ button.

3. Add content to the Page

The contents of your app is built up using a series of ‘Items’. To accommodate different styles of applications, CommonTime Infinity includes a wide variety of items, varying from a simple text input field to an audio player.

All of the available items which you can add to an application are displayed within the Toolbox. On larger screens this will appear as a sidebar on the left hand side, whereas smaller screens will provide tabs at the bottom of the page to switch between the Toolbox and the Editor.

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.

3a. Add an Area

Areas are container items which are used to keep a page organised and determine how the items should be arranged. The ‘Areas’ section of the Toolbox provides a number of different areas, which includes some basic areas (Scrollable, Static, Row) and some that are more specialised (Title Bar, Button Bar).

To start building up a basic page:

  1. Locate the ‘Scrollable Area‘ in the Toolbox.
  2. Use the arrow symbol on the right hand side of the item, drag the area into the Editor. On smaller screens, drag the item to the left hand side of the Toolbox to switch to the Editor.
  3. Drop it onto the Editor to add it to the page.

3b. Add Items

Each of the items within the Toolbox provides a different way to display information and capture input from the user. By adding a number of different items to your page it is easy to quickly build up a range of fields and functionality.

To add an item to the page, simply drag it from the Toolbox and drop it into an Area. In the example below, 3 items are added to the Scrollable Area:

  1. Locate the ‘Text‘ item in the Toolbox.
  2. Drag and drop it into the Scrollable Area.
  3. Press on the new Text item to expand its settings.
  4. Change the Label value to ‘Name‘.
  1. Add a ‘Number‘ item to the Scrollable Area. If you place the items in the wrong order they can be moved by entering Edit Mode.
  2. Change the Label for the number to say ‘Age‘.
  3. Press the small square next to ‘Left icon’.
  4. Search for icons related to ‘cake’ and select ‘fa-birthday-cake‘.
  5. Decrease the number of decimal places to 0.
  1. Add a ‘Select’ item to the Scrollable Area.
  2. Change the Label to ‘Sex‘.
  3. Within the item, select the ‘Additional‘ tab.
  4. Modify the labels for the options to state ‘Female‘, ‘Male‘ and ‘Unspecified‘.

3c. Title Bar

A header can be added to the page using a ‘Title bar’. This is a specialised area which adds a bar of colour to the page and comes pre-populated with a ‘Title’ item nested inside.

As it is an area, it can directly to the page and does not need to be placed within another Area item. The ‘Title’ item can then be customised using HTML to display a title of your choice:

  1. Locate the ‘Title Bar‘ item in the Toolbox.
  2. Drag it onto the page and place it above the Scrollable Area.
  3. Expand the Title item inside the bar.
  4. Edit the Markup to state: <h1>Customer Details</h1>

 

3d. Button Bar

The Button Bar is another specialised area which includes two Nav Button items nested inside. It is useful for quickly adding buttons to navigate between pages in your application.

Once added to the page, additional items can be added to the Button Bar, or the existing Nav Buttons can be modified or removed. In this example, only one button is required, so Edit Mode will be used to delete the other:

  1. Drag a Button Bar onto the Editor, placing it below the Scrollable Area.
  2. Select the edit symbol (represented by a pencil) in the upper right corner of the Studio to enter Edit Mode.
  3. Select the first Nav Button inside of the Button Bar (it should become highlighted in blue).
  4. Use the delete symbol to remove it.
  5. Select the tick symbol at the top of the Studio to exit Edit Mode.
  6. Leave the other Nav Button – this will be configured once we have a second page.

4. Additional Pages

Once you have finished configuring your first page, it is possible to add additional pages to expand the application. The Back button in the top left corner of the Page Editor can be used to return to the App Content screen.

You can then select the ‘Create Page’ button to add a new page:

  1. Give the page a name (e.g. Signature).
  2. Set the template to ‘Header‘.
    This will pre-populate the page with a Title Bar and Scrollable Area,
  3. Select ‘Save’ and enter the new page.

Contents can then be added to the new page:

  1. Select the ‘Title’ item and modify the markup to: <h1>Customer Signature</h1>
  2. Drag a Signature item onto the page and drop it in the Scrollable Area.
  3. Modify the description of the Signature to state “Please sign below”.

 

4a. Linking Pages

In order for a user to navigate between page in an app, it is necessary to link the pages together. This is achieved by configuring the remaining Nav Button on the ‘Details’ page:

  1. Return to the ‘Details‘ page.
  2. Expand the remaining Nav Button at the bottom of the page.
  3. Within the Nav Button, select the ‘Location‘ tab.
  4. Using the Droplist, set the location to the ‘Signature‘ page.

5. Preview the app

The ‘play’ symbol seen throughout the Infinity App Studio can be used to preview the app. This will pause development of the app and show what it will look like to a user. Whilst in Preview Mode, there are a number of different things you can try:

  • Select the Name field to bring up a keyboard. Enter a name.
  • Enter an age using the keyboard or arrows at the end of the field.
  • Select a sex using the drop down list.
  • Press the ‘Next’ button at the bottom of the page to navigate to the next page.
  • Use your finger/mouse to sign in the Signature box.

When you reach the end of the app, select the 3-dot icon in the top right corner and press ‘Reset’.This will clear all test data from the app and return you to the first page of the application.

When complete, select the ‘Back’ option in the top left corner to return to the Editor.

6. Further Documentation

CommonTime Infinity offers a range of other features which can be used to expand and enhance your application. This includes additional items which can be used to add functionality to an app (e.g. Integration, Styling, Notifications) and elements of the Infinity Studio which can assist with the development process.

 

Explore sections of the Infinity Studio to find out about features such as Edit Mode and Live Preview.

 

Find out how to implement specific features within an app, such as logic, validation and styling.