Components

Components allow developers to extend the platform's UI capabilities by creating reusable, configurable widgets. These components can be tailored to meet specific business requirements and provide enhanced user experiences.

Purpose of Custom Components:

• Enhance UI Flexibility — Add unique UI elements beyond built-in widgets.
• Improve Reusability — Create standardized components that can be used across multiple screens.
• Encapsulate Complex Logic — Build self-contained UI elements with predefined logic and styles.

Create Components

Follow the below steps to create a component:

1. From the explorer menu, right-click Components and select Add.
2. In the properties panel, configure the properties as required and then click Save.

Property	Description	Comments
Name*	Specifies name of the component.	Name must start with a character followed by alphanumeric or '_'. No spaces are allowed. Except underscore (_), no other special characters are allowed. Name cannot start with a number.
Change Detection	The apps configured with the OwlGen are converted to Angular code during the build process. As Angular supports 2-way binding for synchronizing the state between model and view, choosing the appropriate change detection strategy is important for performance. Change Detection is the mechanism that tracks changes in the application state and updates the DOM accordingly. It ensures that the UI stays in sync with the underlying data model.	Two strategies are available: Default — checks the entire component tree when a change happens, runs on every event, timer, or observable update. OnPush — optimized for performance, only checks when the component's @Input() properties change, an event inside the component modifies the state, or a manual detection call (detectChanges()) is made. User can utilize "Detect Changes" construct element to configure "detectChanges()" in event, function or subscription logic flow.
Description	Specifies summary about the purpose of the component.	It helps in understanding the significance of the component.

Input Properties

Input Properties are used to pass data from a parent component to a child component. It allows components to be dynamic and reusable by receiving values from their parent components.

Property	Description
New	Click to create a new input property.
Name	Specify the name for the input property.
DataType	Specify the data type of the input property. Datatypes: string, integer, double, boolean, datetime, long, any.
Is Array	Specify whether the input property is an array or not.
Default value	Specify the default value for the input property.
Action	Allows you to delete the input property.

Event Emitter

Event Emitter facilitates event-driven communication between components. It is primarily used in child-to-parent communication where a child component sends data or an event notification to its parent. For example, messageEvent as an event that can be listened to by a parent component.

The emit() method sends data ("Hello from Child Component!") to the parent when the button is clicked. User can configure "EventEmitter" construct element in component's event or function logic to send data from component to parent where it is used. For example: this.messageEvent.emit("Hello from Child Component!");

Property	Description
New	Click to create a new event emitter.
Name	Specify name for the event emitter (e.g., messageEvent).
Action	Allows you to delete the event emitter.

Input Params

An Event Emitter can take an input parameter when emitting an event. This allows child components to send data (such as strings, numbers, objects, or arrays) to parent components.

Name	Datatype	Is Array	Default Value	Action
Specify the name for the input param.	Specify the data type of the input property. Datatypes: string, integer, double, boolean, datetime, long, any.	Specify whether the input param is an array or not.	Specify the default value for the input param.	Allows you to delete the input param.

External Types Configuration

External types are used to bring in services, classes, and functions required for a component to function properly.

Name	Type	Instance Name	Path	Action
Specifies the Name of the External Class or Function or Service	Specifies the Type which we want to import	Specifies Instance name	Path specifies where a module, service, component, or dependency is located. The path determines whether the import is from Angular's core libraries, third-party libraries, or local project files.	The remove icon is used to delete an added import statement.

Structure of a Component

The created component contains the following folders:

• Event Handlers and Functions
• Models
• Popups
• Sidebar
• Subscriptions
• Validation Groups