Skip to content
Developerhome
Product homepage
Sage 200

Loading property

  Less than to read

Master the “loading” property in JSON Schema for seamless control of component loading states and locking them during API requests. Our guide will teach you to use it effectively in your web screens.

Understanding the “loading” Property

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 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. This guide will explain how to use the “loading” property effectively in your web screens.

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

This example scheme sets up a button on a page named “new-sales-order.” When this button is pressed, it triggers an action called “loading.” This action does the following:

  • Sets the “loading” property to true, locking components.
  • Makes a GET request to retrieve a collection of data from the API endpoint “v1/sop_orders” and stores it using the prefix “myPrefix” and the key “sop_orders.”
  • Sets the “loading” property to false, freeing up the locked components.

The purpose of this configuration is to control loading states and data retrieval on the web page.

{
  "version": "1.0",
  "pages": ["sop/new-sales-order"],
  "uiExtensions": [
    {
      "id": "loading",
      "component": {
        "ButtonMinor": {
          "id": "loading",
          "visible": true,
          "children": ["Loading"],
          "onClick": {
            "action": "loading"
          }
        }
      }
    }
  ],
  "actions": {
    "loading": [
      {
        "set": {
          "loading": true
        }
      },
	  {
		"apiGetCollection": {
		  "endpoint": "v1/sop_orders",
		  "prefix": "myPrefix",
		  "key": "sop_orders"
		}
	  },
      {
        "set": {
          "loading": false
        }
      }
    ]
  },
  "validations": {},
  "events": [
    {
      "onLoad": [
        {
          "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.