App Designer | Add and edit app items individually

You can customize and configure each item of your app individually in the App Designer. Here you can shape your app to match your corporate identity, define additional restrictions for certain cells or provide additional functionality to the app by using some extra items.

The App Designer offers different options, depending on the item you are editing.

You can use the preview ('Preview app you') to edit every single item of your app (for example change the background color of an input cell), or add a chart to your app via the 'Add chart' option in the items list on the left side.

Topics in this article

• A general look at the App Designer
• Add and edit items
• Tab 'Main' - Edit input cell (example)
• Tab 'Style' - change colors
• 'Data' tab - Address cell
• 'Advanced' tab - Advanced Options

 A general look at the App Designer

After uploading the Excel file for your app (step 'Data') and selecting the matching template (step 'template'), the app is designed in the 'App Designer'. In this step, you can have different possibilities, depending on the application type you are creating or editing (list, map, calculator,..).

phone_iphone

Preview App - Here you can see a draft of your app and delete or edit each individual item. (See section: Add and edit items.)

sort

Rearrange elements - Here you can move items around or group cells. Also, a new page with further items may be added here. (See article: Rearrange elements | Move Items, Group Cells.)

add

Add Cell - If, for example, the structure of the source file has changed, you can add new cells to your app here later on. (See article: Add Cell.)

insert_chart

Add Chart - Here you can create interactive charts based on the data or results from your Excel spreadsheet. This will increase the productivity of your application tremendously. (See article: "Add a chart to your app".)

list

Add List - You can add a "sub-list" for your calculation.

palette

Change Theme - Select one of the predefined themes for your app. (Note: previously made changes  (such as cell color) will be overwritten.)

print

Add print functionality - We recommend the following tutorial: Create a license calculator with print functionality.

build

Advanced Definitions - This area is for experienced users with IT skills who want to optimize the app via the XML configuration. (See: "Advanced definitions" )

Add and edit items

The respective items (such as every single cell of your app) are processed using the editor in the 'Preview' view. phone_iphone

1. Go to the App Dashboard.
2. Open the app that you want to edit.
3. Move the mouse cursor to the item that you want to edit.
4. Click the pencil icon to open the editor for this item. edit

 Item Editor - tab 'Main'

The editor is divided into 4 areas: Main, Data, Style and Advanced.

Depending on which item you are editing, different options will be displayed in each tab.

Edit input cell

In this example, you can see the editor for an input cell. Accordingly, you will find settings that are relevant specifically for this item/cell type.

The following changes can be made in the main tab ('Main'):

Caption, content type, metric text, minimum (value), step size, maximum (value), show edit buttons (- / +) on or off.

1. Caption: Main caption showing in the upper left corner.
2. Content type: You can define the content type of the cell. Currency, double, integer, percent, string, toggle, checkbox, date, time, slider, and imageupload are the options available.
3. Metric text: Sets an additional caption (normally at the right top). This can be used to set value descriptions (e.g. "in billions", "in Kg", etc,.).
4. Minimal: Minimum value that can be entered for this cell.
5. Step Size: Defines the default increase/decrease of the value when a step button is pressed (-/+).
6. Maximal: Maximum value that can be entered for this cell.
7. Show edit buttons (-/+) on or off: You can remove the step buttons. Values can be then changed via the 'dialogue' (enter with a click on the value) or by swiping.

Tab 'Style' - change colors

In 'Style' you are mainly adjusting the optical settings of the item.

For the input cell there is the Height, Value Font Size, Value Horizontal Alignment, Value Text Color, Metric Text Font Size, Metric Text color, Background color, Background color cell, Caption Font size, Caption Text color, Caption Vertical Alignment, Caption Horizontal Alignment, Round Corner, Value Font Style, and Button Color.

You can make the color selection using the color palette instead of entering a hex value. To do this, click the coloured square (4) and generate the desired color.

 '

Data' tab - Address cell

The cell address of the element selected is displayed here and it is also possible to change the cell address from this tab.

'Advanced' tab - Advanced Options

Experienced users can make further changes in the Raw definition.

You can find all definitions in the Open as App documentation: openasapp.readme.io

More options

Use the icons on the left side of the app designer to access the individual design items.