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
Frequently Asked Questions

User Interface Styles

How to style components in a user interface

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

Apex Designer and Angular Material do a pretty good job for most cases, but if needed, you can style the components in a user interface.

Class

You can add a class to any component to add style to it. For example if you have an add supplier button that you need to position at the bottom right corner of the Suppliers page, you can add a class to the button and then add styles to that class by clicking on style 

Styles button location on the user interface page

In the Styles dialog, define the class like this:

Sample Style configuration dialog

At runtime, the add button will now be positioned at the bottom right corner of the page:

Application page with updated style

Conditional Class

If you need to apply a class based on a condition, you can use ngClass directive. For example, if you need to show the inactive suppliers in a different font, you can use ngClass like this:

User Interface component with a conditional style applied

You can then add inactive class in the Styles dialog:

.inactive {
	color: gray;
	font-style: italic;
}

At run-time, it will look like this:

Sample application page with conditional styles applied

You can also have an if-else condition for ngClass like this:

This will apply the left-image class if the boolean variable imageOnLeft is true, and the right-image class if it is false.

 

Styles can also be applied at the Project level. See Styles for more details.

 

 

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