Skip to content
Developerhome

Using the onLoad Event

  Less than to read

The onLoad event is a crucial aspect of defining operations that are triggered when a page loads. This event allows you to specify tasks or behaviors that should occur when the page is initially rendered. By utilising the onLoad event effectively, you can customize the behaviour and appearance of your application to provide a seamless user experience.

Understanding the onLoad Event

The onLoad event allows you to specify tasks or behaviors that should occur when the page is initially rendered. These tasks can include adding UI components, setting properties, or performing other operations that should take place upon page load.

How to Use onLoad

The onLoad event provides a wide range of possibilities for customizing the behaviour and appearance of your application when a page loads. Here are some examples of what you can do with the onLoad event:

Example JSON

Consider the following example:

{
  "events": [
    {
      "onLoad": [
        {
          "set": {
            "pageExtension": {
              "componentId": "part_number",
              "panel": "top",
              "uiExtension": "myButtonExtension"
            }
          }
        },
        {
          "set": {
            "componentExtension": {
              "componentId": "StockItemTabs",
              "uiExtension": "Tab1"
            }
          }
        },
        {
          "pages": [
            "sales/new-customer"
          ],
          "onLoad": [
            {
              "set": {
                "pageExtension": {
                  "componentId": "main_address/address_2",
                  "panel": "bottom",
                  "uiExtension": "numberId2"
                }
              }
            }
          ]
        },
        {
          "set": {
            "properties": {
              "inputField1": {
                "disabled": true,
                "text": "Hello, World!"
              }
            }
          }
        },
        {
          "action": "deptLoad"
        }
      ]
    }
  ]
}