Skip to main content

API Integration

APIs play a vital role in making an application interactive. An application has to integrate a number of different APIs into it for its different functionalities to work. With DhiWise, setup these APIs easily for your application.

Add APIs

To integrate APIs you require an API for your application in DhiWise, to use the same and set it up. Add APIs manually or import your Postman collection in DhiWise.

Setup APIs

Integrate API on any screen, widget or view component easily using the following steps:

tip

You can also integrate APIs in lifecycle method. Learn more.

Select screen

In your DhiWise application, select the screen from the screen list or choose Configure option for a particular screen, in which you want to set up an API.

Example banner

Select widget

Now, as you open the screen in detail view, switch to the widget on which you want to integrate an API, add onClick property for setting up action and choose API integration from the actions list, as shown below;

Example banner

Set function name

As you choose API integration action, firstly it will ask you to submit a proper function name for your API integration which will be generated for your screen code.

Example banner

Select your API

Select an API that you want to bind with the selected view widget or lifecycle method, from the list of APIs added in DhiWise.

Example banner

Now as you select the API, three following required steps are needed to be set up to complete your API integration.

Step 1: Handle Request

Header and Params

Set your API’s Header, Parameters, and Body by switching to Handle request area. Headers and Parameter values will be the same as you have added while you add your API. Easily modify them if you want to change or add new values here.

Example banner

Body

Switch to Body property and bind your request key with any of the below supported types to send data to your API request.

TypeDescription
ViewScreen's widget or view component
ConstantApplication app constant Learn more
API responsePriorly saved API response
Get from preferenceStored value from preferences
Navigation argumentSaved argument while navigation Learn more

Step 2: Handle Response

Bind Response with View

Bind the response values with the views of your screen when you need to display the response coming from the APIs. Select the key from the response, select View from the options, and select the view in which you need to display the response from the right.

Example banner

Bind Response with List/ Grid or Slider

To display the data in List/ Grid or Slider from API response, bind the response array with the List/ Grid or Slider view and get your screens filled with data.

Save Response to Preferences

While handling your response data, save them to preferences by selecting the response key and giving it the desired name.

Select the key you want to save from the response, select Save to preference from the options, give the key a name you want to save with, and click on Save changes.

Step 3: Handle Actions

Handle and choose what to perform on the success and failure methods after the API call in Handle action area;

Example banner

On success and On error actions

info

We are considering response code as 200 for success of API call, rest code will be in error state.

Select an action you want to execute on these methods from the actions list and set it up accordingly with the required inputs. Actions supported on these methods are :


Click on Submit and your API is integrated.



Got a question? Ask here.