# Your first app

Explore the essential steps to get started with Ninox by building your first app using a practical invoice management example. Along the way, you will learn how to create tables, add fields, set up relationships, and structure your data for real-world use.

While Ninox offers the AI assistant to help you generate your data model and app structure automatically, this guide walks you through each step manually. Building your app by hand will help you understand how Ninox apps are structured and how your data is organized. This foundation will make it easier to customize your app and use Ninox’s features effectively.

## What you will build <a href="#what-you-will-build" id="what-you-will-build"></a>

With Ninox, you can create apps to store and organize your data and workflows. Each app is based on a database and can be customized to fit your specific needs.\
A well-structured app, with correctly set up tables, field types, and relationships, makes it easier to build useful and efficient views. You can always adjust your data model as your needs evolve.

In this example, you will build an app that helps you manage invoices, customers, products, and all related data. The app will include the following tables:

* Invoices: stores invoices you issue
* Invoice items: for line items on each invoice
* Products: goods or services you sell
* Customers: invoice recipients

You will also:

* Set up relationships between these tables.
* Use automations to copy flexible data between tables to save them as static ones.
* Use logic fields to calculate totals, VAT, and due dates.

## Create the app <a href="#create-the-app" id="create-the-app"></a>

Create your first app from workspace home, then open it on the app screen.

{% stepper %}
{% step %}
**Open workspace home**

Switch to your workspace home screen. This is where you create and open apps in the current workspace.

<figure><img src="/files/EFjhwWBf3Z1xAgsltMNS" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Start manual app creation**

Select **Create app manually**. This opens the **Create app** dialog for a manual setup.
{% endstep %}

{% step %}
**Name your app**

Enter a **Name** for your app, such as "Invoice management". Use a clear name that matches the process or team the app supports.\
Ninox generates the **Internal name** automatically. You can change it, but this is not recommended.
{% endstep %}

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

Click the icon <i class="fa-database">:database:</i> next to the app name.

Pick an icon and color that make the app easy to recognize later. **Confirm** your icon and color choice.

<figure><img src="/files/ajQCpHdTdXPfxmy8vBy2" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Create the app**

Click **Create app**.\
Ninox creates the app and adds it to workspace home as a new tile.
{% endstep %}

{% step %}
**Open the new app**

Open your new app from its tile on workspace home.

<figure><img src="/files/HJB4bziOamG4mibEcJXo" alt=""><figcaption></figcaption></figure>

Ninox takes you directly to the app screen and opens the first table.
{% endstep %}
{% endstepper %}

## Create the tables <a href="#create-the-tables" id="create-the-tables"></a>

Create the core tables for your app before you add fields and relationships.

{% stepper %}
{% step %}
**Start the first table**

Click **+ Create table** in the center of the screen to add a table to your app.\
Start with the “Invoices” table. This will hold the main invoice records.
{% endstep %}

{% step %}
**Name the table**

In the **Create table** diaglog enter "Invoices" in **Name**.\
Ninox generates the **Internal name** automatically. You can change it, but this is not recommended.\
Feel free to choose an icon for the table.
{% endstep %}

{% step %}
**Turn off AI suggestions**

Uncheck **AI suggestions**. In this guide, you define the table structure manually.
{% endstep %}

{% step %}
**Create the table**

Click **Create table**.

Ninox adds the “Invoices” table to the app navigation and opens it on the app screen.

<figure><img src="/files/LfyFnPECAmO0rY5YO6pT" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Add the remaining tables**

Click **+ Create table** in the app navigation and repeat the same steps for:

* “Invoice items”
* “Products”
* “Customers”

These four tables form the basis of the invoice management app.
{% endstep %}

{% step %}
**Check the result**

Confirm that all four tables appear in the app navigation.

At this point, your app should contain “Invoices”, “Invoice items”, “Products”, and “Customers”.
{% endstep %}
{% endstepper %}

## Add fields to your tables <a href="#add-fields-to-your-tables" id="add-fields-to-your-tables"></a>

Add the fields for each table so your app can store the right data. Let's take a look at how it generally works. Afterwards create all the fields mentioned in the following list for each table.

{% stepper %}
{% step %}
**Start adding fields**

Click **+ Add field** in the center of the screen to create the first field in the current table.\
You will repeat this process for each of the four tables.
{% endstep %}

{% step %}
**Define the field**

Enter a field **Name** in the **Add field** dialog and choose the matching field **Type**.

<figure><img src="/files/p2SH1GDJuqB90vxTopOH" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Add more fields**

Click **Add another field** to keep adding fields without closing the dialog.\
Continue until you have added all required fields for the current table.
{% endstep %}

{% step %}
**Review the table columns**

When you finish with **Create field**, Ninox shows the new fields as columns in the table. This gives you a quick check that the structure looks right.

<figure><img src="/files/vjw5dmqRmJS2zPIYkebz" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

Repeat this until all tables contain the fields listed below. Just add these fields, don’t worry about values for the choice fields or number formats. You will apply these later on.

{% columns %}
{% column %}
"Invoices" table:

* Invoice number (Text)
* Type (Single-choice)
* Creation date (Date)
* Status (Single-choice)
* Payment term (Single-choice)
* Notes (Text)
  {% endcolumn %}

{% column %}
"Invoice items" table:

* Item number (Number)
* Product description (Text)
* Quantity (Number)
* Unit price (Number)
* VAT rate (Number)
  {% endcolumn %}
  {% endcolumns %}

{% columns %}
{% column %}
"Products" table:

* Product name (Text)
* Product number (Text)
* Short description (Text)
* Detailed info (Text)
* VAT (Single-choice)
* Purchase price (Number)
* Sales price (Number)
  {% endcolumn %}

{% column %}
"Customers" table:

* Customer number (Text)
* Full name (Text)
* Address (Multi-line text)
* Email (Email)
* Photo (File)
  {% endcolumn %}
  {% endcolumns %}

### Add values to your choice fields <a href="#add-values-to-your-choice-fields" id="add-values-to-your-choice-fields"></a>

After you have created your table and fields, it’s time to add values to your choice fields by following these steps.

{% stepper %}
{% step %}
**Open the form view**

Click **+ Add record** to open the form view. You can recognize choice fields by the small arrow at the end of the field, in this example, "Type", "Payment term", and "Status".

<figure><img src="/files/VcSh0GGXHvtvWLoWEQ2H" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Access the quick settings**

Click your first choice field, the quick settings menu appears on top of the field.

<figure><img src="/files/HNG93b60wpCPMxhk2XN3" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Open the quick settings**

Click the <i class="fa-gear">:gear:</i> gear icon. to open the quick settings.

<figure><img src="/files/yJR4miMQIclm77r46dmI" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Add the first values**

Enter your first two values under **Options**. In this example for the "Type" field enter "Offer" and "Invoice". Optionally pick an icon and color for the options.

<figure><img src="/files/oXKeMfZUMW0rLsFy9yzn" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Add more values if needed**

Click **+ Add value** for every additional option and enter the label you want to use.
{% endstep %}

{% step %}
**Repeat for all choice fields**

Continue until all choice fields contain the values listed here:

"Invoices" table:

* "Type": Offer, Invoice, Delivered
* "Payment term": 1 week, 2 weeks, 30 days, 90 days
* "Status": New, Sent, Paid

"Products" table:

* "VAT": 0%, 7%, 19%, 20%
  {% endstep %}

{% step %}
**Check the options in the table**

In the table, click a choice field to show its options.

<figure><img src="/files/xys5ESA5MBA74ns164zt" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## Set up relationships <a href="#set-up-relationships" id="set-up-relationships"></a>

At this stage, you are ready to connect your tables so your app can work with related data.

In Ninox, you do not need to define key fields manually. Create **Reference (One‑to‑many)** fields and point them to the right target table.

Create these relationships:

* In "Invoice items", add an "Invoices" field that links to "Invoices".
* In "Invoice items", add a "Products" field that links to "Products".
* In "Invoices", add a "Customers" field that links to "Customers".

Invoices and products have a many-to-many (M to N) relationship. One invoice can contain many products, and one product can appear on many invoices.\
Ninox supports one-to-many (1 to N) relationships directly. To represent a many-to-many relationship, use an intermediate table. Here, that table is "Invoice items". Each invoice item links to one invoice and one product, and also stores details for that combination, such as quantity, unit price, and VAT rate.

This design lets you:

* Reuse products across many invoices.
* Keep invoice records stable, even if product details (name, price, VAT) change later.

Add these reference fields following these steps:

{% stepper %}
{% step %}
**Open "Invoice items"**

Navigate to the "Invoice items" table. Click **+ Add record** to open the record drawer.
{% endstep %}

{% step %}
**Open the relationships section**

Click the <i class="fa-gear">:gear:</i> gear icon in the top right to open the settings panel.\
Select the **Form** tab, then scroll down and open **Relationships**.

<figure><img src="/files/guGWXifbAkjYBrXDAFpR" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Add the relationship to "Invoices"**

Drag the **From-one relationship** field into the form view.\
In the **From-one-relationship** dialog, select the target table "Invoices".

<figure><img src="/files/rjMe2a4CyB6eGtG08BUl" alt=""><figcaption></figcaption></figure>

The reference field "Invoices" appears in the form view.
{% endstep %}

{% step %}
**Add the relationship to "Products"**

Drag another **From-one relationship** field into the form view.\
In the **From-one-relationship** dialog, select the target table "Products".\
The reference field "Products" appears in the form view.
{% endstep %}

{% step %}
**Open "Invoices"**

Navigate to the "Invoices" table.
{% endstep %}

{% step %}
**Add the relationship to "Customers"**

Open **Relationships** again in the **Form** tab.\
Drag the **From-one relationship** field into the form view.\
In the **From-one-relationship** dialog, select the target table "Customers".\
The reference field "Customers" appears in the form view.
{% endstep %}
{% endstepper %}

Now the tables are connected:

* Each **Invoice** is linked to one **Customer**.
* Each **Invoice item** is linked to one **Invoice** and one **Product**.

## Double check the data model <a href="#double-check-the-data-model" id="double-check-the-data-model"></a>

Now it’s a good time to review what you’ve built so far in the data model.

{% stepper %}
{% step %}
**Open the data model**

Select **Data model** in the **App navigation**.
{% endstep %}

{% step %}
**Check the tables and the relationships**

Confirm that you see these four tables:

* "Invoices"
* "Invoice items"
* "Products"
* "Customers"

Confirm that the lines between the tables match the relationships you created. The arrow always points to the table on the "one" side of a one-to-many relationship.

<figure><img src="/files/ik3D1Q4PsQ6Xe5yGy8GF" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# 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.ninox.com/getting-started/builder-getting-started/set-up-your-ninox-manually/your-first-app.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.