Html Configuration

The objective of this guide is to provide an in-depth understanding of how to use HTML controls effectively in web development and how to integrate them with data from external APIs.

Expected output:

1st Step

1. Begin by creating a new blank transaction page.

2nd Step

1. Add HTML controls. We will also configure their attributes, such as database field names, label names, and column widths, based on the specific requirements of the form or application.

3rd Step

1. Now, in the HTML section, write the HTML code according to your requirements. To bind the values coming from the API, use the attribute in the code within {}. For better understanding, refer to the screenshot below. You can see that the Name, Position, and Social attributes, which will receive values from the API, are written with {}. For any other attribute you need to bind, you can do so, but it should be within {}.

4th Step

1. Now, we map that field with the API. To do this, you need to configure the Mapping Field section. Add the HTML Key Name and the Data Fields. The HTML Key Name is the attribute you’ve written within {} in your code, and the Data Field is the field from which the data will come from the API. Ideally, we use the same name in both sections. Refer to the screenshot where we are mapping the Name, Position, Social, and Phone values from the API.

5th Step

1. Now, write the CSS styles. To do this, go to the "Advanced" and, in the "Style" section, write your CSS styles according to your HTML code.

6th Step

1. Now, configure your API, and the data will be mapped according to the fields bound with the HTML code. Afterward, save the configuration.

Final Output: