Before You Begin

This 10-minute tutorial shows you how to create navigation buttons in a web application and how to add data to the web application in Visual Builder Studio.

Background

With your changes committed to a remote branch, you'll now create buttons that help users navigate between the Departments page and the Employees page in the web application. Each button is associated with an event that sets off a series of actions when you click it. In VB Studio, this sequence of actions is called an action chain. You can use and customize predefined actions, or define your own.

You'll also populate your business objects by importing data from a file. You did this for the Location business object in the second tutorial, and you'll do the same for the Department and Employee business objects here.

What Do You Need?

• Access to VB Studio
• A supported browser
• Completion of the previous tutorials

Create an Action Chain to Navigate from the Departments Page to the Employees Page

1. Click Workspaces, then click HR Visual Application in the Workspaces table.
2. Click Web Applications , then main-departments under the hrwebapp, Flows, and main nodes.
3. In the Page Designer, click Components to open the Components palette. Then, drag a Button from the Common components to the Toolbar, to the right of the Create Department button on the main-departments page.

   

4. If necessary, click Properties. Then in the General tab of the properties pane, change the Text field to Display Employees.
5. Select the button (if necessary) and click the Events tab, then click the + New Event button. From the menu, select Quick Start: 'ojAction', the default action for a button click.

   

   An action chain with the ID ButtonActionChain is created. It contains only the Start action.

6. From the Navigation section of the Actions palette, drag the Navigate action to the + sign pointed to by the Start action.
7. In the Navigate action's properties, select main-employees from the Target list.
   

   

   The action now has the label Navigate main-employees.

8. Click Preview in the header to see how the pages will appear to the user. The application opens in another browser tab.
9. Click Create Department and add another department (IT on Floor 2, for example), then click Save. A success message is displayed briefly.
10. Click Display Employees, then click Create Employee. Add another employee, specifying the new department, and click Save. You'll notice there's no way to get back to the main-departments page from the main-employees page. Close the browser tab.

Create an Action Chain to Navigate from the Employees Page to the Departments Page

1. In the Web Apps pane, click main-employees under the hrwebapp, Flows, and main nodes. If necessary, click Reload page to display the new employee you created.
2. In the Components palette, drag a Button component to the Toolbar, to the right of the Create Employee button.
3. In the button's properties pane, change the Text field to Display Departments.
4. Select the button (if necessary) and click the Events tab, then click + New Event and select Quick Start: 'ojAction'.

   Another empty action chain with the ID ButtonActionChain is created. Because this action chain is for a different page, it doesn't matter that it has the same name as the one for the main-departments page.

5. Drag the Navigate action from the Navigation section to the + sign pointed to by the Start action.
6. In the properties pane, select main-departments from the Target list.

   The action now has the label Navigate main-departments.

7. Click Preview to test the pages and navigation. The application opens in another browser tab. Make sure you can get to the Departments page from the Employees page. Close the browser tab.
8. Click main, then Page Flow to view the application's modified page flow. You can now navigate between the main-departments and main-employees pages.

   

Import Data for the Business Objects

Let's now add data for the Department and Employee business objects. Instead of using the Data Manager to import data, this time you'll use each business object's Data tab to do the same thing.

1. Click this link and save the Department.csv file to your file system. The file contains six departments for the application.
2. Click this link and save the Employee.csv file to your file system. The file contains nine employees for the application.
3. In the navigator, click Business Objects , then Objects. The business objects you created are displayed.
4. Click Department, then Data.
5. Click Import from File .
6. In the Import Data dialog box, select the Replace option if it's not already selected. Then click the upload box, browse to select the Department.csv file, and click Import.

   

   Click Close after the file has been successfully imported. Six departments are displayed in the table.

   

7. Click Employee under Business Objects, then click Data.
8. Click Import from File .
9. In the Import Data dialog box, select the Replace option if it's not already selected. Then click the upload box, browse to select the Employee.csv file, and click Import.

   Click Close after the file has been successfully imported. Nine employees are displayed in the table.