# Pages

Pages are specific component or section within an app, serving a particular purpose or providing specific content or functionality. Every app must have at least one page.

There are two kind of pages: Grid view pages (default) and Web view pages. Grid view is designed for ease of use, allowing you to control element layout through drag and drop. On the other hand, Web view is tailored for advanced layout customization. Here, you have the full flexibility to utilize CSS for creating more intricate layouts and exercising precise control.

<div align="left"><figure><img src="/files/I9wJrCJcXS0SlUnOovqc" alt="" width="375"><figcaption></figcaption></figure></div>

## Grid view pages

Grid view <img src="/files/90dyVIeFyA8PhzlMXE4G" alt="" data-size="line">is designed for ease of use, allowing you to control element layout effortlessly through drag and drop.

There are 24 columns in a grid view page, with each grid view unit width automatically adjusting to fit the view width. The height of a grid view unit is fixed at 12 pixels. Consequently, content within the grid view scrolls vertically along the Y-axis and expands horizontally along the X-axis.

## Web view pages

Web view <img src="/files/K7JL9qzsy2zA6WDetj8m" alt="" data-size="line">is more like traditional website, offering advanced customization options for layout design. Here, you have complete flexibility to leverage CSS for crafting intricate layouts and exerting precise control over the presentation.

By default, a Web View page has dimensions of 1920x1080 pixels, providing a standard canvas size for your web content.

## Settings

Select a page to alter its settings. Under Config, you’ll be able to change the name, size, background and path for a page. <img src="/files/90dyVIeFyA8PhzlMXE4G" alt="" data-size="line">indicates grid view and <img src="/files/K7JL9qzsy2zA6WDetj8m" alt="" data-size="line">indicates web view.

<div align="left"><figure><img src="/files/nQGMq0akXvM82kKR46WH" alt="" width="288"><figcaption></figcaption></figure></div>

**Name:** The name of a page, which will also be the tab title in the browser. Use the edit icon<img src="/files/fWEzg590AQOIUEoV4b80" alt="" data-size="line">to edit page name.

**Background**: 1. color: Use color selector or HEX code to select a fixed color for the page.\
&#x20;                     2\. image: Use image url to set a customized background image.

**Path:** The URL path suffix for a page determines its web address. It should adhere to URL rules, containing no spaces and using valid characters limited to letters (A-Z, a-z), digits (0-9), hyphens (-), underscores (\_), and slashes (/).

**Page Metadata:** The title, description and thumbnail image, enhancing search engine visibility and improves user experience.

## Supported Events

Pages have supported events with which to build [Interactions](/app-builder/app-construction/interactions.md). Below, we see the options for page events.

![](/files/LbWyDIYY2xEtKgXQg7nl)

1. **Before Render:** Triggered before a page loads or refreshes.
2. **After Render:** Triggered just after a page loads or refreshes.
3. **Leave Page:** When this is selected the action will be triggered when the user exits the page.

## Supported Actions

**Set page data:** Set page level data. See [Data Store](/app-builder/app-construction/data-store.md) for more on page data.

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}


---

# 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.acho.io/app-builder/app-construction/pages.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.