> 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/getting-started/builder-getting-started/intro-to-the-ninox-ui/app-screen-your-main-working-screen.md).
# App screen - your main working screen
The main place where you work with data in an app is the app screen. Here you open tables, switch between tables and pages, and change the structure of your app.\
This page explains the layout of the app screen and shows you how the main tools work when you view and edit records.\
Turn on [**Builder mode**](#builder-mode) when you want to access build tools such as **Create table**, **Data model**, and the **settings panel**.
When you open an app, the screen can include a few main areas.
1️⃣ Main navigation
2️⃣ App navigation
3️⃣ Table area
4️⃣ Top bar
5️⃣ Settings panel, when **Builder mode** is on
## Main navigation - switch workspaces and open global areas
On the far left is the main navigation. From here you can:
* Switch to a different workspace or organization
* Open the workspace home
* Open **Ninox AI chat** :wand-magic-sparkles: to show the **Ninox AI assistant**
* Add additional apps to the current workspace
* Open **Settings**
* Open global areas such as **Notifications** and **Profile**
The main navigation is shared across the whole product, not just one app.
{% hint style="info" %}
When you work inside an app, click the magic wand icon in the main navigation to open the **Ninox AI assistant** in a side panel.
{% endhint %}
## App navigation - move between tables and pages
The app navigation is the panel directly next to the main navigation. It shows only items that belong to the current app.
Use this area when you want to stay inside one app and move between its working areas. In daily use, this usually means switching between data tables and app pages without going back to workspace home.
The main part of the app navigation shows:
* The workspace name
* **Invite users** :user-plus: button
* All tables and pages in the current app
The selected table or page stays highlighted in the app navigation. This makes it easier to see where you are, especially in apps with many tables or pages.
When [**Builder mode**](#builder-mode) is on, the bottom of the app navigation shows the builder controls for the current app:
* **+ Create table** button with a menu arrow
* **App settings**
* **Data model**
* **Builder mode** toggle
When **Builder mode** is off, this area stays compact and only the **Builder mode** toggle remains visible.
The next sections explain these controls in more detail. They show how to create new tables or pages, open app-level settings, inspect the data model, and switch between working mode and building mode.
### Create new tables and pages from the app navigation
The **+ Create table** area at the bottom of the app navigation lets you add new objects to your app without leaving the app screen.\
Make sure [**Builder mode**](#builder-mode) is turned on to create new tables or pages.
You can either click the main button or open more options with the arrow.
From here you can:
* **Create table**\
Creates a new empty table in the current app.
* **Import table from CSV**\
Creates a table and fills it with data from a CSV file.
* **Create page**\
Creates a page that you can use for dashboards, documentation, or other content.
#### Create a new empty table
{% stepper %}
{% step %}
**Start table creation**
In the app navigation, click **+ Create table** and choose **Create table**.
{% endstep %}
{% step %}
**Enter the table name**
Enter a **Name** for your table. This is the name people see in the app navigation and table tabs.
{% endstep %}
{% step %}
**Review the internal name**
Optionally change the autofilled **Internal name**. This is used in technical contexts and does not have to match the name.
{% endstep %}
{% step %}
**Choose whether to use AI suggestions**
Keep **AI suggestions** turned on to let Ninox propose fields for your table.
{% endstep %}
{% step %}
**Create the table**
Click **Create table**.
{% endstep %}
{% endstepper %}
Ninox adds the new table to the app navigation and opens it immediately.
#### Create a new table from CSV
{% stepper %}
{% step %}
**Start the CSV import**
In the app navigation, click the arrow next to **+ Create table** and choose **Import table from CSV**.
{% endstep %}
{% step %}
**Upload your CSV file**
Select and upload the CSV file you want to import.
{% endstep %}
{% step %}
**Check the table name**
In **Parse settings**, review the autofilled table name in **Name**. Ninox uses the CSV file name by default. Change it if needed.
{% endstep %}
{% step %}
**Check the internal name**
Review the autofilled **Internal name**. Ninox also takes this from the CSV file name. Change it only if needed.
{% endstep %}
{% step %}
**Review the parse settings**
Adjust the parsing options if your file is not detected correctly:
* **Encoding**, for example **UTF-8 (Unicode)**
* **Date format**
* **Number format**
* **Column separator**, for example bar, comma, semicolon, or tabulator
* **Text delimiter**, either double or single quotes
* **Include header** if the first row contains column names
* **Treat empty fields as null** if empty cells should be imported as `null`
{% endstep %}
{% step %}
**Check the preview**
Review the preview on the right. It shows how Ninox reads the CSV data before import.
{% endstep %}
{% step %}
**Open field mapping**
Select **Map fields**.
{% endstep %}
{% step %}
**Map the CSV columns**
For each CSV column, choose how Ninox should import it:
* Keep **Import** turned on to include the column
* In **Existing ninox fields**, choose **Do not map** to skip the column
* Choose **+ Create new** to create a new Ninox field
* Or select an existing Ninox field to map the CSV column to it
* If you choose **+ Create new**, select the field type below it, for example **Text**, **Number**, **Yes / No**, or **Date**
{% endstep %}
{% step %}
**Choose the update policy if needed**
If you map a CSV column to an existing field, choose the **Update policy**:
* **Update** replaces the existing value
* **Update empty** fills only empty values
{% endstep %}
{% step %}
**Create the table**
Click **Create table**.
{% endstep %}
{% endstepper %}
Ninox creates the table, adds the mapped fields, and imports the CSV rows as records.
#### Create a new page
A **page** is a canvas where you design how users interact with your app. You place fields, logic fields, view elements, and buttons on the page so it can serve as a starting point or dashboard for your app.
{% stepper %}
{% step %}
**Start page creation**
In the app navigation, click the arrow next to **+ Create table** and choose **Create page**.
{% endstep %}
{% step %}
**Enter the page name**
Enter a **Name**. This is the title people see in the app navigation.
{% endstep %}
{% step %}
**Review the internal name**
Optionally change the autofilled **Internal name**. This becomes part of the URL and must not contain special characters.
{% endstep %}
{% step %}
**Create the page**
Click **Create page**.
{% endstep %}
{% endstepper %}
Ninox adds the page to the app navigation and opens the settings panel automatically, where you can design the page with charts, text, and other components.
Learn more in [Create and customize pages](https://ninox-1.gitbook.io/ninox-docs/OE5eDeSCv1tCbV8e0YOj/builder-hub/visualize-and-organize-your-data/markdown).
### Open app settings from the app screen
The :gear: **App settings** entry sits in the lower part of the app navigation when **Builder mode** is on. It opens the settings for the current app.
Use this screen to update the app name, icon, access, and visibility.
In **App settings** you can update:
* **App name**, which is the name users see in the app navigation
* The app icon, which appears next to the app name
* **Internal name**, which is the unique identifier used by the system
Under **Manage access and visibility** you can:
* Use **Allow access to** to control which [workspace user roles](/builder-hub/manage-your-organization-and-workspace/organize-your-workspace/manage-workspace-access.md) can open and use the app
* Turn on **Hide this app** to hide the app from normal users. Workspace admins can still find it on the workspace home page.
* Turn on **Hide the navigation bar inside this app** to hide the app navigation when **Builder mode** is off
Click **Update settings** to save your changes.
### Explore your data model
**Data model** in the app navigation opens a visual overview of your tables and their relationships. This helps you understand how data in your app fits together.\
Make sure [**Builder mode**](#builder-mode) is turned on to access the **Data model**.
In the data model view you can:
* See each table as a box with its fields
* Use **Create field** at the bottom of a table box to add a new field directly to that table
* Follow arrows between tables to understand relationships, such as which table links to which
* Use **Visible tables** to show or hide parts of the model when you have many tables
* Switch between **Labels** and **Names** to see either user friendly labels or internal names
* Turn **Show fields** on or off to show only table boxes or also the fields inside them
* Use **Create table** at the top to add a new table directly from this view
Use the data model when you plan changes to your app, want to explain the structure to new teammates, or need to check how tables are connected before adding automations or formulas.
### Builder mode
**Builder mode** switches the app between daily work and app design.\
The toggle is located at the bottom of the app navigation.
When **Builder mode** is off, the app stays focused on working with records:
* The table area and top bar stay available for daily work
* The app navigation stays compact
* **+ Create table**, **App settings**, and **Data model** are hidden
* The right-side **settings panel** is not available
This is the mode most end users work in.
When **Builder mode** is on, builder controls become available:
* The app navigation expands with **+ Create table**, **App settings**, and **Data model**
* You can open the right-side **settings panel** to edit table, field, and form structure
* More builder actions appear in context menus and setup screens
The **settings panel** can stay open or closed while **Builder mode** remains on.
## Table area - view and edit your records
The central part of the screen shows the current table or view.
In this area you can:
* Scroll through records
* Edit values directly in the grid (with **Inline editing** on)
* Add, duplicate, or delete records
* Open a single record in a side panel
You control how the table behaves with the top bar tools and with **Inline editing** mode.
## Top bar - search, filter, and organize your data
Above the table, you find the top bar. It contains tools for working with the current table or view, such as:
* **Search in records** to find matching records quickly
* **Hidden columns** to hide or show fields in the grid
* **Filter** to show only records that match certain conditions
* **Import/export** to bring data in and out
* **Inline editing** to choose between grid editing and the form view
* **Add record** to create new records
These actions affect only the current table or view, not the entire workspace.
### Search records quickly
Use **Search records** when you want to search for values in the current table or view.
1. Click **Search records**.
2. Type part of the value you are looking for.
3. Ninox shows matching records in the grid.
This is useful for quick lookups without setting up a full filter.
### Filter the table
Use **Filter** to show only records that match field-based conditions.
1. Click **Filter**.
2. In **Where**, select the field you want to filter.
3. In **Operator**, choose the condition you want to apply.
4. In **Value**, enter a value if the selected operator requires one.
5. Add more conditions in the next empty row if needed.
The available operators depend on the selected field type and the kind of comparison you want to make.
The table updates immediately while you build the filter. When a filter is active, the **Filter** button shows the number of active conditions. To remove a condition, click the trash icon on that row.
### Hide or show columns
Use **Hidden columns** to control which fields are visible in the grid.
If columns are currently hidden, the control shows the number of hidden fields, for example **4 hidden columns**.
1. Click **Hidden columns**.
2. Select or clear the checkboxes for the fields you want to show or hide.
This does not delete fields. It only affects the current view and helps you reduce visual noise.
### Import and export data
Use **Import/export** to move data in or out of the current table.
When you open the **Import/export** menu, you can choose:
* **Import data** to bring data into the current table
* **Export data** to download data from the current table
* **Integrate API** to connect the table to external systems through the Ninox API
Learn more in [Import and export data](/builder-hub/design-your-app/import-and-export-data.md).
### Work directly in the grid with inline editing
On a table, you can work with records either directly in the grid or one record at a time in a side panel. How editing behaves depends on whether **Inline editing** is turned on or off.
When **Inline editing** is on, you can click into a cell and change the value directly in the grid. This is the fastest way to clean up and update data across many records.
You can use grid editing with **Inline editing** on to:
* Fix spelling mistakes and other small text changes
* Update statuses across many records
* Change dates or numbers in place
* Move quickly between cells and records with the keyboard
For fields that have a specific input type, Ninox shows the appropriate control directly in the grid when you click a cell, such as:
* A dropdown for choice fields
* A date picker for date fields
* A checkbox for boolean fields
This lets you stay in the grid while still using precise input controls instead of typing everything manually.
If you prefer to focus on one record at a time, or you need more space to see all fields and related data, turn **Inline editing** off. In this case, clicking a record opens it in the form view instead of editing it directly in the grid.
In the form view you typically:
* See fields grouped into sections, which makes long forms easier to understand
* Have more room to read and edit all details of a record
* Can add and review related data more comfortably than in the grid
Compared to **Inline editing**, the form view can also give you more record-specific functions. Depending on the table setup and your permissions, this can include:
* Separate **Files**, **Emails**, and **History** tabs
* Actions such as **Bookmark**, **Print**, and **Delete**
* Linked records and tables
This record‑by‑record style is useful when:
* Records have many fields and would be hard to handle only in the grid
* You want to review details carefully before making changes
* You need to work with related data that is easier to manage in a full record view
You can switch between these two styles at any time using **Inline editing**:
* Turn **Inline editing** on when you want fast editing in the grid.
* Turn **Inline editing** off when you want more space, context, and a side panel for each record.
### Add a new record
Click **Add record** to create a new record in the current table.
What happens next depends on the current editing mode:
* With **Inline editing** on, you can start entering values directly in the grid.
* With **Inline editing** off, the new record opens in the form view.
## Settings panel - configure tables, fields, and views
The **settings panel** is where you change the structure of the current table. It is available when [**Builder mode**](#builder-mode) is turned on.\
Click the **Open settings panel** :gear: icon in the top right to show it.
{% hint style="info" %}
To resize the panel, drag its left border.
{% endhint %}
You can work in two tabs:
* **Table** for a list-based view of the table structure
* **Form** for a drag-and-drop view with the form view
Both tabs edit the same table. The difference is the workflow. Use the **Table** tab when you want a structured view of table settings and fields. Use the **Form** tab when you want to build and arrange the form view more visually.\
The next sections show what you can do in each tab.
### Use the Table tab
Use the **Table** tab when you want speed and overview. At the top of the panel, select **Table**. Then choose one of these tabs: **Settings** or **Fields**.
With the **Settings** tab you control table-wide behavior. Use it to adjust the table’s core properties. You can also add logic to the table for create, update, and delete events. You have options to control access and to enable file attachments, change history, or hide the table for end users.
**Fields** is the fastest way to manage structure. You get a searchable list of all fields with their labels and types, and you can filter it to focus on data fields, relationship fields, or functions.\
Use **Create field** to add a field directly to the list.\
The menu next to the filter helps with bulk work, so you can copy selected fields, paste them again, or delete several at once. This is useful when you want to reuse a field setup or clean up a larger table quickly.
### Use the Form tab
Use the **Form** tab when you want to work more visually on the form view.\
At the top of the panel, select **Form**. Then choose one of these tabs: **Add**, **Settings**, or **Structure**.
**Add** lets you build and update a table in a more visual way. Drag, for example, a data field, into the form view and Ninox creates that field in the table too.\
The other categories help you shape the form itself. For example, you can add relationships for linked records, controls like buttons or toggles, and embedded views like a table or calendar. You can also add charts for visual summaries and layout elements (containers) like rows, tabs, or accordions.
**Settings** shows the options for the selected form element. Here you can rename the element and adjust how it looks and behaves in the form. Depending on the element type, this can include display options like spacing, borders, background, and layout direction, as well as visibility settings. If nothing is selected, this area may be empty.
**Structure** shows what is already in the form and how it is arranged. You can quickly scan the hierarchy, see each element’s type, check its visibility, and open more actions when needed. This is useful when the form grows and you want a clean overview without clicking through every element.
{% hint style="info" %}
To close the settings panel, click the **Close panel** icon in the top right.
{% endhint %}
---
# 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/getting-started/builder-getting-started/intro-to-the-ninox-ui/app-screen-your-main-working-screen.md?ask=&goal=
```
`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.