Output Cells

Definition reference for result buttons

metric textmetric text

metric text

caption textcaption text

caption text

value textvalue text

value text

Definition

Description

Values

Examples

padding=;

Defines the border width around the element.

px

padding=8;

buttonradius=;

Sets a button radius for the corners (rounded button with corner radius = px value).

px

buttonradius=10;

bordercolor=;

Sets the border color with a given hex value.

hex code

bordercolor=#EDAD52;

metrictext=;

Sets an additional caption (normally at the right top). This can be used to set value descriptions.

Any value

If you define the metric text as "fromcell:Sheet!D5" the metric text will be fetched directly from the spreadsheet cell that you have defined.

metrictext=€/Month;
metrictext=fromcell:Sheet!D5;

metrictextcolor=;

Sets the font color of the metric text.

hex code

metrictextcolor=#EDAD52;

metrichorzalign=;

Sets the metric text horizontal align.

left, center, right
default: right

metrichorzalign=right;

metricvertalign=;

Sets the metric text vertical align.

top, center, bottom, bottomright
default: center

metricvertalign=top;

captiontextcolor=;

Sets the main caption text color.

hex code

captiontextcolor=#EDAD52;

captionhorzalign=;

Sets the caption horizontal align.

left, center, right
default: left

captionhorzalign=center;

captionvertalign=;

Sets the caption vertical align.

top, center, bottom
default: center

captionvertalign=center;

buttonheight=;

Sets the height of the result button.

px or as % of the display

buttonheight=90;
buttonheight=20%;

backgroundcolor=;

Sets the background color of the button.

hex code

backgroundcolor=#009F75;

backgroundcolorcell=

;

Sets the background color of the button to the hex value from the addressed cell in excel.

backgroundcolorcell=Sheet!AA9;

Cell AA9 contains the hex code #009F75

backgroundimage=;

Sets a background image for the button.

Url pointing directly to image file.

backgroundimage=http://abc.png;

backgroundopacity=;

Sets the opacity of a background image

Value between 1-10

backgroundopacity=8;

numberformat=N0; (N1, N2, Nx)
numberformat=P0; (P1, P2, Px)
numberformat=C0; (C1, C2, Cx)
numberformat=D0; (D1, D2, Dx)
numberformat=E0; (E1, E2, Ex)
numberformat=X0; (X1, X2, Xx)

Sets the number format of the value (if it is a number).

N0 is a number without decimal place. N1 with one, N2 with two, ...

Px stands for a percentage value with x decimal.
Cx stands for a currency value with x decimal.
Dx stands for a decimal value with x decimal.
Ex stands for a exponential (scientific) value with x decimal.
Xx stands for a hexadecimal value with x decimal.

N - Precision specifier: Desired number of decimal places.

P - Precision specifier: Desired number of decimal places.

C - Precision specifier: Number of decimal digits.

D - Precision specifier: Minimum number of digits.

E - Precision specifier: Number of decimal digits.

X - Precision specifier: Number of digits in the result string.

numberformat=N2; > 1,234.57
numberformat=P2; > 1,234.57
numberformat=C2; > $123.46
numberformat=D6; > 001234
numberformat=E2; >
numberformat=X2; >

numberformat=datetime;

buttonopacity=;

Sets the opacity of the button background.

Value between 1-10

buttonopacity=8;

valuefontsize=;

Defines the text font size of the value text.

px
default: 30

valuefontsize=30;

valuefontstyle=;

Defines the value text style.

regular, bold, italic, none
default: regular

valuefontstyle=regular;

valuetextcolor=;

Defines the text font color of the value.

hex code

valuetextcolor=;

valuemultiline=;

Defines word wrap style for a text value.

true, false

valuemultiline=true;

linkinfo=xxx,yyy;

Defines an action that will be executed when the button is pressed.

Example:
Pressing the button should jump to the list element (componentname=database) and filter column "platform" for the value "android":

linkinfo=component:database,type:filter,data:platform,value:android;

linkinfo=component:database,type:filter,data:platform,value:android;

valuesource=;

Using this tag the value of the button can be retrieved by using a web service.

usecellformat=;

The button gets the number format from the underlying cell format. NOTE: not applicable to "toggle" fields.

true, false

usecellformat=true;

componentname=;

Sets a name for this control. The functionality "linkinfo" is able to activate elements by component name.

componentname=page3;

markertext=;

Sets a small arrow (normally at the bottom right). This can be used to show the trend.

up, down, left, right

markertext=up;

markertextcolor=;

Defines the color of the markertext.

hex code

markertextcolor=09679B;

runapp=;

Defines the app that will be opened when the button is pressed.

app-id

runapp=4cfd49bc-95a6-4e0d-966e-8fa91005101e;

showinsummary=;

Sets an additional floating element at the bottom left corner of the app, showing the value of this result button.

true, false

showinsummary=true;

📘

Conditional Formatting

Here's a trick on how to achieve conditional formatting like in the demo app "oaa doc - conditional formatting": https://oaa.app.link/launch-app-21d9ca6c-130e-49b1-8dea-f2cfdb61a832

The background color of the result button in our app is set by the definition "backgroundcolorcell=Tabelle1!C7;".
Depending on the result in our file, cell "Tabelle1!C7" displays a specific color code (hex code).

Feel free to take a look at the sheet: https://www.dropbox.com/s/rzeejymek2xbfmf/Conditional%20Formatting.xlsx?dl=1

📘

Special functionality

If you define the metric text as "fromcell:Table1!D5" the text will be fetched directly from the spreadsheet cell that you have defined. In this example the caption will show the value from cell "D5" in table "Table1".

You can combine the value "fromcell:Table1!D5" with a "hardcoded" value. For example:
"Avg. fromcell:Table1!D5"