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

Authoring Rules

Define authoring rules

Blank Profile Image
Written by Ashish Gupta
Updated 21 days ago
6 min read

You can define rules to simplify authoring in Apex Designer. Rules can help determine default attributes and preferred options for typeaheads. 

For example, when you add mat-icon-button directive to a button, an icon element is automatically put inside the button:

Authoring rules in action on a user interface page

The above behavior is controlled by the authoring rule defined in the Angular Material Library:

Authoring rule definition

Creating Rules

To create an authoring rule, go to Project Settings + Authoring Rules and click on the add button.  When you add a rule, you can select an Event from the options provided. Each Event supports properties that can be used to validate a condition, and methods that can be called to perform a specific task.

Authoring rule definition dialog

Possible Events

Event Purpose Properties Methods
Add Element  Called when a user interface element is added
  • newElement
  • parentElement
  • userInterface
  • scope
  • hasAttribute
  • getAttribute
  • setAttribute
  • addAttribute
  • addElementByName
  • isParentName
Add Attribute Called when an attribute is added to a user interface element
  • attribute
  • attributes
  • element
  • parentElement
  • userInterface
  • scope
  • removeAttribute
  • addError
  • addWarning
  • hasAttribute
  • addAttribute
  • addElementByName
Preferred Child Elements Set options for the "Add Element" typeaheads
  • userInterface
  • scope
  • setPreferredChildren
Attribute Options

Allows adding more options to the attribute typeahead

  • element
  • userInterface
  • scope
  • setPreferredOptions
  • setStandardOptions
  • setEventOptions
 Attribute Value Options Set options for attribute value typeaheads
  • attribute
  • element
  • userInterface
  • scope
  • setPreferredOptions
  • setOptions
 Attribute Value Change

Set options for attribute value typeaheads

  • attribute
  • element
  • userInterface
  • scope
  • setPreferredOptions
  • setOptions
 Element Validation

Called when an element is loaded or moved

  • element
  • userInterface
  • scope
  • addError
  • addWarning
  • hasParentUIName

Properties Examples

Properties Example
attribute
attribute.name == 'mat-icon-button'
element
element.nestedUserInterface.name=="Button"
 
element.childElements && element.childElements.length == 0
 
element.userInterface.wrapperType != 'MaterialDialog'
 
element.parentElement.nestedUserInterface.displayName == 'Template Table'
newElement
newElement.userInterface.wrapperType == 'MaterialDialog'
 
!newElement.parentElement
 
newElement.parentElement.attributes
scope
scope.userInterface.wrapperType == 'MaterialDialog'
userInterface
userInterface.displayName=='Accordion'

userInterface.displayName.includes("Heading")
 
userInterface.name=='MatAccordion'

Method Examples

Method Example
addAttribute(name:string, bindingType:string, value:string)

addAttribute('#auto', 'value', 'matAutocomplete');

addElementByName(name:string)
addElementByName('MatOption');
addWarning(message:string, actions:function[])
addWarning("This component should be inside of a Card.", null);
array.add()
element.attributes.add({name:"confirmMessage",bindingType:"value",value:"Are you sure?"});

newElement.attributes.add({ name: 'matExpansionPanelContent', bindingType: 'no value' });
hasAttribute(element:any, name:string)
hasAttribute(element,'confirm')
isParentName()
isParentName("Card")
setEventOptions(options:any[])
setEventOptions(['confirm', 'click', 'focus', 'blur']);
setPreferredChildren(array:any[])
setPreferredChildren(['Expansion Panel'])
setPreferredOptions(options:any[])
setPreferredOptions(['primary', 'accent', 'warn']);
 
setPreferredOptions([
{
name: 'routerLink',
attribute: { bindingType: 'value', name: 'routerLink' },
help: 'Link to the navigating page'
},
{
name: 'mat-button',
attribute: { bindingType: 'no value', name: 'mat-button' },
help: 'Creates a material style button'
},
{
name: 'mat-raised-button',
attribute: { bindingType: 'no value', name: 'mat-raised-button' },
help: 'Creates a material style raised button'
},
{
name: 'mat-fab',
attribute: { bindingType: 'no value', name: 'mat-fab' },
help: 'Creates a material style floating action button'
},
{
name: 'mat-mini-fab',
attribute: { bindingType: 'no value', name: 'mat-mini-fab' },
help: 'Creates a material style mini floating action button'
}
]);

An Action can directly call the methods from the above table or it can be defined with some extra logic. In the following example, we first check if a close button exists in the newly created dialog. If not found, we add it to the dialog.

A complex authoring rule calling a method

 

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