Get early access

Guide 01 · Web apps

Build your first app.

You will build a small orders page for Fernleaf Supply: a table that lists orders and a form that adds a new one. Then you save a version and publish it.

  • 6 steps
  • Web apps
  • Data console
On this page
  1. What you will build
  2. 1. Create an app
  3. 2. Add an Orders table
  4. 3. Drag a Table and bind it
  5. 4. Add a form that saves an order
  6. 5. Preview
  7. 6. Publish your page
  8. Next steps

What you will build

One page, two parts, two queries. The table reads the Orders table. The form adds a row, and an alert tells you it worked.

Fernleaf orders/Preview
Dev
Orders
All orders{{ queries.getOrders.data }}
ordercustomertotalstatus
#10483Rohit$189.00Paid
#10482Harshal$612.50Paid
#10481Charudatt$148.00Shipped
#10480Dipak$42.00Shipped
New order
Rohit
189.00
Save order
Order saved
    Fig. 1. The finished page: save an order, see the alert, see the new row.
    1Step 1 of 6

    Create an app

    From your workspace home, choose New application and name it Fernleaf orders. Leave Web & BI and Database ticked. A new app starts with one stage, called dev, so nothing you do here is public yet.

    Create application
    Fernleaf orders
    Web & BIDatabase
    CancelCreate application
    Fig. 2. Name the app and pick its areas. You build in dev.
    2Step 2 of 6

    Add an Orders table in the Schema builder

    Open the Data console, then Data, then the Schema builder. Choose New table, call it Orders and use Add column four times: an order number, the customer, the total and a status.

    Orders
    order_idinteger
    customertext
    totalnumeric
    statustext
    Fig. 3. The Orders table in the Schema builder, one column added at a time.
    3Step 3 of 6

    Drag a Table onto the page and bind it

    Back in the app, add a query named getOrders: a connection query on the NoCodeBI Database, with Action type Read on the Orders table. Then drag a Table from the component rail onto the page. In its Build settings, set Source to Query and pick getOrders as the Data source. The same rows are also available to any other part as an expression:

    Any part · expression
    {{ queries.getOrders.data }}
    Table
    Fig. 4. The Table is selected, and its Data source is the getOrders query.
    4Step 4 of 6

    Add a form that saves an order

    Drag a Form next to the table, drop two Input parts inside it, Customer and Total, and set its submit label to Save order. Add a second query, addOrder, on the same database with Action type Insert on Orders. Then give the form an event: when it is submitted, run the query, then show an alert.

    EventsForm · New order
    WhenNew orderissubmitted
    1. 1Run queryaddOrder
    2. 2Show alertOrder saved
    3. 3Run querygetOrdersoptional
    Fig. 5. One event, actions in order. A third action reads the orders again.
    5Step 5 of 6

    Preview

    Open the preview and try it as a visitor would. Fill in the form, press Save order, and check that the alert shows and the new row lands in the table. This is the page in Fig. 1.

    6Step 6 of 6

    Publish your page

    Save a version in the builder, then publish it to the dev stage and give it one more look. On Team and Enterprise, add a second stage with Create stage, such as Prod, and publish the same version there. If something goes wrong later, press Go back to on the version you want back.

    DevVersion 3published
    ProdVersion 3ready to publishPublish to Prod
    Version 2Go back toCompare
    Fig. 6. The same version moves from Dev to Prod. The one before stays ready to go back to.

    Next steps

    Your orders page works. Make it do more:

    Guide 02Connect a databaseBring the tables you already have into the Data console.Guide 03Your first workflowWhen an order is placed, check stock and email the customer.