UI Page has multiple widget and each widget display data by invoking API

In order to display the result of the API call on the widget you will have to create the custom widget and implement the API call for retrieving necessary data in its source code. The key from Global area that will be used for calling the API you can send to your custom widget as a parameter. Also in custom widget configuration you will have to define "items" list that will represent the structure of the data you want to display. When the API call returns the result you will have to parse it and map to the corresponding columns in widget ViewModel.

You can find the detailed explanation and the example of custom widget implementation in the following article
https://academy.creatio.com/docs/8.x/dev/development-on-creatio-platform/8.1/platform-customization/classic-ui/dashboard-widgets/examples/add-a-dashboard-widget

Hi thanks 

Widget is more of data view (list / form) 
Page will not have any backend data connected

Currently it's not possible to display API call result in List component on the page.

If you want to display API call result on the page you can add the custom attributes to your page, save the parsed response there and then bind the attributes to the labels on the page to make it visible.

Here is the example of the attribute:

viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
...
	{
		"operation": "merge",
		"path": ["attributes"],
		"values": {
			"MyAttrubute": { "value": "" }
		}
	}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/

and how you can set its value using the response from API call:

handlers: /**SCHEMA_HANDLERS*/[
	{
		request: "crt.HandleViewModelResumeRequest",
		handler: async (request, next) => {
			await next?.handle(request);       
			const url = 'https://open.er-api.com/v6/latest/USD';
			fetch(url).then(response => {
   				if (!response.ok) {
					return Promise.reject('Failed to load data: ' + response.statusText);
				}
 				return response.json();
			}).then(data => {
				request.$context.MyAttrubute = 'Rates: '+ JSON.stringify(data.rates);
			}).catch(error => {
				console.error('Error:', error);
			});
		}
	}
]/**SCHEMA_HANDLERS*/

Also you can find some useful information in these articles:

https://customerfx.com/article/using-custom-attributes-on-a-creatio-freedom-ui-page/

https://customerfx.com/article/binding-data-to-labels-on-a-page-in-crea…

THANKS -- wish there is way to invoke a business process with UI page value passed as parameters 

One question for the above method with handler the API call will be made from the client end -- wanted it to be done from server end (this way we can whitelist creatio iP range and only allow calls from those servers only)