REST API Data Connection

Step 1: Create a REST API connection at Global or App scope

  1. Go to Connections → Data Sources either at Global or App Level.

  2. Define a new REST API connection.

  3. Provide API Base URL and Authentication details. For more details see Create Database Connections.

Step 2: Create Solution Data Connection

Follow below steps to configure the data connection as per required operation (Create, Read, Update or Delete) and as per Data needed from the API system.

  1. Create a new or open an existing Form Solution and click on Add Data Connection from Solution ribbon menu.

  2. Provide it a name and select type REST API. This will show all data sources of type “Rest API” which exists either in current App scope or Global scope.

  3. Set API URL or REST API End point:

    1. By default, it shows the Base API URL, as defined while creating the Data Connection. Configure this URL as per requirement to get data from a specific end point.

    2. Click on three dots to open URL builder to add URL parts.

    3. In URL Builder dialog, add URL as needed for this solution data connection. it could be a fixed value or Form field value or both. Below is an example of getting specific Product details from SAP HANA API.

      1. Base URL as defined in connection: https://sandbox.api.sap.com/s4hanacloud/sap/opu/odata/sap

      2. First URL Part to specify access to product API: /API_PRODUCT_SRV/A_Product/

      3. Second URL part to specify Product Number from a form field: ('[/my:myFields/my:Search_Product_Id]') NOTE: This value is as per SAP HANA API specification i.e. ('<<Product Number>>')

      4. Final URL will look like:

        https://sandbox.api.sap.com/s4hanacloud/sap/opu/odata/sap/API_PRODUCT_SRV/A_Product/('[/my:myFields/my:Search_Product_Id]')

    Fallback to API URL defined in Data Connection library works if no API-URL defined with control (Lookup/Query/Drop-down)

    If API URL is changed in Data Connection library, it gets reflected in run-time solution as well.

    Data Connection added from Data Connection library is non-editable from Solution Data Connection level. User can only edit the API URL from filter property (Raw where clause) of Lookup/Query/Drop-down control.

    Following priority will be followed:

    • For Data Connection Library Connection

      • API URL defined in Query/Lookup control will be respected first.

      • In no API URL defined in Query/Lookup, it will fallback to API URL defined in Data Connection Library level.

    • For Solution Connection

      • API URL defined in Query/Lookup control will be respected first.

      • In no API URL defined in Query/Lookup, it will fallback to API URL defined in Solution Connection level.

  4. HTTP Operations: REST API uses HTTP Verb to specify that the request is for Read/Update/Delete or Create. Select this field as per current API connection usage. Supported operations are:

    1. GET: To get data from API.

    2. Put / Patch: To update data.

    3. Post: To Create data.

    4. Delete: To Delete data.

      Note:

      Notes:

      • Select the above operation as per API specification of the system, as some systems may not follow standard HTTP verb. i.e. Post operation might be doing deletion of data.

      • Data Connection Adapter Plugin - Runner Node is supported with REST API Data Connection.

  5. Set API Schema:

    1. Input Schema: Input schema is for the data that will be sent to API (i.e. Request payload in JSON). Provide JSON schema either from file or directly copy to text field.

    2. Output Schema: Output schema is for the data that will be received from the API (i.e. Response payload in JSON). Provide JSON schema either from file or directly copy to text field.

      For more information, refer steps to update Input/Output Schema for REST API connection.

    3. Error Schema: In case of error or exception some API return data in different JSON schema i.e. HTTP status code (4xxx or 5xxx) are considered as error / exception in API call. Provide JSON schema either from file or directly copy to text field.

    4. Request Header: This is the header data in Key Value pairs format. Request header is the data that will be sent to API in Request Headers section. Specify the expected request headers as per API specification. Also both key and value can be configured to read from Form fields or fixed value or both.

      Example: If request header authorization is set with value – bearer [FormFieldName], then at run time if FormFieldName value is 1234, then request header authorization value will be - bearer 1234

      Here bearer is a fixed value and FormFieldName is a Form Field.

    5. Response Header: This is the header in Key Value pairs format. Response header is the data that will be received from the API as response in headers section. Specify the expected request headers as per API specification. Key name should be fixed / static value provided at design time of solution, and the value will be a Form field and this form field will be updated with the value as per the data received from API. Response headers will only work with Web service run (Web service control or Data connection adapter).

      Note for Request Headers

      Below are the details of Support of header via Form field:

      1. Async data connection: Automatically retrieve data when form is opened is not checked, This is not supported.

      2. Sync data connection: Automatically retrieve data when form is opened is checked. This is supported only for non-repeating fields.

      Note:

      Notes:

      • If the REST API Data Connection (Sync/Async) is used in dropdown with Filter defined and user changes the Data Connection, a warning message is displayed. Based on the selection, the Data Connection mode changes and filters are cleared. Respective filter dialog (sync filter or REST API URL filter) opens for where Rest API Data Connection is consumed.

      • No warning message is displayed if the REST API Data Connection used in dropdown with no Filter is defined.

      JSON Payload field data type:

      Application can determine the JSON fields data type if JSON schema specified in Input / Output / Error schema has specified the Data Type name in value. i.e. to specify the field CityName as string type : { “CityName”:”string”} or to specify the field CreatedOn as Date type: {“CreatedOn”:”date”}. Below is the field type mapping table for reference:

      Data Type Field Type
      int, bigint For Number field.
      string For string or Text field.
      decimal For Decimal field.
      bit, bool, true For Boolean field.
      date, datetime For Date field.

      If no data type is specified then application tries to predict the datatype based on given value. Number value to int (i.e. 0 or 12 etc), Decimal value to double (i.e. 12.4 or 9.1 also 0.0 will be considered as int), Date value to date. It is recommended to specify the data type to get more defined results.

      Array Support

      Array type properties are also supported. Below is an example of array property and its data type notation. For array type properties the Form schema is generated as single column table (i.e. Repeating section with single form’s field)

      [{
      "id": "int",
      "name": "string",
      "productType": "string",
      "sizes": ["string"],
      "otherDetails": {
      "colors": ["string"],
      "versions": ["int"]
      }}]

      Date-type mismatch on Field Generate

      If the API field given in payload doesn't match with form field type (mainly use case with Date and Numbers) i.e. API field type is string, but it is mapped with Form field of type date or via versa; in such cases data conversation may not be correct as application will consider the data received from API server is string but Form will treat it like date so it may cause data mismatch or unknown errors.

      JSON payload provided is processed as case sensitive and all the key name provided are processed with same case as given. i.e “id”:”int” application will look for key with exact name case “id” and will not be able to process if the data received like “Id” or “ID” etc.

    6. Save the connection and it will appear in Solution's Data Connections.

Editing Data Connection (REST API):

If the Data Connection is in use, only the following properties will be editable.

  • URL

  • Request/Response Headers

Step 3: Mapping of API Solution Data Connection with Form Fields

This step is for mapping the API solution Data Connection’s Data fields with Form fields. It is same as mapping of Web Service or Reference Data connection fields with Form fields.

Below are the steps for mapping of API Solution data connection with Form fields:

  1. Right click on Solution Data connection and choose option Create Form Fields.

  2. In Field Mapping dialog provide below details:

    1. Description: A text note for this mapping.

    2. Group Name: Group name for Form schema fields. All Form fields will be created within this group only.

    3. Web Service Name: A Mapping Name which will be used in Form control or plugins.

    4. Click Next on this dialog.

  3. The Field Mapping Parameters dialog will show all API Solution Data connection fields and Form fields, similar to what is shown for Web Service field mapping dialog.

  4. Review or change the form field type or max length as per requirement.

  5. Click OK to complete the mapping.

Mapping any Schema Field with different type of Form Field should be done in Field Mapping dialog. Changing the Form Field Type from Properties would not change the Data Type in WSDL.

For example:

In case of some GET API method there is a Date Field in Output Schema and its Data Type is String. The user should select Date Type in the Field Mapping dialog.

Note: Mapping the Datepicker to Text Field and then changing the Type to Date from Field Properties will not show the expected results.

Step 4: Design the Form

Design the Form with the fields created and mapped to API Solution Data connection. Also put Form controls (i.e. Web Service, lookup, query or dropdown) which will execute the API Data connection.

  1. Design the Form fields on Form View.

  2. Place the Web Service and Button control on Form view. Configure the Web service control and button control to run the API solution data connection upon clicking this button.

  3. Deploy the solution.

Note: API Solution Data connection will be on same design of other Data connections and can be used with supported Form controls and Plugins.

Step 5: Test the API Solution data connection

Launch the form and run the API Solution Data connection.

  1. Launch the Form.

  2. Click on the configured button to run the API Solution Data connection.

  3. Form will execute the API and will show the response data on mapped Form fields.

Sample API that returns products

API Specification

API with end point "http://globalsystem/api/Product" returns products in JSON format using HTTP verb / operation GET. And API can be accessed with provided key code that should be sent over request header in key name accesskey. API URL end point has base address for all APIs and also specific URL part to return products. i.e. Base URL part is: "http://globalsystem/api" and Product URL part is "/Product". This API returns one or more products. Below is an example:

API response displaying details of two products. It’s an array of JSON.

[  {
"id": 1,
"name": "100-100",
"productType": "A1",
"weightUnit": "W1",
"netWeight": 90,
"grossWeight": 100,
"validityStartDate": "2020-10-03T10:28:45.892275+05:30"
},
{
"id": 2,
"name": "100-200",
"productType": "A1",
"weightUnit": "W1",
"netWeight": 100,
"grossWeight": 150,
"validityStartDate": "2019-08-30T10:28:46.3904638+05:30"
}
]

Step 1:

  1. Add a new Connection either at App or Global level with base URL: "http://globalsystem/api" and with authentication type as HTTP Header i.e. add a header of Key name accesskey and value should be the valid access key as received from system. Give the Connection name as "GlobalSystemAPI".

Step 2:

  1. Create a new Solution and add REST API Data connection on connection name "GlobalSystemAPI" as created in step1.

  2. Set Name of this Data Connection as "conProductGlobalSystem".

  3. Set the API URL to Product API by adding URL part "/Product" using URL builder.

  4. Set operation GET.

  5. Do not need to set any input schema, as API doesn't expect any payload.

  6. Set the Output schema of one product only as connection just needs the schema and not exact output with multiple product’s data. Set the field type (Data type), expected to be in composer Form field in it. There are two ways of adding the schema details to your API. Either save this schema to file and then browse the file OR put the schema directly as text. Below is the schema example (Array of products)

    Schema Example

    [
    {
    "id": “int”,
    "name": "string",
    "productType": "string",
    "weightUnit": "string",
    "netWeight": “decimal”,
    "grossWeight": “decimal”,
    "validityStartDate": "date"
    }
    ]
    Note: Above schema is of an array of data, that will be returned as response by API. Also this is standard JSON format specification. It also specifies each field type that composer will use when creating Form fields
    Note: If a particular Key's value in above schema expects multiple values to be returned (an Array of values which are comma separated), this is also handled, and the existing Data types will suffice that purpose. Example of an Array value received as a response for a ‘key’ in the schema can be as: [“value_1”, “value_2”, “value_3”], which can be considered as a data of Data type "string".
  7. Save the connection.

Step 3: Mapping of API data connection with form fields.

  1. Right click on the above created connection "conProductGlobalSystem" in solution tree and choose "Create Form fields". Give this mapping / webservice name "ProductGlobalSystemWS" and follow the steps and it will create the Form fields.

Step 4: Design the form.

  1. Place the form fields created in step 3 in a Form View.

  2. Add a Button control and give it label "Get Products".

  3. Add a Web service control and select the mapping / webservice name "ProductGlobalSystemWS" and also configure it to run on "invoked by button" and select the button added above.

  4. Deploy the solution.

Note:

  • Request URL from Solution Field is not supported in Form templates directly . User needs to create a draft or task to use it.

  • In case of Form Controls like, Query, Lookup, Dropdown, PR, only outermost section of the schema will be available. Hence, data connections will show only outermost set of fields as columns.

Step 5: Test the REST API Connection.

  1. Launch the Form Template and click on button Get Products, it will get all products and the result should be visible in a table.

DateTime handling in REST APIs integration :

POST/PATCH/PUT Operation

Case-1 A>Posting Date using Date-Picker Control

When using Date-picker control, user needs to enter date in format as set in Date-picker control irrespective of Date Format(ISO/Ticks) set in Rest API DC

Case-1 B>Time part in Date-Picker Control

Time Part is lost when posting using Date-picker control.

Case-2 A>Posting Date using TextField

When using Textfield, for example Schema has date field, but on Create field mapping window, date field is mapped to Textfield type. Here correct format as accepted by API needs to be set.

• For Ticks - user needs to enter value in Ticks format. Example - /Date(1595808000000)/ .

• For ISO - User needs to enter date as per ISO format . Example – yyyy-mm-dd

Case-2 B>Time part and TimeZone using TextField

Using Textfield , Time Part will not be lost. Also, Timezone will be respected, if Date value is provided along with offset. Example - Providing value like 2021-03-31T01:01:13.8366463+05:30 will post the date in system along with Time Zone.

GET Operation

Case-1 A> Getting Date in Date-Picker control

Here Date will be set as per Date-picker format irrespective of Date Format(Ticks/ISO) set in Rest API Data Connection.

Case- 1 B> Time Part and TimeZone

Time part will be lost. Date will always be returned in UTC .

Case-2 A->Getting Date in Textfield

Here date will be set as per Date Format in Rest API Data Connection. Example -For Ticks , date will be set as /Date(1595808000000)/ and for ISO , date will be set as yyyy-mm-dd hh:mm:ss

Case-2 B-> Time part and TimeZone using TextField

Date will always be returned in UTC timezone.

Example- If date was posted like 2021-03-31T00:00:00.0000000+05:30 (Indian Time Zone), then on GET operation , Date will be returned as 2021-03-30 ( i.e. UTC time zone)