onLoad Event - Add Component to UI
Less than to read
The onLoad event is a crucial aspect of defining operations that are triggered when a page loads. By utilising the onLoad event effectively, you can customize the behaviour and appearance of your application to provide a seamless user experience. This guide will walk you through the process of using onLoad to add a component created in uiExtension to a page.
{
"set": {
"pageExtension": {
"componentId": "part_number",
"panel": "top",
"uiExtension": "myButtonExtension"
}
}
}
Understanding PageExtension and ComponentExtension
PageExtension and ComponentExtension serve distinct purposes based on the concept of individual elements versus collections of elements:
-
PageExtension: Use pageExtension when you want to add a component to a specific location on a page. For example, if you aim to place a button in a particular section of the page, it falls under the category of pageExtension.
-
ComponentExtension: If you intend to add a component to a group or collection of similar components, componentExtension is the appropriate choice. This approach allows you to expand or modify components within a group without altering the entire collection.
By understanding the distinction between pageExtension and componentExtension, you can effectively organize and extend components within your application based on your requirements.
{
"set": {
"pageExtension": {
"componentId": "part_number",
"panel": "top",
"uiExtension": "myButtonExtension"
}
}
},
{
"set": {
"componentExtension": {
"componentId": "StockItemTabs",
"uiExtension": "Tab1"
}
}
},
Adding a UI Component using PageExtension
To add a UI component to a specific location on the page, we utilise the pageExtension option. The following steps outline the process:
{
"set": {
"pageExtension": {
"componentId": "part_number",
"panel": "top",
"uiExtension": "myButtonExtension"
}
}
}
-
componentId: Use the componentId property to associate the new UI component with an existing component on the page. In our example, the componentId property is set to “part_number”, indicating that the new UI component will be positioned around this component.
-
panel: The panel property determines the position of the new UI component relative to the associated component. By setting it to “top”, the new component will be placed above the target component. You can adjust the panel property to position the component in different areas of the page, such as “bottom”, “left”, or “right”. If you want to amend the margins, boarders or other properties this would be best done on the
uiExtension -
uiExtension: The uiExtension property specifies the ID of the desired
uiExtension. In this example, we use the ID “myButtonExtension” to identify the UI extension.
Here is a full example that demonstrates the usage of onLoad with pageExtension.
Full Example
{
"version": "1.0",
"pages": [
"stock/new-stock-item",
"stock/amend-stock-item"
],
"uiExtensions": [
{
"id": "myButtonExtension",
"component": {
"Button": {
"id": "myButton",
"mb": 2,
"onClick": {
"action": "buttonOnClick"
},
"children": [
"Set Part-Number"
]
}
}
}
],
"actions": {
"buttonOnClick": [
{
"set": {
"state": {
"part_number": {
"string": {
"value": "ABC123"
}
}
}
}
}
]
},
"events": [
{
"onLoad": [
{
"set": {
"pageExtension": {
"componentId": "part_number",
"panel": "top",
"uiExtension": "myButtonExtension"
}
}
}
]
}
]
}
Adding a UI Component using componentExtension
The onLoad event allows you to specify tasks or behaviors that should occur when a page is initially rendered. You can use the componentExtension property in the onLoad event to add a UI component to a group or collection of similar components.
{
"set": {
"componentExtension": {
"componentId": "StockItemTabs",
"uiExtension": "Tab1"
}
}
},
-
componentId: Determine the existing component or group of components to which you want to add the new UI component. In the example JSON, the component with the ID “StockItemTabs” is chosen as the target component.
-
uiExtension: Create a UI extension for the new component that you want to add. In the example JSON, the UI extension with the ID “Tab1” is defined.
Here is a full example that demonstrates the usage of onLoad with componentExtension.
Example JSON
{
"version": "1.0",
"pages": [
"stock/new-stock-item",
"stock/amend-stock-item"
],
"uiExtensions": [
{
"id": "Tab1",
"component": {
"Tab": {
"id": "newTab1",
"name": "newTab1",
"tabId": "newTab1",
"title": "New Tab 1",
"visible": false,
"index": 4,
"children": [
{
"Pod": {
"title": "Tab 1 Pod",
"invisible": true,
"children": [
{
"GridContainer": {
"children": [
{
"GridItem": {
"children": [
{
"Content": {
"id": "tabContent",
"title": "Tab 1 contents",
"children": [
"This is the new tab 1"
]
}
}
]
}
}
]
}
}
]
}
}
]
}
}
}
],
"actions": {
"stockFormClear": [
{
"resetState": {}
}
]
},
"validations": {},
"events": [
{
"onLoad": [
{
"set": {
"componentExtension": {
"componentId": "StockItemTabs",
"uiExtension": "Tab1"
}
}
}
]
},
{
"onClear": [
{
"action": "stockFormClear"
}
]
},
{
"onStateChange": [
{
"watchTarget": "product_group_id",
"onChange": [
{
"if": {
"gt": [
{
"get": {
"state": "id"
}
},
{
"string": {
"value": "0"
}
}
],
"then": [
{
"set": {
"properties": {
"newTab1": {
"title": "New Tab 1",
"visible": true
}
}
}
}
],
"else": [
{
"set": {
"properties": {
"newTab1": {
"visible": false
}
}
}
}
]
}
}
]
}
]
}
]
}
Working with onLoad and pages
The following example illustrates how to make the onLoad event specific to certain pages. The onLoad object is nested within the events array and is preceded by a pages array. Inside the pages array, you can specify the pages for which the onLoad event should be triggered. In this case, the onLoad event will only be triggered when the page “sales/new-customer” is loaded.
{
"pages": [
"sales/new-customer"
],
"onLoad": [
{
"set": {
"pageExtension": {
"componentId": "main_address/address_2",
"panel": "bottom",
"uiExtension": "numberId2"
}
}
}
]
}
By following the instructions presented in this guide and leveraging the provided examples, you can effectively employ the onLoad event to load your components onto the Sage 200 screens.