> 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

Create pages to build dashboards, structure information, and guide users through your app.

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

{% hint style="info" %}
You can add and use the components described here in the same way on a table's form view.
{% endhint %}

## **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, 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 **Settings**.\
Refine its data source, display, and behavior.
{% endstep %}

{% step %}
**Show or hide a page in the navigation**

Open the **Settings** tab in the settings panel.\
Under **General**, enable **Hide page from navigation**.\
Users can then access it only through a UI navigation workflow.\
Admins can still see it in the navigation while using **Builder mode**.
{% 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.
* **Custom components**, **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 component inside the page layout. You can add more than one view component to the same page. For standalone views, see [Work with views](/builder-hub/visualize-and-organize-your-data/work-with-views.md).
{% endhint %}

### **Basic components**

<table data-view="cards"><thead><tr><th></th><th data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Text component</strong><br>Add headings, instructions, and helper content</td><td><a href="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/text-component.md">Free text component</a></td></tr><tr><td><strong>Custom component</strong><br>Build custom, data-driven page interfaces</td><td><a href="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/custom-component.md">Custom component</a></td></tr></tbody></table>

### **Controls**

<table data-view="cards"><thead><tr><th></th><th data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Button component</strong><br>Use a button for actions on a page or anywhere in your app</td><td><a href="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/button-component.md">Button component</a></td></tr></tbody></table>

### **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="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/table-component.md">Table component</a></td></tr><tr><td><strong>Kanban component</strong><br>Group records into columns by stage</td><td><a href="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/kanban-component.md">Kanban component</a></td></tr><tr><td><strong>Calendar component</strong><br>Show records by date on a page</td><td><a href="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/calendar-component.md">Calendar component</a></td></tr><tr><td><strong>Map component</strong><br>Display records with location data</td><td><a href="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/map-component.md">Map component</a></td></tr><tr><td><strong>Metric card component</strong><br>Highlight one key value on a page</td><td><a href="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/metric-card-component.md">Metric card component</a></td></tr><tr><td><strong>Chart components</strong><br>Compare values and show trends</td><td><a href="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/chart-components.md">Chart components</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="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/container-component.md">Container component</a></td></tr><tr><td><strong>Tabs component</strong><br>Switch between related sections</td><td><a href="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/tabs-component.md">Tabs component</a></td></tr><tr><td><strong>Accordion component</strong><br>Keep sections collapsed until needed</td><td><a href="/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/accordion-component.md">Accordion component</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.