> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages.md).

# Create and customize pages

Pages let you turn table data into dashboards, landing pages, and focused workspaces. You can combine text, actions, views, charts, and layouts in one place. \
Pages do not store records themselves. They display content from your existing tables and help users focus on the right information. 

Open the page in **Builder mode** to add content in **Add**, adjust the selected component in **Settings**, and review the page hierarchy in **Structure**.

Pages work especially well as dashboards when users need to review information from several tables in one place. Start with the key question users need the page to answer. Then choose the smallest set of components that supports that goal.

When you design a page, keep it focused:

* Use charts for summary and views for record-level work
* Group related content with **Container**, **Tabs**, or **Accordion**
* Refine each component in **Settings** after the data displays correctly
* Hide source tables from navigation when the page is the main entry point

## **Create a page**

{% stepper %}
{% step %}
**Open Create page**

In the app navigation, click the arrow next to **+ Create table**.\
Select **Create page**.
{% endstep %}

{% step %}
**Enter the page name**

Enter a value in **Name**.\
Ninox creates the **Internal name** automatically.\
Change the **Internal name** only if you need a different value.
{% endstep %}

{% step %}
**Choose an icon and color**

Click the icon picker.\
Select an icon and a color.\
Click **Confirm**.
{% endstep %}

{% step %}
**Create the page**

Click **Create page**.\
The new page appears in the app navigation.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
To delete a page, open it in **Builder mode**. In the Settings panel, switch to **Form**, open **Settings**, and click the red <i class="fa-trash-can">:trash-can:</i> trash icon next to **Page**.
{% endhint %}

## **Add and arrange components on a page**

{% stepper %}
{% step %}
**Open the Add tab**

In the **Settings** panel, open **Add**.
{% endstep %}

{% step %}
**Add a component**

Choose the component you want to use.\
Drag and drop it onto the page.
{% endstep %}

{% step %}
**Move and resize the component**

Select the component.\
Drag the component to move it on the page.\
Use the resize handles to adjust its size, if that option is available on the chosen component.
{% endstep %}

{% step %}
**Adjust the settings**

Select the component.\
If the component **Settings** are not already shown in the settings panel, go to **Form** and then to **Settings**.\
Refine its data source, display, and behavior.
{% endstep %}
{% endstepper %}

## **What you can add to a page**

The **Add** panel includes **Basic components** like Text, **Controls** like Button, **Views**, **Charts**, and **Layouts**.\
Open these options from the **Add** tab in the **Settings** panel. You can also use the blue <i class="fa-circle-plus">:circle-plus:</i> **Add component** button on the page.

* Use **Text** for headings, short instructions, and helper content.
* Use **Button** for actions on the page.
* **Views** and **Charts** show key data and statistics.
* Use **Layouts** to structure and organize the data on your page.

{% hint style="info" %}
A view on a page is a page component inside the page layout. You can add more than one view to the same page. For standalone views, see [Work with views](/builder-hub/visualize-and-organize-your-data/work-with-views.md).
{% endhint %}

### **Views and charts**

<table data-view="cards"><thead><tr><th></th><th data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Table component</strong><br>Show records in rows and columns on a page</td><td><a href="/spaces/YwCp7NT87JGgngrkhfHT/pages/59rFNpbmlsPKeNnz85iN">/spaces/YwCp7NT87JGgngrkhfHT/pages/59rFNpbmlsPKeNnz85iN</a></td></tr><tr><td><strong>Kanban component</strong><br>Group records into columns by stage</td><td><a href="/spaces/YwCp7NT87JGgngrkhfHT/pages/pi6R1tJgkWIVJHTFy9cg">/spaces/YwCp7NT87JGgngrkhfHT/pages/pi6R1tJgkWIVJHTFy9cg</a></td></tr><tr><td><strong>Calendar component</strong><br>Show records by date on a page</td><td><a href="/spaces/YwCp7NT87JGgngrkhfHT/pages/XGWcg5UIJ4wrRW7jfk5n">/spaces/YwCp7NT87JGgngrkhfHT/pages/XGWcg5UIJ4wrRW7jfk5n</a></td></tr><tr><td><strong>Map component</strong><br>Display records with location data</td><td><a href="/spaces/YwCp7NT87JGgngrkhfHT/pages/AalSMcet5W3Hq5oCeaLw">/spaces/YwCp7NT87JGgngrkhfHT/pages/AalSMcet5W3Hq5oCeaLw</a></td></tr><tr><td><strong>Metric card component</strong><br>Highlight one key value on a page</td><td><a href="/spaces/YwCp7NT87JGgngrkhfHT/pages/hYmi1VQCKwNs3I2sHXfD">/spaces/YwCp7NT87JGgngrkhfHT/pages/hYmi1VQCKwNs3I2sHXfD</a></td></tr><tr><td><strong>Chart components</strong><br>Compare values and show trends</td><td><a href="/spaces/YwCp7NT87JGgngrkhfHT/pages/sjl07OSUkhMER5p08jYk">/spaces/YwCp7NT87JGgngrkhfHT/pages/sjl07OSUkhMER5p08jYk</a></td></tr></tbody></table>

### **Layouts**

<table data-view="cards"><thead><tr><th></th><th data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Container component</strong><br>Group related components in one area</td><td><a href="/spaces/YwCp7NT87JGgngrkhfHT/pages/kvxCQiCtKkIxBP2pSHHs">/spaces/YwCp7NT87JGgngrkhfHT/pages/kvxCQiCtKkIxBP2pSHHs</a></td></tr><tr><td><strong>Tabs component</strong><br>Switch between related sections</td><td><a href="/spaces/YwCp7NT87JGgngrkhfHT/pages/H7R1xkoW7O206AfbjF5D">/spaces/YwCp7NT87JGgngrkhfHT/pages/H7R1xkoW7O206AfbjF5D</a></td></tr><tr><td><strong>Accordion component</strong><br>Keep sections collapsed until needed</td><td><a href="/spaces/YwCp7NT87JGgngrkhfHT/pages/MfHzJAMUb7VqOtBRdh1F">/spaces/YwCp7NT87JGgngrkhfHT/pages/MfHzJAMUb7VqOtBRdh1F</a></td></tr></tbody></table>

## **Share a page without showing source tables**

Pages work well when users need insight from several tables, but do not need to open those tables directly. For example, one page can combine data from projects, tasks, and invoices and stay visible for users who only need the dashboard view. To keep the interface focused, hide the source tables from the app navigation and leave the page visible.

Hiding a table from navigation only removes it from the menu. If the source tables contain sensitive data, also use table and field permissions to control access. For more on roles and permissions, see [Manage workspace access](/builder-hub/manage-your-organization-and-workspace/organize-your-workspace/manage-workspace-access.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.