Five Version 2.6: Learn More About Our Latest Release

ACS Masterclass: Build & Deploy a Full-Stack Web App

Avatar photo
Dominik Keller
Feb 12th, 2024
Blog

Hi and welcome to our step-by-step guide on building your first web app with Five. This guide was originally written for participants of the Australian Computer Society (ACS) Code-Along Masterclass but can be followed by anyone who would like to use Five to build a web app.

Here is the list of steps that we are taking in the development process.



Get Your App Online For AU$44.99 Per Month

Five lets you develop your application locally free of charge. Simply use our free download and develop your application until it is ready for your end-users.

To deploy your application, sign up for one of our paid plans, starting from AU$44.99 per month and application. Your plan includes unlimited end-users and provides you with a custom URL to access the application online.

To sign up, click here!


Resources and Downloads

CSV File

Download the CSV file here.

SQL Query

Download the SQL query here.

JavaScript Function

Download the JavaScript function here.

Theme

Download the CSS theme here.

Report Template

Download the report template or copy the HTML from here.

<!-- Paste this HTML into Five's Report Editor -->

<style>
    .demo tr {
      background-color: lightgrey
    }
        
</style>

<div><img src="data:image/png;base64,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" style=""></div>
<div><br></div>
<h1>Report</h1>
<table style="letter-spacing: 0.00938em; width: 100%; font-size: 1rem;" class="demo">
    <tbody>
        <tr style="border-bottom: 2px solid black;" class="fiveReportHeaderRepeat-Level1">
            <td style="width: 28.1305%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;">Name</td>

            <td style="width: 50.97%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;">SKU</td>

            <td style="width: 18.254%; text-align: left; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255);">Price</td>
        </tr>

        <tr class="fiveReportHelper" contenteditable="false">
            <td class="fiveReportHelper">{{#each @root.[Product].[Records] as | Product |}}</td>
            <td><br></td>
            <td><br></td>
        </tr>
        <tr class="" contenteditable="false">

            <td style="text-align: left;">{{Product.[Name]}}</td>

            <td style="text-align: left;">{{Product.[SKU]}}</td>

            <td style="text-align: left;">{{Product.[Price]}}</td>
        </tr>
        <tr class="fiveReportHelper" contenteditable="false">
            <td class="fiveReportHelper">{{/each}}</td>
            <td><br></td>
            <td><br></td>
        </tr>

    </tbody>
</table>
<div><br></div>

<div style="text-align: center;  display: flex; justify-content: center; align-items: center;">
    <div style="width: 150mm; height: 125mm; border: 1px dashed black; display: flex; justify-content: center; align-items: center;">   {{{_Chart 'ProductChart'}}}</div>
</div>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>

<table class="fiveReportFooter-everyPage" style="width: 100%; height: 10mm;">
    <tbody>
        <tr>
            <td style="text-align: right;"><span style="font-size: 12px;"><em>Page <five.pageNumber.current.arabic> of <five.pageNumber.total.arabic></em></span></td>

        </tr>
    </tbody>


</table>

Step 1: Creating a New Application

1.1. To create a new application in Five, click on Applications.

Image 1.1: Creating a New Application

1.2. Next, click on the yellow Plus icon.

Image 1.2: Creating a New Application in Five

1.3. Type My First App in the Title field.
1.4. Click on the Tick ✔️ icon to save.

Image 1.3: Saving a New Application


Step 2: Running Your Application ▶️

You can run and preview your application at any time. Click on the Run ▶️ icon in the top right corner. A new window opens up, showing the current state of your application.

Five.Co-Run-Your-Application
Image 2.1: Running Your Application


Step 3: Data > Table Wizard: Creating Database Tables

Let’s start developing our application.

3.1. Click on the blue Manage button.

Five.Co - Manage Your Application
Image 3.1: Access Five’s development environment by clicking on the blue Manage button.

3.2. To add tables to Five’s integrated MySQL database, click on Data > Table Wizard.

Image 3.2: Five’s Table Wizard can be accessed from Data > Table Wizard

We are creating three separate tables: Products, Orders, and ProductOrders.

The Product Table

3.3. Here is what your Product table should look like. Make sure to get the Data Type and Display Type for your fields right.
3.4. Click on the Tick ✔️ icon to save.

Image 3.3: Creating the Product Table

The Orders Table

3.5. Here is what your Orders table should look like.
3.6. Click on the Tick ✔️ icon to save.

Image 3.4: Creating the Orders Table

The ProductOrders Table

The ProductOrders table is a junction table between our Product and Orders table. It does not contain any fields. It only contains the Foreign Keys of the Product and Orders table.

3.7. To create this table, open up the Table Wizard.
3.8. Type ProductOrders into the Name field.
3.9. Click on the Right Arrow > as shown in this image:

Image 3.5: The ProductOrders Table

3.10. Click the Plus ➕ icon in the Relationships area at the lower part of the screen.
3.11. Add a relationship to the Product and Orders table and tick the Required box for both. Here is what this should look like.
3.12. Once the relationships are defined, click on the Tick ✔️ icon to save.

Image 3.6: Adding Relationships to the ProductOrders Table


Step 4: Data > The Database Modeler

4.1. To check whether your database is set up correctly, click on Data > Database Modeler
4.2. Here is what your database should look like:

Image 4.1: The Database Modeler showing the Orders, ProductOrders and Product tables


First Checkpoint: Is Your Database Setup Correctly?

Make sure your database looks exactly like the one shown in the database modeler. Our query and report, which will be developed later, refer to the field names shown above.



Step 5: Data > Tables: Importing a CSV

5.1. To import a CSV file into your database table, click on Data > Tables.
5.2. Now click on the Import CSV into Table 📥 button.

Five.Co - Data Import
Image 5.1: Five’s Import CSV into Table Feature

5.3. From the dropdown, select the Product table. This is the table we are importing data into.
5.4. Click on Choose File and select the CSV file.
5.5. For ProductKey select Generated. For all other fields, Five automatically maps the fields of your database to the columns of your CSV file.

Image 5.2: Mapping CSV Columns to Database Fields


Step 6: Visual > Form Wizard: Creating Forms

6.1. To create forms, click on Visual > Form Wizard.

Five.Co - Form Wizard
Image 6.1: The Form Wizard can be accessed from Visual > Form Wizard

Create the Product and Orders Form

6.2. In the Main Data Source field of the Form Wizard, select Product.
6.3. Click on the Tick ✔️ icon to save.
6.4. After saving your Product form, repeat the steps above for Orders and save again.

Image 6.2: Creating the Product form

Create the ProductOrders Form

6.5. In the Main Data Source field of the Form Wizard, select ProductOrders.
6.6. Toggle the Add Menu Item to off.
6.7. Click on the Right Arrow > as shown here:

Image 6.3: Click on the > arrow to further define your ProductOrders form

6.8. Tick the Boxes ☑️ for List for both fields: ProductKey and OrdersKey.
6.9. Click on the Tick ✔️ icon to save.

Image 6.4: The settings for the ProductOrders form


Step 7: Visual > Forms: Adding a Page to a Form

7.1. Click on Visual > Forms
7.2. Select the Orders form from the list on the left.
7.3. Click on Pages.
7.4. Click on the Plus ➕ icon.

Image 7.1: To add a page to the Orders Form click on the Plus icon

7.5. Change the Page Type to List.
7.6. Type Products in the Caption field.
7.7. Click on the Tick ✔️ icon to save. Here is what your screen should look like before saving:

Image 7.2: Select List as page type, and fill in the fields as shown.


Second Checkpoint: Run Your Application

It’s time to run your application for the first time. As shown in Step 2 above, you can always preview your application by clicking on the Run ▶️ icon in the top right corner.

Here’s what your app should look like:


Go ahead and get familiar with Five’s auto-generated user interface (GUI). Check out the filter and search bar above your products, for example.



Step 8.A.: Using Five’s End-User GUI

For Step 8A, we will keep working inside our end-user application, i.e. on the screen shown in the image above. We will add a few orders to our database to better understand Five’s end-user GUI.

8A.1. Click on Orders in the menu on the left.
8A.2. Now click on the Plus ➕ icon. and add some dummy data to your database.
8A.3. Fill in some dummy data for your Order Status and Order Date.
8A.4. Click on Products. This is the page that we added to our Orders form earlier.

Image 8.1: Adding Dummy Data through Five’s End-User GUI

8A.5. Add a few products to your order. This is just dummy data, so feel free to associate any products with your order.
8A.6. Repeat these steps until you have several orders stored in your database. As shown in Image 8.1, your orders will appear in a list. In Image 8.1, this list contains a New, Pending, Pending and Shipped order.



Step 8.B.: Data > Queries: Write SQL In Five

Now let’s create a SQL query in Five. We will write a query that returns some of the data you have just created in Step 8.A.

8.1. To add a query, click on Data > Queries.
8.2. Click on the yellow Plus icon.
8.3. Type ProductQuery into the Data Source ID field.
8.4. Click on Click to edit in the Query field, as shown here:

Image 8.1: Click on Click to edit to open up Five’s Query Editor

8.5. Click on SQL.
8.6. Paste the SQL shown below Image 8.2. into the SQL Editor. Make sure to have some orders in your Orders table. Otherwise the query will not produce any results!

Image 8.2: Click on SQL to paste raw SQL into Five’s Query Editor and then save.

SELECT
  `Product`.`Name`,
  `Product`.`Price`,
  `Orders`.`OrderDate`
FROM
  `Product`
  INNER JOIN `ProductOrders` ON (
    `ProductOrders`.`ProductKey` = `Product`.`ProductKey`
  )
  INNER JOIN `Orders` ON (
    `ProductOrders`.`OrdersKey` = `Orders`.`OrdersKey`
  )

8.7. Click on the Tick ✔️ icon to save your query.
8.8. Click on the Tick ✔️ icon to save your query as a data source.



Step 9: Visual > Chart Wizard: Create Charts For Your Application

9.1. To create a chart, click on Visual > Chart Wizard.
9.2. Fill in all fields on the left of the screen that are marked with an asterisk *, and choose your X Value Column and Y Value Column, as shown in the image below.

Image 9.1: Five’s Chart Wizard: Apply the settings shown to create a bar chart showing products and prices.


Step 10: Visual > Reports: Creating a PDF Report

10.1. To create a report, click on Visual > Reports
10.2. Click on the yellow Plus icon.
10.3. Type Product Report into the Title field.
10.4. Click on Data Sources.

Image 10.1: Before a report can be created, it needs to have a title and a data source first.

10.5. Click on the Plus ➕ icon to add a data source.
10.6. Select Product (Table) as a Data Source.
10.7. Click on the Tick ✔️ icon to save.

Image 10.2: Add Product (Table) as a data source to your report.

10.8. Go back to General.
10.9. Click on the Template field that says Click to edit. This opens up Five’s report template editor.
10.10. Click on the </> icon.

Image 10.3: Click on </> to open up Five’s HTML report writer.

10.11. Paste the HTML into the code editor.

<style>
    .demo tr {
      background-color: lightgrey
    }
        
</style>

<div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKMAAAAtCAYAAADC1tsoAAAABmJLR0QA/wD/AP+gvaeTAAAHlklEQVR42u2cbWxTVRjHLxvv8hJQM1HRgdB2dLyE3rYMQizQtRs4hA8V1iIqiQu+EBK/EAHZ5YOsiwtRfIkjSIIGWW9AhX2g3YAFPhiNiy8gbEMmuHUImYKArN0YOz6nux13d/d2ve29t3M7/+SfLO2559777JfnnOeck1LUABCiqLQWs7kgaKUrKCIiMeWX/vak2hAGLSZXk4W+0GyhEfgnEnUiUTm89d/keutrwZudu89PVqrf80bjyKCFXt9sMV3kIIz6NIk6kahySxvKAETEOZRbWs/aSy7aKYSGJdpnk9X8SrOZbhFAyNlUSaJOJA5jSf1GHox8N8B3W5a9ey5Dbp8AXak4iNjmgyTqRKLCWVACxqg7Hd66agDTZWNqhscFI01bpGAMWsyfkKgTiSqvpC6zHxj5boFh3AsAT++naBkG4F2RyIxeEnUiUTEMSgPIwjKAxL6Ps6Xd27A+Z3fzGNF5o4XeLQYjfL6NRJ1Iet7ora+TCSPfN+2lDeVOb8Ncfp8tNL1IYqh+k0ScKMa8saEyCRj5rnWU1BXZmPPj8PqiWEWNl3tIxIkktbTswtMAkUkpL9tVp4sUMmb6o77DtGkViTiRbKGt2RnJXB+0mpb0zYzzl5LIEskD8R1DDtqhW51UHy5XOlTP1/kw/mGdbyLRJZKREbOmoGJ9I2JmTEi2Lxiqy3tlR6t1psKPi3eK1oK3aODHBPd+ClzEs5RywKNS+C/FMVoS4/s08ErBu6hlGSAymaMBxO9RsU6Rbbsmq8nBh/F3qzVD4UDjF0QaWZjVCwTfi8kGDoFPgCekAMSR4APc870u0aZMwxjKgLFY/xkYIUa/QZEsa7MNBwhbe4DMyRmjcLDLBzCMc8C3eN+f5bKpVpoEPsW7/32wS6TdDwMORsTo3uJA7ERvz3hUqYgEzfR+DsYOFQLOh/EfcK2KzpIJ43jwcUGbP8G0BiBOA18Q3PsqeLZI21pemxvgRhUdF4h2APEeB+MpJaMC5xlXcDC2qgzjMY2HwHiGabyfv1fQ7l/w8yo+lxl8TXDPWFmZDyOT2oKFMWQChK0RELF3GDYp2X+tyTQCquobAGPjEIQxWkDgf3IXr20nVxQpLbyOe1fwXFX9zFcHBoyIMY4DAM89AFHfhbY9M1Xp+zRb6S9UOuX9f4AxqpfA7YJryrnsqYQ2c/NCfv/7wCP6yxcphxGfroEhme0BMTJEG75T415450XqlHeH3zhXIRjPcEWGWh6bJIxYeNH/puA6f5KVdjp4j6DPLhlg8WH8ADxdRUtVzoadvUDszoxqDB3UZZtttPBgLao2TQwFjIfCAWNXyG98dRBW01Iygq8Irv0FnMiI9BD4qKCvMLhQzkwqpdU0FCyrIkOyEMbter1ambhpAb0y+ndbddYCgLARjDh3tvuN7iECI8UtoAuXVFrA85Ps4y/wYrnT+pTBiLbPzALwbvUBkdGfVXVaAGuOiHWlA3RbAL4OHogPgAxkrxkiMEaz2jFBH3fAzyWYXS+BdYnUmCmBEQqWyQDdpT4gRmzYqSaMbYHsqeFA9mkRCPnGkBYkCONJlec7oxSGMTrf+1DQD66034hxzTKReee34ETXhrWaM2Y+ANFFpQN0x8VBxJlx5rwVB92TsJUGsb0qezXMD//uB8So28OBWfmDsJqWWwljMNIE7V7GNZ+gHQtOZmdL+2oaMuL7kiAW6y9H2+X5PHuch9YtVuSelaaxANfeOCHku7nt5NwnhhCMWPiUVJugz6+4Kj66VoniAHZgwwjHwV6MASL2e9G2ziPrpjh97tY8n5txwRwv4Wzon2UEqM7GCd89cG24yugN+7PsqMY2fIhlxqgWglsF/eLlti8Fn+HsuEGhe2oHI2KyFkBWDMeEkTEs5F/j9Hk2ApDIyRbW5B/xyPoJFISoYQBWEfhuDPju94Yvc/QQWPSOV3h+VRejCLgNzlfwfnwYr1Jq7u/DMs6OyLEwRt8mDqL+KmIEqR6Agsx4MgKkz30zr8LtiuetbtfoHgHIjkkAiJdyyturZrlunzA8rFAgByOMWPinZk6LgBgEz1P4XtpX05EChtFNh73nAsiEDD6zCDBeB38s9oTLK9boAMQQByRyVrg/L6gsGiv1RlCgLAXYgj3w+Y2tUD2zOEuGAnOmqQTEYIWR4qr3g7z+fwar8UNdB6iBcoQMbZoheQoZINzaA2M3kL8uZz29jiHh+V0okM0AdHcAvmq8jtgRmG3qk23VEV77c3FepDGMGRyQUashXLjg3ZSNVN/tSKU0nqvmvSp7V1JPaQPQnKz7Rz6QDp+7DT7b3D0fpdLwumCoavaziDWOpIiI1FQu654HEN7rlSG7fViNNUkiophy+grLRGDEw/aVXJ9nEYkQkXYzdShcAL5LokBC1sRrkqA0EikijbKjewm4SwJIhJeCcg+tfZxEikgrIPdLwcj52sqjG8aTSBGpLjvrmgjAtUjD6PGRKBFpWcy8IAFjp+NwoYFEiEjr4fprIYwOn+dTEhkizYULFbxnzV8Il3uggohIMTlY92s9lXSFp4REhChlwuuKcMTsTCRDsq7JJCJEKVUeu04f3acmIupP/wHYJhviTK/+pwAAAABJRU5ErkJggg==" style=""></div>
<div><br></div>
<h1>Report</h1>
<table style="letter-spacing: 0.00938em; width: 100%; font-size: 1rem;" class="demo">
    <tbody>
        <tr style="border-bottom: 2px solid black;" class="fiveReportHeaderRepeat-Level1">
            <td style="width: 28.1305%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;">Name</td>

            <td style="width: 50.97%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;">SKU</td>

            <td style="width: 18.254%; text-align: left; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255);">Price</td>
        </tr>

        <tr class="fiveReportHelper" contenteditable="false">
            <td class="fiveReportHelper">{{#each @root.[Product].[Records] as | Product |}}</td>
            <td><br></td>
            <td><br></td>
        </tr>
        <tr class="" contenteditable="false">

            <td style="text-align: left;">{{Product.[Name]}}</td>

            <td style="text-align: left;">{{Product.[SKU]}}</td>

            <td style="text-align: left;">{{Product.[Price]}}</td>
        </tr>
        <tr class="fiveReportHelper" contenteditable="false">
            <td class="fiveReportHelper">{{/each}}</td>
            <td><br></td>
            <td><br></td>
        </tr>

    </tbody>
</table>
<div><br></div>

<div style="text-align: center;  display: flex; justify-content: center; align-items: center;">
    <div style="width: 150mm; height: 125mm; border: 1px dashed black; display: flex; justify-content: center; align-items: center;">   {{{_Chart 'ProductChart'}}}</div>
</div>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>

<table class="fiveReportFooter-everyPage" style="width: 100%; height: 10mm;">
    <tbody>
        <tr>
            <td style="text-align: right;"><span style="font-size: 12px;"><em>Page <five.pageNumber.current.arabic> of <five.pageNumber.total.arabic></em></span></td>

        </tr>
    </tbody>


</table>

10.12. Click on the Tick ✔️ icon to save your HTML.
10.13. Click on the Tick ✔️ icon to save your report.



Step 11: Visual > Menus: Adding Menu Items to Your App

11.1. Go to Visual > Menus.
11.2. Click on the yellow Plus icon.
11.3. We will first create a parent menu called Charts & Reports.
11.4. Type Charts & Reports into Caption.
11.5. Type 3 into Menu Order.
11.6. Click on the Tick ✔️ icon to save your menu.

Image 11.1: Creating the Charts & Reports Menu Item

Next, we create menu items for our chart and report.
11.7. Click on the yellow Plus icon.
11.8. Here are the settings for your Chart menu. Make sure to fill in Caption, Action, and Parent Menu as shown.
11.9. Click on the Tick ✔️ icon to save your menu.

Image 11.2: Creating the Chart Menu Item Holding Our ProductChart as an Action

11.10. Here are the menu settings for your Report menu. Make sure to fill in Caption, Action, and Parent Menu as shown.
11.11. Click on the Tick ✔️ icon to save your menu.

Image 11.3: Creating the Report Menu Item Holding Our ProductReport as an Action


Third Checkpoint: Here’s What Your App Should Now Look Like

Run your app to make sure that your forms, charts, and reports are working. Here’s what your app should look like when clicking on Chart in the menu on the left. Also, test your report – you should be able to see a PDF document in your application.



Step 12: Logic > Code Editor: Writing a JavaScript Function In Five

12.1. Click on Logic > Code Editor.
12.2. Click on the Plus ➕ icon.

Image 12.1: To add a function to Five, click on the Plus button in the Code Editor

12.3. Type Slack into the Function ID field.
12.4. Leave JavaScript selected as Language.
12.5. Click on Okay.
12.6. Paste the JavaScript function below into the code editor.

function Slack(five, context, result) {
  const client = five.httpClient();
  const form = context.Transactions[0].Values;
  five.log(JSON.stringify(form));
  client.setContentType("application/json");
  client.setContent(`{
        "text": "A Customer has made an order, \n Date: ${form.OrderDate} \n Status ${form.OrderStatus}"
    }`);

  try {
    // Slack Webhook⬇️
    const httpResult = client.post(
      "https://hooks.slack.com/services/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"
    );

    if (httpResult.isOk() === false) {
      return five.createError(httpResult);
    }
  } catch (err) {
    five.log(err);
  }
  return five.success(result);
}

12.7. Click on the Tick ✔️ icon to save your function.



Step 13: Visual > Forms: Attaching A Function to An Event

13.1. Click on Visual > Forms.
13.2. Select your Orders form.
13.3. Click on Events.
13.4. Select the Slack function for your DoComplete event.
13.5. Click on the Tick ✔️ icon to save.

Image 13.1. To attach our Slack function to an event, we go to Events and select the function in the DoComplete event.


Step 14: Applications: Turning Your App Into a Multiuser App

14.1. Click on Applications (My First App) in the top navigation bar of Five.
14.2. Activate the Multiuser switch to add a login screen and user management to your application.
14.3. Click on the Tick ✔️ icon to save.

Image 14.1: Activate Multiuser to add a login screen to your application.


Fourth Checkpoint: Logging Into Your Application For The First Time

Use user name admin and password admin to log in to your application!



Step 15: Setup > User Roles: Creating Roles And Permissions

15.1. To create user roles and assign permissions, click on Setup > Roles.
15.2. Click on the yellow Plus icon.
15.3. Type Manager into the Name field, select ChartsReports (Charts & Reports) as the Menu, and give full Create, Read, Update and Delete permissions for the Default Query Permissions as shown below.
15.4. Click on the Tick ✔️ icon to save.

Image 15.1: Setting up the Manager user role.


Step 16: Setup > Themes: Give Your Application a Unique Look

16.1. To create a theme, go to Setup > Themes.
16.2. Click on the yellow Plus icon.
16.3. Type MyTheme into the Name field.
16.4. Click on Click to edit theme to open up Five’s theme editor.

Image 16.1: Five’s Theme Editor lets you define a theme in point-and-click.

16.5. Click on Advanced at the top of theme editor.
16.6. Go to https://five.co/themes and download your favourite theme: copy the code and paste it into the Advanced theme editor, replacing all existing code.
16.7. Click on the Tick ✔️ icon to save your code.
16.8. Click on the Tick ✔️ icon again to also save your theme.



Step 17: Setup > Instances: Applying a Theme, Logos and Customizing the UI

17.1 To apply a theme. go to Setup > Instances
17.2 Select the default instance
17.3 Click on Theme and select MyTheme from the dropdown
17.4 Click on The ✏️Icon on Logo and Select an image/SVG as your logo
17.5 Click on User Interface and Select between Boston or New York

Image 17.1: Setting up Themes, Logos and UI

Start developing your first application!

Get Started For Free Today

Sign Up Free Book a demo
Develop your first application with Five now. Start Free

Thank you for your message!

Our friendly staff will contact you shortly.

CLOSE