Auth0 Angular 10
Apex Designer Documentation
What's New
Getting Started
Business Objects
User Interfaces
App Behaviors
Project Settings
Patterns and Best Practices
App Showcase
Angular 10 Base Library
Frequently Asked Questions

Add Locations and Contacts

Add new business objects and relationships

Blank Profile Image
Written by David Knapp
Updated 2 years ago
3 min read

This is the second lesson in the Getting Started series. In this lesson, you will add Locations to Supplier, Contacts to Location, and interact with them through dynamically generated pages. You will also explore your app's API through API Explorer.

Working with an App Manager

App Managers automatically stop after two hours of inactivity. If you completed the first lesson more than two hours ago, you will see the Start App Manager icon button in the toolbar. Click it to restart your App Manager:

Start App Manager icon button

As your App Manager starts, messages will be displayed in the toolbar:

App Manager message in the toolbar

You can click the messages at any time to see the details of the build and run process:

App Manager Logs

You can open any of the Log entry expansion panels to view the details:

App Manager Log entry

Add Locations to Supplier

  1. Open the Supplier business object and enter "location" in the "Add a relationship..." field:
    Add relationship to a business object
    Notice that there are several types of relationships presented. You can learn more about relationship types in Business Object Relationships.
  2. Select "has many" to create the business object and relate it to Supplier. The Business Object Relationship dialog is opened with details of the relationship:
    Business Object Relationship dialog
    The dialog shows the relationship name from parent to child and from child to parent. It also shows what should happen when a Supplier is deleted.
  3. Click on "Location" to navigate to the Location business object:
    Location business object

Add Contacts to Location

  1. Enter "contact" in the "Add a relationship..." field, select the "has many" option, and click Contact to open the business object:
    Contact business object
  2. Click the "name" property and change "name" to "firstName":
    Business Object property firstName
  3. Enter "lastName" and press enter to add a lastName property of type string.

View the Business Object Diagram

    1. Click Business Objects on the ribbon and then click the Diagram button toggle on the top right:Business Object Diagram Button
  1. The business object diagram is displayed:
    Business Object Diagram
    The Access Token, App User, App User To Role, and Role business objects are from the Basic Auth Libraries. You can group business objects into views to show only business objects from your application.

Generate the App and Create Some Data

  1. Click the Generate App icon button to pick up the new business objects.
  2. When the build is complete, the Supplier page will reload:
    Supplier page
    Notice that there is now a Locations section with an Add button.
  3. Click the Add button, enter a location name, and click Add
    Add location dialog
    The app redirects to the location page.
  4. Click the "Import Contacts" icon button to open the Import Contacts dialog:
    Import Contacts dialog
  5. Click the Download Template button to download a spreadsheet and fill in some data:
    Contacts Data
  6. Select the data, copy it, paste it into the Import Contacts dialog:
    Import Contacts dialog
  7. The contacts are created:
    Contacts List in Supplier page
    Notice that the nav list only shows the first property (first name in this case) by default. The next lesson will cover how to change that.

Explore the API

  1. Open the App Manager dialog and click the Launch API Explorer icon button:
    API Explorer icon button
  2. API Explorer opens:
    API Explorer
    The API Explorer provides an interactive way to explore and exercise your app's API.
  3. Enter "Loca" in the "Filter by tag" field to show the APIs related to the Location business object:
    Filter in API Explorer
  4. Expand the "Get /api/Locations/{id}/contacts", enter 1 for the id, and click Execute:
    Execute Get api in API Explorer


You have created a set of related business objects, created and managed data through dynamically generated user interfaces, and explored the API through API Explorer. The next lesson will cover customizing the user interfaces. Click the next topic link below to continue.


Powered by Apex Designer
Terms of ServicePrivacy Policy
© 2017-2024 Apex Process Consultants