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.
Integrate API on any screen, widget or view component easily using the following steps:
You can also integrate APIs in lifecycle method. Learn more.
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.
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;
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.
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.
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
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.
Body property and bind your request key with any of the below supported types to send data to your API request.
You can only bind request keys with TextField or FormTextField.
|View||Screen's widget or view component|
|Constant||Application app constant Learn more|
|API response||Priorly saved API response|
|Get from preference||Stored value from preferences|
|Navigation argument||Saved 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.
You can only bind response keys with the views like List, Grid, Text, TextField, Image, Slider etc.
For example, when the user logins into an app and want to display the user profile details like email, name, and profile picture, just select the available keys from the API response and bind it with the text and image where it can be displayed, as shown below;
Bind Response with List/ Grid or Slider
Load data in your screens by binding the response body such as an array with the List/ Grid or Slider view.
For a single cell of the List/ Grid or Slider, you can easily bind its details as shown below;
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
Step 3: Handle Actions
Handle and choose what to perform on the success and failure methods after the API call in Handle action area;
On success and On error actions
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 :
Submit and your API is integrated.
Got a question? Ask here.