> For the complete documentation index, see [llms.txt](https://docs.adapptio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adapptio.com/working-with-adapptio/tutorials/3.-advanced-layout-application.md).

# 3. Advanced Layout Application

### The Goal

Compose an *Advanced Layout* application switching between different *Views* by the *Routes*.

![Advanced Layout Application](/files/SWOVXtRCFRvBPC3dWWN3)

### The Description

The principle of the *Route* component is in switching between the exact URL addresses based on the unique *Views IDs*. Component option settings change any matched route, including the exact home page, specific Views, or non-existing addresses.

{% hint style="info" %}
Be noticed that the application URL address is always in the following format: `ApplicationURL/view/view_id`
{% endhint %}

All *Defined Routes* are matched from top to bottom, which means it's essential to prepare *Routes* heading from the home page, followed by specific *View IDs*, ending with the non-existing content.

{% hint style="info" %}

1. `home` -> `exact ApplicationURL`
2. `view` -> `ApplicationURL/view/view_id`
3. `home` -> `non-exact ApplicationURL`
   {% endhint %}

### The Knowledge I Will Get

1. Switching between Views using the Routes.
2. Referencing dynamic values from Data Explorer.
3. How to Logout the application.

### The Project Structure

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] MainView
  * [ ] Application Header\[hdrMain]
    * [ ] Text\[txtAppName]
    * [ ] Menu Button\[mnbMain]
  * [ ] Sidebar Layout\[sdbMain]
    * [ ] Content(content)
      * [ ] Routes\[rtsMain]
        * [ ] Option #1
          * [ ] View\[viewHome]
        * [ ] Option #2
          * [ ] View\[viewDynamic]
        * [ ] Option #3
          * [ ] Container\[cntNotFound]
            * [ ] Label\[lblNotFound]
    * [ ] Content(sidebar)
      * [ ] Box\[boxBackground]
        * [ ] Navigation Tree\[trnNavigation]
          {% endtab %}

{% tab title="View\[ViewA]" %}

* [ ] ViewA
  * [ ] Container\[cntRoot]
    * [ ] Label\[lblTitle]
      {% endtab %}

{% tab title="View\[ViewB]" %}

* [ ] ViewB
  * [ ] Container\[cntRoot]
    * [ ] Label\[lblTitle]
      {% endtab %}

{% tab title="View\[ViewHome]" %}

* [ ] ViewHome
  * [ ] Container\[cntRoot]
    * [ ] Label\[lblTitle]
      {% endtab %}

{% tab title="View\[ViewProfil]" %}

* [ ] ViewProfil
  * [ ] Container\[cntRoot]
    * [ ] Label\[lblTitle]
      {% endtab %}
      {% endtabs %}

### 1. Prepare a Sub-Pages

First, let's prepare four sub-*Views* serving as basic elements of the `MainView`. Its structure would be the same, just with different content.

1. Structure of all sub-*Views*:
   1. Place in a **Container** named *ID* -> `cntRoot`; *Padding* -> `Wide`; *Spacing* -> `Medium`; *Item Flex* -> `Stretch`
      1. Into the `cntRoot` put a **Label** with *ID* -> `lblTitle`; *Text Style* -> `Bold`; *Font Size* -> `MEDIUM`; *Icon Size* -> `Medium`
2. Create the following **Views** and upgrade their Properties:
   1. *ID* -> `ViewA`; `lblTitle` -> *Value* -> "`ViewA`"; *Icon Name* -> "`mdi/alpha-a-circle`"
   2. *ID* -> `ViewB`; `lblTitle` -> *Value* -> "`ViewB`"; *Icon Name* -> "`mdi/alpha-b-circle`"
   3. *ID* -> `ViewHome`; `lblTitle` -> *Value* -> "`Home`"; *Icon Name* -> "`mdi/home`"
   4. *ID* -> `ViewProfil`; `lblTitle` -> *Value* -> `currentUser.fullName` (*ƒx*) ; *Icon Name* -> "`mdi/account-circle`"

{% hint style="info" %}
You can overwatch the whole currentUser structure in the Data Explorer. Be sure, that you will switch *(ƒx) Values* dynamically.
{% endhint %}

{% tabs %}
{% tab title="Main Menu\[Views]" %}
![](/files/dMxJ48d0LWdc2x5IdPo8)
{% endtab %}
{% endtabs %}

### 2. Prepare `MainView` Header Content

Let's start with a *Header* following a *SideBar* in the next step.

1. Create an **Application Header**, name it `hdrMain`, and set up its properties as follows:
   1. *Height* -> `Medium`; *Horizontal Alignment* -> `Left`; *Padding* -> `10px 20px`; *Spacing* -> `Medium`
   2. Into `hdrMain` Place in a **Text** with *ID* -> `txtAppName`:
      1. *Value* -> `constants.appName` (*ƒx*); Font Size -> `LARGE`; *Foreground* -> `WHITE`; *Item Flex* -> `Stretch`
   3. Into `hdrMain` put also a **Menu Button** with *ID* -> `mnbMain`; *Value* -> `currentUser.email` (*ƒx*) and add *Items*:
      1. `Profile` -> *Value* -> "`Profil`"; *Icon Name* -> "`mdi/account-circle-outline`"
         1. *Link* -> *Link Type* -> `View`; *View* -> Select(`ViewProfil)`; *Link Target* -> `Self`
      2. `Logout` -> *Value* -> "`Logout`"; *Icon Name* -> "`mdi/logout-variant`"
         1. *Link* -> *Link Type* -> `Named Route`; View -> Select(`Logout`)

{% hint style="info" %}
Any *Link Type* has to be`Self`*-targeting* to match the inner *Routes*.
{% endhint %}

{% tabs %}
{% tab title="Canvas\[MainView]" %}
![](/files/geekI3mcMyULqIg66w1v)
{% endtab %}
{% endtabs %}

### 3. Place in a Sidebar Layout and Its Components

The *Main content* of the *Sidebar* layout will contain a *Route* component; the *Sidebar* itself will include a *Navigation*. 

1. Put in the `MainView` a **Sidebar** and name it `sdbMain`:
   1. *Main Content* -> *Spacing* -> `Medium`; *Sidebar* -> *Spacing* -> `Medium`; *Width* -> `Medium`; *Item Flex* -> `Stretch`
2. Place into *Content Container* of `sdbMain` a **Routes** *Component*, name it `rtsMain` and *Item Flex* -> `Stretch`; *We will configure Routes in following steps*.
3. Into *Sidebar Content* place a **Box** with *ID* -> `boxBackground`; 
   1. *Style* -> *Background* -> `WHITE`; *Border Color* -> `#dee6ec`; *Border Width* -> `0px 1px 0px 0px`; *Padding* -> `50px 20px 0px 0px`; *Spacing* -> `Medium`; *Item Flex* -> `Stretch`
4. *Sidebar Box* will carry a **Navigation** *Component* named `trnNavigation`with *Item Flex* -> `Stretch`; *We will configure Navigation in the following steps*

{% tabs %}
{% tab title="Canvas\[MainView]" %}
![](/files/lTTAVz7SZkrSO6GQaS8W)
{% endtab %}
{% endtabs %}

### 4. Configuring Routes

*Adding Routes Items* by clicking on the *Plus icon* in the *Inspector Panel* will allow us to define separated *Content Containers*. Switching between *Route Canvas* is done by clicking on the cogwheel on the *Route component*.

1. Add three **Routes**:
   1. *`Home`* -> *Route Name* -> Select(`home`); *Exact* -> `true`
   2. *`View`* -> *Route Name* -> Select(`view`);
   3. *`Home`* -> *Route Name* -> Select(`home`);

{% hint style="info" %}

1. *Exact expression* telling us that `home` has to be matched with a `MainView URL`.
2. Selected `view` option matching *Route* just with `ViewID` parameters.
3. *Non-exact expression* of `home` matching anything else than existing any `ViewID` or `MainView` URLs.
   {% endhint %}

{% tabs %}
{% tab title="Canvas\[Routes\[config]]" %}
![](/files/hjSlXNQeF39QZTketVop)
{% endtab %}

{% tab title="Outline\[MainView\[Routes]]" %}
![](/files/q9eNyb29IbuJaT1rX5VD)
{% endtab %}

{% tab title="rtsMain\[Routes]" %}
![](/files/5F3Oh76XW67wAmcqpB8P)
{% endtab %}
{% endtabs %}

### 5. Editing Routes Content

The *Content* of the individual *Options* is dependent on the matching of the URL pattern.

{% hint style="info" %}
Any selected *Content Components* have the `routeParams` attributes passing the last `ViewID` state.
{% endhint %}

1. Switch between *Routes Content* by clicking on *Toggle Options Cogwheel* and add and configure the following Components:
   1. `home` (#1 Option) -> add a **View** name it `viewHome` -> *View* -> Select(`ViewHome`)
   2. `view` (#2 Option) -> add a **View** name it `viewDynamic` -> *View* -> `routeParams.viewId` (ƒx)
   3. `home` (#3 Option) -> add a **Container** with *ID* -> `cntNotFound`; *Horizontal Alignment* -> `Left`; *Style* -> *Padding* -> `100px`; *Spacing* -> `Medium`
      1. Place into `cntNotFound` *Container* a **Label** with *ID* -> `lblNotFound`; *Value* -> "`The page could not be found!`"; Font Size -> `LARGE`; *Icon Name* -> "`mdi/alert-circle-outline`"; *Icon Size* -> `Large`

{% tabs %}
{% tab title="Outline\[rtsMain]" %}
![](/files/jhLcE7k0l6kiGnUa5322)
{% endtab %}

{% tab title="viewDynamic\[Properties]" %}
![](/files/fcBWHDyft6OViVJgafVj)
{% endtab %}
{% endtabs %}

### 6. Editing Navigation Content

The *Navigation Options* allow clicking on specified *Views*, including `MainView`. It's self-targeting switching Routes in corresponding ViewID.

1. Select the `trnNavigation` *Component* and edit *Items* as follows:
   1. Add an *Item* and name it `Home`; *Label Value* -> "`Home`"; *Icon Name* -> "`mdi/home-outline`"
      1. *Link* -> *Link Type* -> Select(`Named Route`); *Named Route* -> Select(`home`); *Link Target* -> `Self`
   2. Add an *Item* and name it `View A`; *Label Value* -> "`View A`"; *Icon Name* -> "`mdi/alpha-a-circle-outline`"
      1. *Link* -> *Link Type* -> Select(`View`); *View* -> Select(`ViewA`); *Link Target* -> `Self`
   3. Add an *Item* and name it `View B`; *Label Value* -> "`View B`"; *Icon Name* -> "`mdi/alpha-b-circle-outline`"
      1. *Link* -> *Link Type* -> Select(`View`); *View* -> Select(`ViewB`); *Link Target* -> `Self`

{% tabs %}
{% tab title="trnNavigation\[Items]" %}
![](/files/qEkn2tMVQ2SSfSNHPQXn)
{% endtab %}
{% endtabs %}

### The Conclusion

In this *Tutorial* we learn how to switch between routes by matching *Exact* or *Non-exact* URL patterns. Its obvious that *Views* have to be self-targeted and can be dynamically change by a `routeParams` *Parameter*. Try to create few new *Views*, give them some content, and add into the *Navigation Panel*.

{% hint style="info" %}
Follow up on our *Navigation & Routing* tutorial <https://youtu.be/odHoEMonSPg>
{% endhint %}