# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/tutorials/3.-advanced-layout-application.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.