3. Advanced Layout Application

How to create an application with advanced professional layout?

The Goal

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

Advanced Layout Application

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.

Be noticed that the application URL address is always in the following format: ApplicationURL/view/view_id

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.

1. home -> exact ApplicationURL

2. view -> ApplicationURL/view/view_id

3. home -> non-exact ApplicationURL

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

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]

View[ViewA]

• ViewA

  • Container[cntRoot]

    • Label[lblTitle]

View[ViewB]

• ViewB

  • Container[cntRoot]

    • Label[lblTitle]

View[ViewHome]

• ViewHome

  • Container[cntRoot]

    • Label[lblTitle]

View[ViewProfil]

• ViewProfil

  • Container[cntRoot]

    • Label[lblTitle]

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"

You can overwatch the whole currentUser structure in the Data Explorer. Be sure, that you will switch (ƒx) Values dynamically.

Main Menu[Views]

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)

Any Link Type has to beSelf-targeting to match the inner Routes.

Canvas[MainView]

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 trnNavigationwith Item Flex -> Stretch; We will configure Navigation in the following steps

Canvas[MainView]

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);

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.

Canvas[Routes[config]]

Outline[MainView[Routes]]

rtsMain[Routes]

5. Editing Routes Content

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

Any selected Content Components have the routeParams attributes passing the last ViewID state.

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

Outline[rtsMain]

viewDynamic[Properties]

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

trnNavigation[Items]

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.

Follow up on our Navigation & Routing tutorial https://youtu.be/odHoEMonSPg