Skip to content
Developerhome
Product homepage
Sage 200

Loading property

  Less than to read

The “loading” property in the JSON Schema allows you to control the loading state of components and lock them to prevent changes while performing API requests. This guide will explain how to use the “loading” property effectively in your web screens.

Understanding the “loading” Property

The “loading” property is typically used to indicate that an operation is in progress. When set to true, it triggers a loading state, where components and fields are locked, preventing any modifications while API requests are being executed.

In a real-world scenario, you would typically set the loader, perform multiple API requests, and then turn off the loading state all in one action. However, if you are making a single API request, the loading state is automatically enabled and disabled when the request completes. When dealing with multiple requests, it is advisable to handle the loading state manually at the beginning and end to avoid frequent appearance and disappearance of the loader.

Example Schema

To illustrate the usage of the “loading” property, consider the following example schema where buttons trigger different actions, including error, success, and loading:

In the below schema, the “onLoad” event sets the error, success, and loading extensions to the “SalesOrderAccountSelectionPod” component.

{
  "version": "1.0",
  "pages": ["sop/new-sales-order"],
  "uiExtensions": [
    {
      "id": "error",
      "component": {
        "ButtonMinor": {
          "id": "error",
          "visible": true,
          "children": ["Error"],
          "onClick": {
            "action": "error"
          }
        }
      }
    },
    {
      "id": "success",
      "component": {
        "ButtonMinor": {
          "id": "success",
          "visible": true,
          "children": ["Success"],
          "onClick": {
            "action": "success"
          }
        }
      }
    },
    {
      "id": "loading",
      "component": {
        "ButtonMinor": {
          "id": "loading",
          "visible": true,
          "children": ["Loading"],
          "onClick": {
            "action": "loading"
          }
        }
      }
    }
  ],
  "actions": {
    "success": [
      {
        "set": {
          "status_message": {
            "success": {
              "string": {
                "value": "Message"
              }
            }
          }
        }
      }
    ],
    "error": [
      {
        "set": {
          "status_message": {
            "error": {
              "string": {
                "value": "Message"
              }
            }
          }
        }
      }
    ],
    "loading": [
      {
        "set": {
          "loading": true
        }
      }
    ]
  },
  "validations": {},
  "events": [
    {
      "onLoad": [
        {
          "set": {
            "pageExtension": {
              "componentId": "SalesOrderAccountSelectionPod",
              "panel": "bottom",
              "uiExtension": "error"
            }
          }
        },
        {
          "set": {
            "pageExtension": {
              "componentId": "SalesOrderAccountSelectionPod",
              "panel": "bottom",
              "uiExtension": "success"
            }
          }
        },
        {
          "set": {
            "pageExtension": {
              "componentId": "SalesOrderAccountSelectionPod",
              "panel": "bottom",
              "uiExtension": "loading"
            }
          }
        }
      ]
    }
  ]
}

The “loading” property is a powerful feature that allows you to control the loading state of components in your web screens. By using this property effectively, you can ensure a smooth user experience while performing API requests and prevent unwanted modifications during the loading process.