Introduction

The API Connector Builder allows app designer to use third party API service OAS document to make the integration easier by configuration through UI.  In the builder, 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 use with 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, do this: 

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 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, for region, select the SAP Subscription Billing Region from the drop-down list.
   
7. Under Security, for Select Authentication method, select an authentication method from the drop-down list. In this example, it is oauth2.
8. Configure the fields in the Authenticators section depending on the authentication method selected.
   
   
9. Click the Design tab.
10. In API Connector Builder, drag and drop an API request template to the canvas.
    
    
11. Click the template to configure it. 
12. Click SAVE.
    
    

List Builder 

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. In the DESIGN tab, drag and drop the API Connector to the list or canvas.
8. 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
9. Click Apply Change and click SAVE.

Form Builder 

Settings tab

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).

Form Options Data Store

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 

Operations 

POST/allowance-templates

Parameters:  

• Name: Name of the POST operation 

• Description: A description of the POST operation 

• Request Body Input Type: 
  • Payload:  
    • Request Body 
  • Input FIelds: 
    • Field Label
    • Default Value
    • Mode
      • Default 
      • Force Mandatory 
      • Hide Field

GET/allowance-templates

Parameters:  

• Name: Name of the GET operation 

• Description: A description of the GET operation

• Field Label: Specify a field label.

• Default Value: Specify a default value.

• Mode: 
  • Default
  • Force Mandatory
  • Hide Field

PUT/allowance-templates

Parameters:  

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

SET/allowance-templates 

Parameters: 

• Name: Name of the SET operation 

• Description: A description of the SET operation

• Field Label: Specify a field label.

• Default Value: Specify a default value.

• Mode:
  • Default
  • Force Mandatory
  • Hide Field

Authenticators 

oauth2

• Grant Type: Select the method the application uses to obtain an access token. 

• Scopes:
  • View allowance templates.
  • Create and update allowance templates.
  • Delete allowance templates.
• Client ID: The Client ID provisioned by the OpenID provider when the client was registered. 

• Client Secret: The Client Secret (password) provisioned by the OpenID provider when the client was registered. 

• Client Authentication: Select the client authentication type. 
  • Send as Basic Auth Header
  • Send credentials in body
• Headers: 
  • NAME
  • VALUE

openId

• Client ID: The Client ID provisioned by the OpenID provider when the client was registered. 

• Client Secret: The Client Secret (password) provisioned by the OpenID provider when the client was registered. 

• Code Challenge Method:
• Callback URL: URL to which Auth0 redirects users after they authenticate. 

Note

Ensure to provide this Callback URL to your OpenID Connect service.

• Configuration Method: 
  • OpenID Connect Discovery 
  • Custom 
• Authorization Code:
  • OpenID Connect Directory 
  • Get Authorization Code 
• Custom: 
  • Issuer 
  • JSON Web Key Set 
  • Authorization Token Endpoint 
  • Token Endpoint 
  • Scopes
• Client Authentication: Select the client authentication type. 
  • Send as Basic Auth Header 
  • Send credentials in body 
• Headers: 
  • NAME
  • VALUE

Plugin information 

The API Connector plugin is part of the Addon Builders 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. 

Download Sample App