The Layout Panel provides configuration options that connect the visual screen you are currently designing (the Layout) with the application's global structure and navigation. This panel controls where the Layout lives in your app, what it's called in a browser, and which navigation bars it uses.

Linking the Layout to the Application

Route

The Route field is where you associate the selected Layout with a specific URL or path in your application's routing table.

You can use the provided dropdown to select an existing Route (like /about-us). If you need a new path, click on the "New Route" button right from the dropdown.

• Context: If you select a dynamic route (e.g., /products/:id), the Layout automatically gains access to the data passed in the URL. You can use the RouteData source in the Data Picker to access this information and display product-specific details.

Title

This field allows you to specify the user-facing title of the Layout.

The text entered here will appear in the browser tab or window title when your application is accessed as a PWA. You can use FQL here to bind to a dynamic title (e.g., {{ $(Product).name }}).

Advanced Configuration

Metadata

This feature allows you to embed <meta> tags directly into the page header when your application is served as a PWA. This is an essential feature for Search Engine Optimization (SEO) and defining how your page appears when shared on social media.

To add a new item, click the + icon. You will specify the tag as a key:value pair.

• Example 1: SEO Description
• • Key: description
  • Value: The best visual application builder.
  • Purpose: This text is used by search engines (like Google) to populate the snippet under your link in search results.
• Example 2: Social Media Share
• • Key: og:title
  • Value: Shipcode Launch Event
  • Purpose: This tag is used by platforms like Twitter and Facebook (Open Graph protocol) to define the title when the URL is shared in a post.

App Top Bar & App Bottom Bar

These controls determine which global navigation bars the currently active Layout will utilize.

Use the provided dropdowns to select a pre-configured Top Bar and/or Bottom Bar. This allows you to apply different navigation structures to different Layouts.

• Context: Top Bar and Bottom Bar components are defined and managed globally in Project Settings.
• Use Case: You might select your main navigation bar for the App Top Bar on the Home Layout, but select None for a Checkout Layout to remove all global navigation and focus the user on the transaction.