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

You can add and use the components described here in the same way on a table's form view.

Create a page

1

Open Create page

In the app navigation, click the arrow next to + Create table. Select Create page.

2

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.

3

Choose an icon and color

Click the icon picker. Select an icon and a color. Click Confirm.

4

Create the page

Click Create page. The new page appears in the app navigation.

To delete a page, open it in Builder mode. In the Settings panel, open Settings, and click the red trash icon next to Page.

Add and arrange components on a page

1

Open the Add tab

In the Settings panel, open Add.

2

Add a component

Choose the component you want to use. Drag and drop it onto the page.

3

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.

4

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.

5

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.

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 Add component button on the page.

• Use Text for headings, short instructions, and helper content.
• Use Input components to collect data for multiple tables from one page, without displaying those tables.
• 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.

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.

Basic components

Text component Add headings, instructions, and helper content

Free text component

Input component Collect data on a page, then process or forward it

Input component

Custom component Build custom, data-driven page interfaces

Custom component

Controls

Button component Use a button for actions on a page or anywhere in your app

Button component

Views and charts

Table component Show records in rows and columns on a page

Table component

Kanban component Group records into columns by stage

Kanban component

Calendar component Show records by date on a page

Calendar component

Gantt component Plan and track scheduled work on a timeline

Gantt component

Map component Display records with location data

Map component

Metric card component Highlight one key value on a page

Metric card component

Chart components Compare values and show trends

Chart components

Layouts

Container component Group related components in one area

Container component

Tabs component Switch between related sections

Tabs component

Accordion component Keep sections collapsed until needed

Accordion component

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.