You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 13 Next »

Introduction

The API Connector Builder allows the app designer to use a third-party API service based on an OpenAPI Specification OAS document to make the integration easier by configuration through UI.  In the builder, an app designer can just upload an OAS document and pick the API endpoints they want to use in app design/integration. Then, the created API connector can be used with the following API connector plugins.

  • API Connector Process Tool plugin
  • API Connector Form Load plugin
  • API Connector Form Store plugin
  • API Connector Form Options plugin
  • API Connector List Data plugin
  • API Connector List Action plugin

Prerequisites 

  1. An OAS document from an API service provider. 
  2. Joget DX 8 Enterprise Edition.

How to install

  1. Download the plugin JAR file from the Joget Marketplace. 
  2. Go to Settings > Manage Plugins > Upload Plugin. 
  3. Once uploaded, the plugin will be available in your Joget environment.

How to use 

API Connector Builder

Once you have installed the API, configure an API connection. 

  1. In a new app or an existing app, navigate to the App Composer. 
  2. Under API Connector Builder, click the ADD NEW button to create a new API connector.

  3. Provide an ID, Name, and Description for the API connector, and click Save.

  4. For Select OAS document, upload and select the OAS document.

  5. Under API Server, for Select API Server, select the API server from the drop-down list.
  6. Depending on the OAS document used, configure any additional required fields.
  7. Under Security, for Select Authentication method, select an authentication method provided by the OAS document from the drop-down list.
  8. Depending on the OAS document selected, configure the fields in the Security section depending on the authentication method selected. The images below display the different fields to configure depending on the OAS document used.
    Note If the OAS document did not provide any authentication details, you can choose to use the headers to configure the API key.

    After selecting the OAS document and configuring the authentications, the available API endpoints of the OAS document will be available in the palette.
  9. Click the Design tab. 
  10. In API Connector Builder, drag and drop an API endpoint to make available to the canvas.

  11. Click the API endpoint on the canvas to configure it.
  12. After configuring the API endpoint, click Apply Change and click SAVE.

Once an API connector is created, it can now be used in the included List and Form plugins as data sources.

List Builder

API Connector List Data plugin

Uses the API Connector as a data source to retrieve the API data.

  1. In List Builder, in the DATA tab, for Select Source of Data, select API Connector from the drop-down list.
  2. For API Connector, select the API Connector created.
  3. For Select Operation, select the operation created in API Connector Builder. Depending on the operation type, configure:
    • id
    • Payload
  4. For Base JSON Object Name for Multirow Data, configure the name of the base JSON object (e.g., data).
  5. For Total Record Count JSON Object Name, configure the total number of records in the JSON object (e.g., data.total).
  6. For Primary Key, configure the Unique Identifier of the JSON object (e.g., data.id). Mandatory field.
  7. Optionally, check the Auto Handling Full Results Paging & Sorting option if you retrieve all the records. The paging and sizing will be handled by Joget DX.

API Connector List Action plugin

To call where to perform role?(video 1 minute 4:15) or list actions

  1. In the Design tab, drag and drop the API Connector to the list or canvas.
  2. Click the API Connector to configure the following properties:
    • Label: Select a display label.
    • API Connector: Select the created API connector.
    • Select Operation: Select an operation created in the API Connector Builder. Depending on the operation selected, configure:
      • id
      • Payload
  3. Click Apply Change and click SAVE.

Form Builder 

API Connector Form Load plugin

  1. In Form Builder, navigate to the Settings tab. 
  2. Under Advanced, for Post Processing Tool, select API Connector from the drop-down list. 
  3. For API Connector, select the API connector created. 
  4. For Form, select the form to store the data to. 
  5. For Select Operation, select the operation created in the API Connector Builder. 
  6. For Base JSON Object Name for Multirow Data, select the name of the base JSON object (e.g., data).
  7. For

API Connector Form Store plugin

  1. PUT 

API Connector Form Options plugin

  1. Click the form element on the canvas to open the Properties tab.
  2. For Or Load Data Form, select API Connector from the drop-down list.
  3. For API Connector, select the API connector created.
  4. For Select Operation, select the operation created in the API Connector Builder.
  5. Click Apply Change.

Properties Configuration

API Endpoints

OAS documents come with API endpoints that can be comprised of either the POST, GET, PUT and DELETE HTTP methods. The following image shows a sample of API endpoints included in an allowance template OAS document.

POST

Parameters:  

  • Name: Name of the POST API endpoint.
  • Description: A description of the POST API endpoint.
  • Request Body Input Type: 
    • Payload:  
      • Request Body 
    • Input FIelds: 
      • Field Label
      • Default Value
      • Mode
        • Default 
        • Force Mandatory 
        • Hide Field

GET

Parameters:  

  • Name: Name of the GET API endpoint. 
  • Description: A description of the GET API endpoint.
  • Field Label: Specify a field label.
  • Default Value: Specify a default value.
  • Mode: 
    • Default
    • Force Mandatory
    • Hide Field

PUT

Parameters:  

  • Name: Name of the PUT API endpoint.
  • Description: A description of the PUT API endpoint.
  • Request Body Input Type: 
    • Payload:
      • Request Body
    • Input FIelds:
      • Field Label
      • Default Value
      • Mode: 
        • Default
        • Force Mandatory
        • Hide Field

SET

Parameters: 

  • Name: Name of the SET API endpoint.
  • Description: A description of the SET API endpoint.
  • Field Label: Specify a field label.
  • Default Value: Specify a default value.
  • Mode:
    • Default
    • Force Mandatory
    • Hide Field

Plugin information 

The API Connector plugin is part of the API Connector suite, designed to help you create, manage, and secure custom APIs within your Joget platform. The available API elements cover a wide range of functionality, from managing users to handling forms and processes. 

Download Plugin

You can download the API Connector plugin from the Joget Marketplace once it is released. 

Download Sample App

  • No labels