Calling REST Service
To interact with REST services in UI Editor, you can utilize the Request.async method. This feature enables you to create and manage HTTP requests.
In UI Editor, by using Request.async method empowers you to craft and execute HTTP requests with precision. Below, you will delve into the key attributes of the request object, illustrating how to harness this functionality effectively.
Handling CORS Error If you encounter a CORS error in service requests, ensure that the browser you are using with Plateau Studio does not have any CORS restrictions, or add the following CORS settings to the service's response:
- Access-Control-Allow-Credentials
- Access-Control-Allow-Headers
- Access-Control-Allow-Methods
- Access-Control-Allow-Origin
During service calls, envirement-based service address management is performed with proxy settings. See more for proxy settings.
Request Object Attributes
url (string) : Request adress
http (string) : GET, POST, PUT, PATCH, MULTIPART, DELETE, POSTBLOB, GETBLOB (non-case sensitive)
responseField (string) : Keeps the name of the field where you can use successful responses from the request. You can access the response with the name you give to this field after the response keyword. Such as response.{{fieldName}}
data (any) : Body of the request.
timeOut (any) : If no value is given, the browser takes the default timeout value. You must write the given value in milliseconds.
onSuccess (string) : Event name to be triggered after successful response from the request. You must create this event as a custom event with the same name on the requested component.
onFail (string) : Event name to be triggered fail response from the request. You must create this event as a custom event with the same name on the requested component.
blockRender (boolean) : Value that blocks the rendering operation while waiting the service response. Provides sync operation with request while rendering. Default value is false.
showErrorMessage (boolean) (optional) : Shows error message when the request failed. Default value is true.
args (any) (optional) : Event arguments of onSuccess event that when the successful request returned.
headers (key-string) (optional) : Request headers with key-value pairs.
disableLoading (boolean) (optional) : Decides to show the loading screen during the request. Default value is false.
withCredentials (boolean) (optional) : Sends credentials (cookies) in a cross-origin request. False to ignore for request and ignore cookies in its response. Default value is false.
quick.Request.async(requestObject: IRequest)
interface IRequest {
url: string,
http: "GET" | "get" | "POST" | "post" | "MULTIPART" | "multipart" | "PUT" | "put" | "POSTBLOB" | "postblob" | "GETBLOB" | "getblob" | "DELETE" | "delete" | "PATCH" | "patch",
data: any,
responseField: string | null
onSuccess: string | null
onFail: string | null
blockRender: boolean,
showErrorMessage?: boolean,
args?: IDictionary<any>,
headers?: IDictionary<string>,
disableLoading?: boolean,
withCredentials?: boolean,
timeout?: number
}
Get Request
Get is one of the standard HTTP methods that you can use to retrieve data from a specified resource.
When you initiate a Get request, you're essentially asking the server to provide you with specific data located at a particular URL.
Here's the code of how the GET method works:
const req: IRequest = {
url: "https://httpbin.org/get",
data: null,
blockRender: false,
http: "get",
onFail: null,
onSuccess: null,
responseField: "respo",
timeout: 2000,
};
quick.Request.async(req);
Update-Put Request
Update-Put Request in UI Editor empowers you to update data on your web applications and communicate with REST services. Whether you're building a dynamic web page or managing content within your application, you can use this feature in the process of sending data to your server and keeping your application's information up to date.
You must set the input parameters to data field of object which is given to Request.async function.
Here's the code of how the PUT method works:
const reqData = {
oldPassword: "newPassword",
newPassword: "oldPassword",
};
const reqHeaders = {
accept: "application/json",
};
const req: IRequest = {
url: "https://httpbin.org/put",
data: reqData,
headers: { accept: "application/json" },
blockRender: false,
http: "put",
onFail: null,
onSuccess: null,
responseField: "respo",
timeout: 2000,
};
quick.Request.async(req);
To update your data by using Update-Put Request:
- Create an object with IRequest type.
- Give this object as a parameter to quick.Request.async method
- Create custom events for successful and fail returns. Successful event must be named with the above IRequest object's onSuccess field and fail event must be named with the same object's onFail field string.
- In order to reach the successful response fields, it can be used anywhere in the page (except sub pages) in the form of response.{{responseField}} with the value given to the responseField in IRequest object.
- To handle failed response, see the 3. instruction and create onFail event if you haven' t already.When the event is created, declare error variable beginning of the event and failed response can be reached by this error keyword only in this event. error argument has full response, error stack and request object(IRequest) fields on it.
Request with Inline Response
UI Editor empowers developers with a powerful and intuitive feature: TypeScript (TS) Request with Inline Response.
This feature simplifies the process of making TypeScript requests to REST services while providing inline response. It's designed to streamline the interaction between your frontend and REST services, communicate with APIs and retrieve data.
const req: IRequest = {
url: "https://httpbin.org/get",
data: null,
blockRender: false,
http: "get",
onFail: "failEvent",
onSuccess: "successEvent",
responseField: "respo",
};
async lambda func request:
In UI Editor, an Async Lambda Function Request refers to the capability to execute Lambda functions asynchronously.
This feature allows you to trigger Lambda functions from your applications without waiting for a synchronous response. Instead, the function is invoked, and your application can continue its operation without delay, making it ideal for scenarios where immediate processing isn't necessary.
(async () => {
try {
const resp = await quick.Request.async(req);
quick.EM.trace("async lambda");
quick.EM.trace(resp);
} catch (ex) {}
})();
async func request:
In UI Editor, an Async Function Request allows you to execute functions asynchronously within your applications.
This feature is designed to enhance the responsiveness and efficiency of your application by enabling you to perform tasks without blocking the main execution thread. Instead of waiting for a function to complete, your application can initiate the function and continue its operations.
async function makeRequest() {
try {
const resp = await quick.Request.async(req);
quick.EM.trace("async func");
quick.EM.trace(resp);
} catch (ex) {}
}
makeRequest();
promise request:
Promise Request is a feature that allows you to manage asynchronous operations and handle their results with ease and precision. It leverages JavaScript Promises to provide a structured way to work with asynchronous code.
Promises enable you to deal with operations that may take time to complete, such as data fetching, file loading, or API requests, while maintaining a clean and organized code structure.
quick.Request.async(req)
.then((resp) => {
quick.EM.trace("promise then");
quick.EM.trace(resp.data);
})
.catch((ex) => {});
Download Request
Download Request enables you to download files and resources from the internet to your application.
It simplifies the process of retrieving files like images, documents, PDFs, and other resources, making it accessible for users of all technical backgrounds.
You can use the request below to download files.
const req: IRequest = {
url: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
data: null,
blockRender: false,
http: "get",
onFail: null,
onSuccess: null,
responseField: "respo",
timeout: 2000,
};
quick.Request.download(req);