# Layout Designer
## Overview
The Layout Designer is the main tool offered by the platform to create graphical user interfaces (or layouts) for your application.
{% hint style="info" %}
Prior to creating your layout, it is helpful to have already defined the underlying components of the **entire** application - such as creation of the required classes and actions.
You can then build your layout to allow users to interact with the underlying components with ease.
{% endhint %}
{% hint style="info" %}
For a more hands-on guide to the Layout Designer, see the [tutorial provided](/overview/getting-started/building-the-layout-1-2.md#layout-designer).
{% endhint %}
## Getting Started
Navigate to your **Workspace > Apps** and click on the gear icon
to activate the configuration mode of your applications. Next, click on the gear icon of the application you wish to configure. In the **Views** section, you can select **Layouts** to access the Layout Designer.
At this stage, you will encounter the layouts management section of the designer - allowing you to view your existing layouts, create new ones and import/export layouts.
## Layout Management
The layouts management window presents all the layouts created for your application categorized by the Page Type.
{% hint style="info" %}
Learn more about [Layout Designer Page Types](/building-an-application/views/design-ui/page-types.md)
{% endhint %}
### Role Filtering
By selecting the right **Role** value, you can browse through the list of layouts created for users with **Viewer** or **Editor** rights accordingly.
{% hint style="info" %}
Learn more about roles and permissions in the [Rights Designer](/managing-users-and-collaboration/roles-and-permissions/rights-designer.md) section.
{% endhint %}
### Grouping
Selecting the menu icon on the right of the Role filter, you can select further grouping options from a dropdown menu.
The options include:
* No Grouping
* Group By Class
* Group By First Letter
* Group By Last Modified
Based on the grouping method selected, each page type category is further broken down into grouping sub-categories where the layouts are listed accordingly.
### Layout options
An existing layout can be opened for editing by selecting it from the list of layouts.
More management options are available for each individual layout by selecting the dropdown on their right.
#### Cloning a layout
The clone option is available from the dropdown menu for your layout item. It creates a copy of the layout with the suffix `- Copy` added to its name.
#### Exporting a layout
The export option is available from the dropdown menu for your layout item. This results in the platform compiling your layout as a JSON file, which is then bundled and downloaded to your device as a ZIP file. The default file name is `layouts.zip`.
{% hint style="danger" %}
Exporting your layout saves it as a ZIP compiled file that may be password protected.
{% endhint %}
#### Usage of layout
You can easily verify which components (such as classes or workflows) of your application is using your layout by selecting the **Used By** option from the layout dropdown menu.
#### Delete a layout
The delete option is available from the dropdown menu for the layout item. You will be prompted with a confirmation message, following which your layout will be deleted from your application.
### Import/Export Texts
The platform provides an import and export mechanism for all text content within your layout. This is particularly helpful when the application is being translated to provide multilingual support.
{% hint style="info" %}
Exporting the text even allows the use of external translation services without compromising on access to your application.
{% endhint %}
Configurations of the layouts in your application can be exported by selecting the **Export Texts** option. This generates a Microsoft Excel file which can either be viewed in your browser, or saved locally to your device.
Similarly, the exported Microsoft Excel file can be imported back to the application by using the **Import Texts** option.
{% hint style="danger" %}
You can only import texts back into the **same application** from which it was exported, which will cause your existing configurations to be overridden.
{% endhint %}
### Filtering and Search
Using the filter box on the top left corner of the window allows you to filter the list of layouts by name.
Clearing the filter box resets the layout list to its original items.
### Importing Layouts
The **Import Layouts** option allows you to import your previously exported layouts back into the application.
{% hint style="danger" %}
Layouts can only be imported back into the same application from which they were exported.
{% endhint %}
### Creating a new layout
A new layout can be creating simply by clicking on the **New Page** option from the top action toolbar in the layouts management window.
First, you need to select your layout page type.
{% hint style="info" %}
Learn more about the [Layout Designer Page Types](/building-an-application/views/design-ui/page-types.md)
{% endhint %}
Next, you will be directed to the Page Configuration screen where you can further customize your layout page settings and functionality.
## Layout Designing
After creating your page, you can customize the page layout via the layout designer canvas. You can browse the variety of layout controls offered by the platform as well as templates to help kickstart your design. On top of the designer, you can see several options offered to improve your layout designing experience.
### Layout Controls
The layout controls are listed on the left of the designer categorized as [Fields](/building-an-application/views/design-ui/fields-and-links.md#fields), [Links](/building-an-application/views/design-ui/fields-and-links.md#links), [Controls ](/building-an-application/views/design-ui/layout-controls.md)and [Templates](/building-an-application/views/design-ui/layout-templates.md). These elements are the building blocks of your layout in the designer.
{% hint style="info" %}
[Fields and Links](/building-an-application/views/design-ui/fields-and-links.md) are available only when using class-bound pages such as [Object Page](/building-an-application/views/design-ui/page-types.md#object-page).
{% endhint %}
### Design Options
More options are available in the action toolbar on top of the designer to help your with your layout designing process.
#### Page Settings
Allows you to access the configurations of your current page.
{% hint style="info" %}
More information about page configurations can be found in [Page Types](/building-an-application/views/design-ui/page-types.md).
{% endhint %}
#### Preview
Allows you to preview what your design will look like as a user interface.
#### Expand (todo: square-plus icon)
Expands all the elements on your designer to view their content.
#### Collapse (todo: square-minus icon)
Collapses all the elements on your designer to hide their content.
#### Debug
Allows you to view your layout in JSON format.
* **Modify**\
When in debug mode, you can select this option to modify your layout as a JSON directly.
* **Toggle View**\
Allows you to toggle between the fully expanded JSON view with all the control properties and a categorized list of items based on their status on the canvas.\
\&#xNAN;*Item status: Deleted, Moved, Updated, Added.*
#### Visualize Indentation
Displays indentation markers on the canvas to help keep track of nested controls in your layout.
#### Run Intro Tour
The platform presents an informative guide to the various features available on the layout designer in the form of an interactive onboarding.
#### Attachments
Allows you to upload files (such as images) for use within your layout.
---
# 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.tivity.one/building-an-application/views/design-ui.md?ask=
```
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.