Apex Designer Documentation
What's New
Getting Started
Projects
Business Objects
Processes
User Interfaces
App Behaviors
Files
Dependencies
Project Settings
Libraries
Patterns and Best Practices
App Showcase

User Interface Dependencies

Make business objects, npm packages and other cool stuff available to your user interface

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

As your user interfaces get fancier, you may need dependencies to make additional capabilities available. This page shows the most common examples.

Business Objects

When you create a user interface property, Apex Designer automatically adds the business object as a dependency as part of generating the code. If you reference a business object that is not a property (as shown in Managing Data In A Business Object Behavior), you will need to add a dependency:

Dependencies dropdown

NPM Packages

If you use an npm package like Day.js (our favorite date / time manipulation package), you will need to add it as a dependency. First, be sure that you had added the package to the project as described in Dependencies. Then simply start typing its name. If it has already been configured in a project you can click the name to add it already configured:

dayjs dependency

If it has not been used yet, you well see Add Dependency "dayjs". Click that and you will see a warning icon like this:

Dependency warning

Click on the dependency to open the configuration dialog. This particulate dependency needs to be configured as shown here:

Dependency configuration dialog

Here are the technical details:

  • "* as dayjs" brings in the package with the alias "dayjs"
  • Imported From "dayjs" is the name of the npm package
  • "Do not pass it to the constructor" is because this is not "injected" by Angular

If you are not sure how to configure a specific npm package, just click the "Ask a Question" button and we will give you a hand.

After you have done this, you can do this in your user interface method:

let expiration = dayjs().add(7, 'day').format('YYYY-MM-DD);

Angular Classes

If you need to reference an Angular class, you will need to add a dependency. ElementRef is an example that gives you access to the DOM element for the component. To add the class, type the name of the class and it should appear:

Dependency dropdown

If it has not been used, finish typing the name to add it and then click it to configure it like this:

Dependency configuration

Here are the technical details:

  • Name is the class name
  • Imported From is the npm package name
  • Alias tells how you can reference it
  • Pass elementRef to the constructor as private means that Angular will inject it into your component

If you have trouble configuring a dependency, just click "Ask a Question" and we will give you a hand.

After adding this dependency, you can do this:

this.elementRef.nativeElement.querySelector('.my-button').click();

Angular Services

You can think of an Angular Service as a piece of user interface logic that is shared across the entire application. A common example is the auth service which gives you access to current user information. Angular services are advanced topics and you can read more about it in Creating An Angular Utility Service.

Using an Angular service is easy. Try adding the auth service by typing "auth" in the "Add a dependency..." field. If it does not show up for you, add it and configure it as shown here:

Dependency configuration

Here are the technical highlights:

  • AuthService is the class name for the service
  • Imported From gives the path from this user interface to the file containing the service
  • Alias indicates that you can reference it with "authService"
  • Pass authService to the constructor as public indicates that it will be available in both methods (private) and the template (public)

After you have added that, you can have a login button do this:

Button component

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