Tutorial 3: Navigate Through Screens

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 New App on right top of the page.
  3. Click Blank New App card listed under New App section.
  4. Fill in the fields inside New App dialog box:
  • Enter Employee Data inside New App Name
  • (Optional) Enter a description inside App Description.
  • Click Start!.

Create the first screen

  1. Click   to create a screen.
  2. On New Screen panel write Enter Employee Information in Screen Name field and click Save.

Drop a Domain Entity and Set Expressions

  1. On the left of the page, you can see 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, in Entity Variables list, click on EmployeeNumber _label.
  4. Under the menu bar on the top, you can see Expression Editor. Set expression
        EmployeeNumber_label = “Employee Number”
  1. Click   on Expression Editor to save the expression.

Add Buttons to the screen

Add Button that saves the new Employee record:               

  1. Click on Widget Toolbox in 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, open Button Settings panel by clicking    and rename your Button to Save. Click Save.
  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 option in Variables To Commit.

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

  1. Click Bind Event.
  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 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, open Button Settings panel by clicking   and rename your Button to Exit. Click Save.
  4. From Events sub panel, click Exit_Click on Display Item Properties Panel.
  5. Check This Event Closes Screen and This Event Closes App options in Actions.
  6. Click Bind Event.
  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 Ok.

Drop a Domain Entity and Set Expressions

  1. On the left of the page, you can see 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 Grid.
  • 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.
  3. Under the menu bar on the top, you can see Expression Editor. To bind Employee data to the Grid, set expression
         Employee_in = #Employee     

Now your grid 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 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, open Button Settings panel by clicking    and rename your Button to Close. Click Save.
  4. From Events sub panel, click Close_Click on Display Item Properties Panel.
  5. Check This Event Closes Screen option in Actions.
  6. Click Bind Event. 

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, on screens menu, click Enter Employee Information.
  2. Click on Widget Toolbox in 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, open Button Settings panel by clicking   and rename your Button to Show All Employees. Click Save.
  5. From Events sub panel, click Show All Employees_Click on Display Item Properties Panel.
  6. Check This Event Loads the Desired Screen option in Actions.
  7. On Bound Screen menu, select All Employees.
  8. Click Bind Event. 

Now Show All Employees button provides navigation from Enter Employee Information 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.

Your application is ready to deploy!

Deploy your application

  1. Log in to the Management Console Management.
  2. Switch to your domain Domain via menu at the top right of the page.
  3. On Apps, find Employee Data app and click QA Approve.
  4. Click Deploy.
  5. Then click Release (Activate).

Your app is now in use. You can run it from Shell environment right away!

Run your application

  1. Log in to Shell.
  2. On top-left corner, click   .
  3. Click Select Domain.
  4. Click Domain
  5. Click Default Menu
  6. On Apps, click Employee Data.

Your app is running!

  1. Fill in Name, Last Name and Employee Number fields as you like.
  2. To save the new Employee record in database, click Save.
  3. 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.

  1. To turn back to Enter Employee Information screen, click Close.
  2. 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.