openasapp

Open as App Developer Hub

Welcome to our developer hub. You'll find comprehensive guides and documentation to help you start working as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started

Advanced Navigation

Navigate in your app by using own buttons instead of page tabs.

Button "Home".
Text for the button is coming from cell B1 in the spreadsheet and can be designed like a normal text value in output buttons.

  <item id="" caption="" inputtype="output" contenttype="string" address="Tabelle1!B1">
                    <itemdefinitions>linkinfo=component:home-tab;backgroundcolor=#13bb98;valuetextcolor=#ffffff;groupname=ub92mLd1</itemdefinitions>
                </item>

Additional element on each page to "tag" the page.

                <item id="Dd2bzcR3" caption="" inputtype="" contenttype="spacer">
                    <itemdefinitions>componentname=home-tab;backgroundcolor=#00000000;buttonheight=1%;</itemdefinitions>
                </item>

App definitions

functionbuttoncolor=#09679b;pagecount=3;disablepageselection=true;headeropacity=10

Disable Page Tabs

You can disable the classic page tabs by using the app definition disablepageselection=true;

Raw XML Configuration

<?xml version="1.0" encoding="utf-8"?>
<pages
    xmlns="urn:WunderApp">
    <page pageid="1" caption="Home" definitions="sheetname=Tabelle1;summarywidth=110;summaryopacity=6;summarybackgroundcolor=#AC190D">
        <excelcontent id="1">
            <caption>Main</caption>
            <description>Main</description>
            <definitions>buttonopacity=9;separatorcolor=CFCFCF;elementcolor=39A83C;valuetextcolor=39A83C;</definitions>
            <items>
                <item id="W06nj8oE" caption="Navigation buttons:" contenttype="header">
                    <itemdefinitions>height=1*;backgroundcolor=#cbcbcb;textcolor=#ffffff;textfontsize=17</itemdefinitions>
                </item>
                <item id="ub92mLd1" caption="ub92mLd1" inputtype="output" contenttype="grouplayout">
                    <itemdefinitions>buttonheight=1*;metrictext=;separatorcolor=transparent;bordercolor=transparent;buttonradius=0;backgroundcolor=ff0000;elementcolor=000000;valuetextcolor=000000;</itemdefinitions>
                </item>
                <item id="" caption="" inputtype="output" contenttype="string" address="Tabelle1!B1">
                    <itemdefinitions>linkinfo=component:home-tab;backgroundcolor=#13bb98;valuetextcolor=#ffffff;groupname=ub92mLd1</itemdefinitions>
                </item>
                <item id="" caption="" inputtype="output" contenttype="string" address="Tabelle1!C1">
                    <itemdefinitions>linkinfo=component:circle-tab;backgroundcolor=#30404D;valuetextcolor=#ffffff;groupname=ub92mLd1</itemdefinitions>
                </item>
                <item id="" caption="" inputtype="output" contenttype="string" address="Tabelle1!D1">
                    <itemdefinitions>linkinfo=component:people-tab;backgroundcolor=#30404D;valuetextcolor=#ffffff;groupname=ub92mLd1</itemdefinitions>
                </item>
                <item id="BACXtXyJ" caption="Button &quot;Home&quot;. Text for the button is coming from cell B1 in the spreadsheet and can be designed like a normal text value in output buttons. By adding the definition linkinfo=component:home-tab; the button will guide to to the page where it finds the componentname &quot;home-tab&quot;. See below." contenttype="header">
                    <itemdefinitions>height=3*;backgroundcolor=#cbcbcb;textcolor=#ffffff;textfontsize=17</itemdefinitions>
                </item>
                <item id="205b9PkS" caption="Additional element on each page to &quot;tag&quot; the page: &lt;item caption=&quot;&quot; id=&quot;&quot; inputtype=&quot;&quot; contenttype=&quot;&quot; address=&quot;&quot;&gt; &lt;itemdefinitions&gt;componentname=home-tab;backgroundcolor=#00000000;buttonheight=1%;&lt;/itemdefinitions&gt; &lt;/item&gt;" contenttype="header">
                    <itemdefinitions>height=3*;backgroundcolor=#9c9c9c;textcolor=#ffffff;textfontsize=17</itemdefinitions>
                </item>
                <item caption="" id="" inputtype="" contenttype="" address="">
                    <itemdefinitions>componentname=home-tab;backgroundcolor=#00000000;buttonheight=1%;</itemdefinitions>
                </item>
            </items>
        </excelcontent>
    </page>
    <page pageid="2" caption="Circle">
        <excelcontent id="2">
            <items>
                <item id="ub92mLd1" caption="ub92mLd1" inputtype="output" contenttype="grouplayout">
                    <itemdefinitions>buttonheight=1*;metrictext=;separatorcolor=transparent;bordercolor=transparent;buttonradius=0;backgroundcolor=ff0000;elementcolor=000000;valuetextcolor=000000;</itemdefinitions>
                </item>
                <item id="" caption="" inputtype="output" contenttype="string" address="Tabelle1!B1">
                    <itemdefinitions>linkinfo=component:home-tab;backgroundcolor=#30404D;valuetextcolor=#ffffff;groupname=ub92mLd1</itemdefinitions>
                </item>
                <item id="" caption="" inputtype="output" contenttype="string" address="Tabelle1!C1">
                    <itemdefinitions>linkinfo=component:circle-tab;backgroundcolor=#13bb98;valuetextcolor=#ffffff;groupname=ub92mLd1</itemdefinitions>
                </item>
                <item id="" caption="" inputtype="output" contenttype="string" address="Tabelle1!D1">
                    <itemdefinitions>linkinfo=component:people-tab;backgroundcolor=#30404D;valuetextcolor=#ffffff;groupname=ub92mLd1</itemdefinitions>
                </item>
                <item id="205b9PkS" caption="&quot;Circle&quot;-Button: &lt;item id=&quot;&quot; caption=&quot;&quot; inputtype=&quot;output&quot; contenttype=&quot;string&quot; address=&quot;Tabelle1!C1&quot;&gt;     &lt;itemdefinitions&gt;linkinfo=component:circle-tab;backgroundcolor=#13bb98;valuetextcolor=#ffffff;&lt;/itemdefinitions&gt; &lt;/item&gt;" contenttype="header">
                    <itemdefinitions>height=2*;backgroundcolor=#cbcbcb;textcolor=#ffffff;textfontsize=17</itemdefinitions>
                </item>
                <item caption="Radius" inputtype="input" contenttype="integer" address="Tabelle1!B5" id="8hs5UO6M">
                    <itemdefinitions>backgroundcolor=white;buttonheight=15%;elementcolor=#09679B;valuetextcolor=#09679B;</itemdefinitions>
                </item>
                <item id="SDLZtkhn" caption="SDLZtkhn" inputtype="output" contenttype="grouplayout">
                    <itemdefinitions>buttonheight=90;metrictext=;separatorcolor=transparent;bordercolor=transparent;buttonradius=0;backgroundcolor=ff0000;elementcolor=000000;valuetextcolor=000000;</itemdefinitions>
                </item>
                <item caption="Circumference" inputtype="output" contenttype="result" address="Tabelle1!B8" id="l6PkugfW">
                    <itemdefinitions>nocaption=true;buttonheight=15%;buttonradius=0;backgroundcolor=#09679B;usecellformat=true;groupname=SDLZtkhn</itemdefinitions>
                </item>
                <item caption="Diameter" inputtype="output" contenttype="result" address="Tabelle1!B7" id="0irDthRF">
                    <itemdefinitions>nocaption=true;buttonheight=15%;buttonradius=0;backgroundcolor=#09679B;usecellformat=true;groupname=SDLZtkhn</itemdefinitions>
                </item>
                <item caption="" id="l5Vg1DCE" inputtype="" contenttype="" address="">
                    <itemdefinitions>componentname=circle-tab;backgroundcolor=#00000000;buttonheight=1%;</itemdefinitions>
                </item>
            </items>
        </excelcontent>
    </page>
    <page pageid="3" caption="People">
        <excelcontent id="2">
            <items>
                <item id="ub92mLd1" caption="ub92mLd1" inputtype="output" contenttype="grouplayout">
                    <itemdefinitions>buttonheight=1*;metrictext=;separatorcolor=transparent;bordercolor=transparent;buttonradius=0;backgroundcolor=ff0000;elementcolor=000000;valuetextcolor=000000;</itemdefinitions>
                </item>
                <item id="" caption="" inputtype="output" contenttype="string" address="Tabelle1!B1">
                    <itemdefinitions>linkinfo=component:home-tab;backgroundcolor=#30404D;valuetextcolor=#ffffff;groupname=ub92mLd1</itemdefinitions>
                </item>
                <item id="" caption="" inputtype="output" contenttype="string" address="Tabelle1!C1">
                    <itemdefinitions>linkinfo=component:circle-tab;backgroundcolor=#30404D;valuetextcolor=#ffffff;groupname=ub92mLd1</itemdefinitions>
                </item>
                <item id="" caption="" inputtype="output" contenttype="string" address="Tabelle1!D1">
                    <itemdefinitions>linkinfo=component:people-tab;backgroundcolor=#13bb98;valuetextcolor=#ffffff;groupname=ub92mLd1</itemdefinitions>
                </item>
                <item id="205b9PkS" caption="&quot;People&quot;-Button: &lt;item id=&quot;&quot; caption=&quot;&quot; inputtype=&quot;output&quot; contenttype=&quot;string&quot; address=&quot;Tabelle1!D1&quot;&gt;     &lt;itemdefinitions&gt;linkinfo=component:people-tab;backgroundcolor=#13bb98;valuetextcolor=#ffffff;&lt;/itemdefinitions&gt; &lt;/item&gt;" contenttype="header">
                    <itemdefinitions>height=3*;backgroundcolor=#cbcbcb;textcolor=#ffffff;textfontsize=17</itemdefinitions>
                </item>
                <item caption="" inputtype="" contenttype="list" address="Tabelle1!F4" id="b5RfDert">
                    <itemdefinitions>componentname=b5RfDert;gridtheme=dark;padding=0;gridrowheight=40;gridcollapsegroups=false;gridallowedit=false;height=3*;headeravailable=true;showcolumnheader=false;drilldowncolumns=6,4;listcolumns=1::text,2::text,3::text,4::text,5::phone,6::text,7::email;detailcolumns=1:text,2:text,3:text,4:text,5:phone,6:text,7:email;showsearchpanel=false</itemdefinitions>
                </item>
                <item caption="" id="l8Vg1DGE" inputtype="" contenttype="" address="">
                    <itemdefinitions>componentname=people-tab;backgroundcolor=#00000000;buttonheight=1%;</itemdefinitions>
                </item>
            </items>
        </excelcontent>
    </page>
</pages>

Advanced Navigation

Navigate in your app by using own buttons instead of page tabs.