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


---

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