Configure the Consume Get Web API on a Maintenance Form with the Execute Button

By Xelence Documentation posted 10-11-2021 15:14

Introduction

One way to display data from the specified resource on a maintenance form is the Execute API button. When a user opens the form and clicks the Execute API button, it displays the API data.

You can configure the form entity on the form or on the API file. This example configures the entity on the API file, which requires mapping an entity to the API file and adding a relationship for that entity to the form entity.

Prerequisites

The Consume Web API file you need must already exist.
The Maintenance form you need must already exist.

	Quick Steps
1	Open the API file.
2	Click the button to Create/Edit the entity, then click Finish
3	Save the file
4	Open the entity
5	Add the one to one relationship
6	Save the entity
7	Open the maintenance form
8	Open the Configuration tab, then open the API section
9	Add an API entry, enter the API details, then save the API configuration
10	If necessary, add a container to the form
11	Add a Data Table
12	Enter the load details, then click Next
13	Select the columns, then click Finish
14	Add an Execute API button, then open the button properties
15	Update the button properties
16	Save the form

Detailed Steps

Step 1. Open the API file.

Open the file you want to use on the maintenance form. In this case, that's wpiGetCovidData.

Step 2. Click the button to Create/Edit the entity, then click Finish.

Create an entity to map the web API to.

If you want to store the data in tables, check the Create Table checkbox.

If you have an existing entity with a similar schema, you can select or update entity. In this case, the mapping of the API field to the entity field can be checked. And changes if any, can be made.

You are going to map the entity in this Consume Web API file. Click Create/Update Entity.

Uncheck the Create Table checkbox so you don't create tables for the entity.

Xelence creates the entity and maps the data fields automatically.

The one to many relationships are added in entGetData with lstErrors and lstResponse.

Step 3. Save the file.

Save the changes you made to the file.

Step 4. Open the entity.

Open the entity you are going to load the data from (this example uses entUser). You will link this entity to the entity you just created for the API file.

Step 5. Add the one to one relationship.

Add the relationship to the API entity (objGetData).

You must add a One to One relationship between entUser and entGetData.

Step 6. Save the entity.

Save the changes you made to the entity.

Step 7. Open the maintenance form.

Open the maintenance form you want to display the API data on. In this case, that's wfmUserMaintenance.

You are going to configure the maintenance form with the Consume Get Web API file details.

Step 8. Open the Configuration tab, then open the API section.

Here, you will add the API file details.

Click the Edit icon to open the API section. In this section, you will add the API that you want to use in the form.

Step 9. Add an API entry, enter the API details, then save the API configuration.

Click the Add API details icon to add the API details.

Important properties are:

ID: Name of the API to be used in the form.
API: API file name.
Entity Field: Determines the object/collection name that you are going to map to the API.

You must click the Save icon in the API section so the form can use the API configuration.

You can also use the default form load method to get the data from API. Consume Post Web API can also be executed using the Execute API button.

Enter the details of the API file. Click the Save icon in the API section.

Click Yes to save the details.

Step 10. If necessary, add a container to the form.

Your form will display the API data with a collection control, which will need a container. If your form doesn't already have a container you want to use, add one.

Drag the container control (in this case, a Collapsible control) to the form.

Select the Collapsible control from the toolbox. Drag and drop it where you want to add a new container.

Enter the caption and layout. Since you're going to put a collection and a button in the control, it's best to reduce it to two rows with one column.

You can update the caption, number of rows, and columns in each row. Click OK.

Step 11. Add a Data Table.

Xelence adds the Collapsible control under the User Details container. Drag and drop the Data Table control from the toolbox. This starts a wizard for configuring the data table.

Xelence adds the Collapsible control under the User Details container. Drag and drop the Data Table control from the Toolbox to the recently added container.

Click Yes.

Step 12. Enter the load details, then click Next.

Important properties are:

Load type: Method that loads the data in the data table. The options are:
- Query: Loads the data from the query. This is the default method.
- Custom Load: Loads the data from custom collection. In this example, this method is used.
- XML method: Loads the data from XML method.
Entity Collection: Name of the collection associated with the entity. In this example, the objGetData.lstResponse.
Load Mode: Determines whether the way the user opened the form affects the data table. Options are New, Update, and All.
Lazy Load: If set to True, the application loads the data table only when the user opens the container.

Step 13. Select the columns, then click Finish.

These are the columns whose values you want in the data table. Select the columns and click the arrow button to add the columns.

Select the buttons you want to have on the data table to manipulate it. Usually you skip this step and configure buttons later. For now, the data table won't have any buttons.

Select the columns you want in the data table and click the add button. Click Finish.

The data table is on the form now.

Step 14. Add an Execute API button, then open the button properties.

You are going to configure an Execute API button to call the API and load the data when the user clicks the button. For which, drag and drop the Execute API button from the toolbox above the recently added data table.

You can also use form load method to get the data from API.

Drag and drop the Execute API button from the toolbox above the recently added data table .

Open the button properties. Xelence displays the control properties.

Xelence adds the button. Open the button properties.

Step 15. Update the button properties.

The important properties are:

API Name: Name of the API file.
Refresh Type: Loads new content from the server and updates the required data on the page.
Navigation Parameter: Determines how the application passes the parameter.

Navigation Parameter options are:

Parameter Value: Allows you to enter the specific value of the parameter. This example uses "USA".
Is Constant: If checked, the Parameter Value is constant.

Enter the API file name. Click the Navigation Parameter icon to enter the parameter values.

Enter the API Name. Click the Navigation Parameter icon to enter the parameter values.

Check the Is Constant checkbox and enter the parameter value, then Click OK.

Check the Is Constant checkbox and enter the Parameter Value. Click OK.

Step 16. Save the form.

It saves the HTML form.

Then, run the Preview. Xelence displays the form output. You can test your updated settings.

When you have previewed your form, it should look something like this. When you open an existing record and click the Execute button, the screen displays the API data.

The application loads the data when you click the Execute button.

What are the improvements over S3 Version 6?

This is a new process.

Create an Access Token and Consume Get Web API File

Configure the Consume Get Web API File

Configure the Consume Get Web API File on a Maintenance form with the Default Method

This post is part of the Web API topic. Click here to open Web API Overview

#Develop
#Development Studio
#Task Steps
#Everyone
#Text Help
#Xelence
#API

#WebAPI

0 comments

189 views

View Article