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

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

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 you 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 cann 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 your App' view. phone_iphone

1. Go to the App Dashboard.
2. Open the app that you want to edit.
3. Navigate to the tab 'Design' from the top menu bar.
4. In Tab 'Preview your app' on the left you can see the preview of your app with the individual items.
5. Move the mouse cursor to the item that you want to edit.
6. Click the pencil icon to open the editor for this item. edit

 Item Editor - tab 'Main'

The editor is divided into 3 areas: Main, 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, input 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. Integer, Percent, Double, GroupLayout, chart, list, Spacer, Image, String, Map, Header, Toggle, Currency.
3. Input type: Input, Output, Action Button.
4. Metric text: Sets an additional caption (normally at the right top). This can be used to set value descriptions (e.g. "in billions").
5. Minimal: Minimum value that can be entered for this cell.
6. Step Size: Defines the default increase/decrease of the value when a step button is pressed (-/+).
7. Maximal: Maximum value that can be entered for this cell.
8. 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 Background Color, Button Height, Element Color, Value Text Color, Caption text Color.

1. Background Color: Sets the background color of the cell to hex value = #xxx.
2. Button Height: Sets the height of the cell as a percentage of the display.
3. Element Color: Sets the color of the step buttons (-/+).
4. Value Text Color: Sets the value text color to hex value = #xxx.
5. Caption Text Color: Sets the caption text color to hex value = #xxx.

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.

'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.