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

External Components

Working with and creating external components

Blank Profile Image
Written by Ashish Gupta
Updated 5 months ago
Less than a minute read

The basic elements that you use to create a user interface are defined as user interface components of type "External Component":

External Component configuration dialog

All of the HTML and Angular Material elements are already defined in the libraries that come with Apex Designer. But if you use an NPM package with new elements, you can manually create those elements as External Components.

Simple External Component - Paragraph

A paragraph element is part of the HTML library:

Simple paragraph external component definition

Paragraph's tag is set in the HTML Selector under settings. It can optionally contain properties, which show up under the external component when it is inserted in a user interface. In the user interface, you can still use a property that is supported by that external component but not defined in it. For example, you can add a "class" attribute to a paragraph even though it is not defined in the Paragraph External Component.

Complex External Component - Accordion

Accordion is an Angular Material element used as a container for multiple Expansion Panels - another Angular Material element. Accordion is defined in the Angular Material Library:

Complex external component definition

Accordion comes with a unique set of properties that were added with a description to help a user understand their purpose and/or usage. For example, "multi" property has a brief description about how the property can be used to control Accordion's behavior:

external component property configuration

Accordion API reference on the Angular Material site shows that you need to import MatExpansionModule for it:

Angular material reference page used for parameter understanding

You can add MatExpansionModule as a dependency on the Accordion (see above the Accordion page screenshot). You can then click on the dependency to add its import path:

User interface dependency configuration for external components

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