Notes: In this tutorial, Domain indicates the domain that you are working in.

What you will build

In this tutorial, you will learn;

  • How to enter a new record to an entity table
  • How to navigate from one screen to another
  • How to list all records of an entity table

Create your app

  1. Open the design platform Designer, and log in.
  2. Click Apps on top menu to navigate to apps page.
  3. Click  on left top of the page. A pop-up page will be open for you to fill in.
  4. Fill in the fields inside New App dialog box:
    • Enter Employee Data inside Type your app’s name here field.
    • (Optional) Enter a description inside Your app’s Description.
    • Click Create.

This will create your application including 5 pre created canvas pages.
Click OpeningPage (Starting Screen) in order to start.This will open a predesigned canvas.

Drop a Domain Entity and Set Expressions

  1. On the left side of the page, you can see Display Items (Screen Design Toolbox). Click on Domain Entities. Drag and drop Employee to Screen Design Canvas at the center of the page.
  2. On the dialog box opened;
  • Set Action to Input.
  • Set Renderer to Field:Value Pair.
  • Check Name, LastName and EmployeeNumber
  • Click Submit.
  1. Click LastName inside the canvas. Display Item Properties panel opens on the right side of the page.
  2. On Display Item Properties panel, in Entity Variables list, click on LastName_label.

To make variable names on canvas more readable, let’s add space between words: (step 5-10)

  1. Under the menu bar on the top, you can see Expression Editor. Set expression
          LastName_label = “Last Name”
  1. Click   on Expression Editor to save the expression.
  2. Click EmployeeNumber inside the canvas. Display Item Properties panel opens on the right side of the page.
  3. On Display Item Properties panel, change EmployeeNumber to Employee Number and click  to save it.

Add Buttons to the screen

Add Button that saves the new Employee record:               

  1. Click on Widget Toolbox in Display Items (Screen Design Toolbox) on the left of the page. Drag and drop Button to the canvas.
  2. Click Button inside the canvas.
  3. On Display Item Properties Panel, rename your Button to Save. Click to save it.
  4. From Events sub panel, click Save_Click on Display Item Properties Panel.
  5. To enable Save button to save the Employee record in the corresponding database table, check Employee_out option in Variables To Save.

This button will solely save the new Employee record to the database.

  1. Click Save Changes.
  2. From Stylings sub panel, select button:Background Color and click Add.
  3. Pick green color from the color picker (or whichever color you would like).

  Add Button that exits the app

  1. Click on Widget Toolbox in Display Items (Screen Design Toolbox) on the left side of the page. Drag and drop Button to the canvas.
  2. Click Button inside the canvas.
  3. On Display Item Properties Panel, rename your Button to Exit. Click  to save it.
  4. From Events sub panel, click Exit_Click on Display Item Properties Panel.
  5. Check Go Back and Exit App options in Actions.
  6. Click Save Changes.
  7. From Stylings sub panel, select button:Background Color and click Add.
  8. Pick red color from the color picker (or whichever color you would like).

Before adding a button that navigates to another screen, let’s create the second screen.

Create the second screen

  1. Click Screens tab on the top right of the page.
  2. Click  to create a screen.
  3. On New Screen panel write All Employees in Screen Name field and click Create.

Drop a Domain Entity and Set Expressions

  1. On the left of the page, you can see Display Items (Screen Design Toolbox). Click on Domain Entities.
  2. Drag and drop Employee to Screen Design Canvas at the center of the page.
  3. On the dialog box opened;
  • Set Action to Display.
  • Set Renderer to Cards.
  • Check Name, LastName and EmployeeNumber.
  • Set Renderer to Value for Name, LastName and EmployeeNumber.
  • Click Submit.
  1. Click Employee inside the canvas. Display Item Properties panel opens on the right side of the page.
  2. On Display Item Properties panel, in Entity Variables list, click on Employee_in.
  3. Under the menu bar on the top, you can see Expression Editor. To bind Employee data to the Cards, set expression
         Employee_in = #Employee     

Now your page is set to display all employees in the database.

  1. Click  on Expression Editor to save the expression.
  2. Click Employee inside the canvas. Display Item Properties panel opens on the right side of the page.
  3. On Display Item Properties panel, in Entity Variables list, click on Employee_label.
  4. Under the menu bar on the top, you can see Expression Editor. Set expression
     Employee_label = “Employees”
  1. Click on Expression Editor to save the expression.

Add a Button to the screen

  1. Click on Widget Toolbox in Display Items (Screen Design Toolbox) on the left side of the page. Drag and drop Button to the canvas.
  2. Click Button inside the canvas.
  3. On Display Item Properties Panel, rename your Button to Close. Click to save it.
  4. From Events sub panel, click Close_Click on Display Item Properties Panel.
  5. Check Go Back option in Actions.
  6. Click Save Changes. 

Now that the second screen design is ready, we can navigate from Enter Employee Information screen to All Employees screen:

Add Navigation Button

  1. On the bottom of the page, you will see screen navigation links side by side, click OpeningPage.
  2. Click on Widget Toolbox in Display Items (Screen Design Toolbox) on the left of the page. Drag and drop Button to the canvas.
  3. Click Button inside the canvas.
  4. On Display Item Properties Panel, rename your Button to Show All Employees. Click  to save it.
  5. From Events sub panel, click Show All Employees_Click on Display Item Properties Panel.
  6. Check Go To option in Actions.
  7. On Bound Screen menu, select All Employees.
  8. Click Save Changes. 

Now Show All Employees button provides navigation from Opening Page Employee screen to All Employees screen.

Your application design is complete! It’s time to generate the app.

Generate your application

  1. Click Menu > Publish in the top-right corner of the page.

Your application is generated and deployed!

Run your application

  1. Click Menu > Preview on the top-right of the page. Your app is running!
  2. Fill in Name, Last Name and Employee Number fields as you like.
  3. To save the new Employee record in database, click Save.
  4. To see records of all employees, click Show All Employees. On the table, you can see all Employee records including the one that you just entered.
  5. To turn back to Enter Employee Information screen, click Close.
  6. To exit the app, click Exit.

Congratulations! You created an app that enters a new record to a domain entity table, and displayed the most recent state of that domain entity table.