Advanced Navigation

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

πŸ“˜

App using the advanced navigation

App: https://oaa.app.link/launch-app-1f35ae5b-10ff-46e1-a349-fd7286e6ebe9

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 the landingpage 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>