> 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/getting-started/architecture-overview/views.md).

# Views

*Views* representing the graphical user interface contain as many components as required. Each application can be composed of many different *Views*, nested or opened as a solo page.

{% hint style="info" %}
Application **is always starting** from the *View* called **`MainView`**, and **it's mandatory**.
{% endhint %}

![Application Views](/files/7aBSXbPltFe0pTC6GBgG)

### 1. Creating and Working with a View

In the *Main Menu* settings, any new or existing *View* can be *created*, *renamed*, *duplicated*, *deleted*, *exported*, or *changed* in its parent directory.

{% tabs %}
{% tab title="Main Menu\[Create New View]" %}
![](/files/8g1rvgAtRndMfH1Pc3Xd)
{% endtab %}

{% tab title="Main Menu\[Name & Locate New View]" %}
![](/files/FgW4oZug0uPTh5oAIf20)
{% endtab %}

{% tab title="Main Menu\[List of Existing Views & it's Options]" %}
![](/files/SdTAEv2eL3d2UhckBjKL)
{% endtab %}
{% endtabs %}

### 2. Views Tabs

Switching between opened *Views* can be done by clicking on its tabs and closing them by clicking on the cross icon.

{% hint style="info" %}
Any unsaved changes **will be lost** after closing a tab!
{% endhint %}

{% tabs %}
{% tab title="View\[Tabs & Closing]" %}
![](/files/1yG3ruqEOu7c0FSxG9VQ)
{% endtab %}
{% endtabs %}

### 3. Screen Resolutions

Switching between the screen resolution allows displaying proper responsivity on different devices. Each of the resolutions is represented by the pixel value, which can be modified if required.

{% hint style="info" %}
The **Base Screen** setting is considered to be a **default** in herity chain.
{% endhint %}

{% tabs %}
{% tab title="Base Screen" %}
![](/files/1t6bD3A5rktUwtRsiiC8)
{% endtab %}

{% tab title="Phone Screen" %}
![](/files/TbTEN3b7WjmGrAnnSyLr)
{% endtab %}

{% tab title="Custom Pixel Ratio" %}
![](/files/wAYPpe8EWn3cdA8rqRMf)
{% endtab %}
{% endtabs %}

### 4. Undo & Redo

Each of the existing *Views* has its own *undo* and *redo* steps if necessary.

{% tabs %}
{% tab title="Undo & Redo" %}
![](/files/MOS8rWuzaHiPV9HEDqqt)
{% endtab %}
{% endtabs %}

### 5. Toggling the Panels

Resizing the *Canvas Work-field* during developing applications, especially on the smaller screens, can take advantage of by switching off the left and right panels by clicking on the *toggle buttons*.

{% tabs %}
{% tab title="Left Toggle Button" %}
![](/files/2sCYa7P0m9c3QxxxoHgW)
{% endtab %}

{% tab title="Right Toggle Button" %}
![](/files/qgghDp6rlEteS5YwtO3z)
{% endtab %}
{% endtabs %}

### 6. Saving a Current Content

The *Save button* will save the composition of a *current View*; meanwhile, *Save All button* will save all opened *tabs*, even *actions*, and *integrations*.

{% tabs %}
{% tab title="Save View Button" %}
![](/files/Rk0i1GEUBG5NOjMKTC7H)
{% endtab %}

{% tab title="Save All Application Button" %}
![](/files/Zqs5Kjp5aVPsefTsZzJn)
{% endtab %}
{% endtabs %}

### 7. View the Options Panel

The *Options Panel* allows direct work with a *current View*, like *renaming*, *moving* to different directories, *duplicating* actual content into a new *View*, *watching* revision history, *exporting* its content to *YAML*, and deleting the whole *View*.

{% hint style="info" %}
The Revision history would be available as soon as possible.
{% endhint %}

{% tabs %}
{% tab title="Options Panel" %}
![](/files/VcuIgyLtBSjDkCbfNDyh)
{% endtab %}
{% endtabs %}

### 8. Design & Preview & Debug

1. The **Design Mode** is the essential part of designing *Views*. You can drag and drop components into *Canvas Work-field* and edit their properties.
2. The **Preview Mode** is representing the visual output of a current *View* and active components are fully available.
3. The **Debug Mode** shows the current *View* blueprint that is taking advantage of checking exported code. Any immediate changes are fully responsive.

{% tabs %}
{% tab title="Design Mode" %}
![](/files/fv9xvbSfX1HwE1k8R1Wj)
{% endtab %}

{% tab title="Preview Mode" %}
![](/files/H8L8Fcyc3WIWXlmSHjMN)
{% endtab %}

{% tab title="Debug Mode" %}
![](/files/1pP8sM6654qjQLOaBN9R)
{% endtab %}
{% endtabs %}