Calling a REST API Web Service in Form Script

Calling a REST API Web Service in Form Script

This article will walk you through how to call a Web Service in your Form via the Field2Base JavaScript Library.

To initialize a call, you will need to assign the endpoint for your Web Services provider.
  1. WebServices.startRestService(Endpoint, Method);
where
Endpoint: Web Services provider URI
Method: GET, POST

You can add an HtmlHeader if Authorization or other information is required from your Web Services provider.
  1. WebServices.addHtmlHeader(Header, Value);
where
Header: Header Name (ex: Authorization)
Value: Header Value (ex: Basic Token)
Note: Mobile Forms currently only support Basic authentication.

You can also add a parameter to your API request.
  1. WebServices.addParameters(Key, Value);
where
Key: Parameter Key (ex: ID)
Value: Parameter Value (ex: 5)
 

Sample Code

  1. WebServices.startRestService("https://fieldconnect.field2base.com/v2/api/users", "GET");
  2. WebServices.addHtmlHeader("Authorization", "Authentication CompanyID:Username:Password:API_Token);
  3. WebServices.call("handleUserList");

Result
  1.  {
  2.       "UserKey": "aaaaaaaa-e0b8-4bd0-8553-ac46bf854fad",
  3.       "UserName": "HowardChen",
  4.       "EnableWebAccess": true,
  5.       "Password": null,
  6.       "PasswordNeverExpires": false,
  7.       "ForcePasswordChangeOnLogin": null,
  8.       "FirstName": "Howard",
  9.       "MiddleName": null,
  10.       "LastName": "Chen",
  11.       "Phone": "9194628500x261",
  12.       "Fax": null,
  13.       "Email": "howard-chen@field2base.com",
  14.       "Projects": [
  15.          "bbbbbbbb-eb1a-44b6-8b8a-5aeb661ffb97",
  16.          "cccccccc-f475-44a9-a8df-8502c54e3de2"
  17.       ],
  18.       "Groups": [],
  19.       "PrefersPDFAttachments": null,
  20.       "OptionalRecipient": null
  21.    }
  
Once you have called a Web Service, you will need to define a function that handles the result of that call.
  1. WebServices.call("handleUserList");

The handleUserList is a JavaScript function that handles the return of your RESTful call.
The Web Services call will return a string(result) that contains the JSON data as seen above.
To be able to parse data, you need to use use eval() to convert the result into an JavaScript Object.
We can get the current Folder by using Field2Base.getProjectId(), then match each of the returned User's Folder records into userList[] array. Finally, populate the array to a Datasource region in the Form to create a drop-down with Users for the Folder .
  1. Form.getRegion("Page1@UserName").setDatasourceList(userList);

Sample code for the handleUserList function
  1. function handleUserList(result) {
  2.       var projectID = Field2Base.getProjectId();
  3.       var username = Field2Base.getUsername();
  4.       Form.getRegion("Page1@projectID").setValue(projectID);
  5.       var resultObj = eval(result);
  6.       var userList = [];
  7.       for (var i=0; i < resultObj.length; i++)
  8.       {
  9.             if(resultObj[i].UserName == username) continue; // Skip current user
  10.             for(var j=0; j< resultObj[i].Projects.length; j++) {
  11.                   if(resultObj[i].Projects[j] == projectID) {
  12.                         userList.push(resultObj[i].UserName);  // If project ID matched, push into userList array
  13.                         break;
  14.                   }
  15.             }
  16.       }
  17.       Form.getRegion("Page1@UserName").setDatasourceList(userList);
  18.       Form.getRegion("Page1@msg").clearValue()
  19. }

    • Related Articles

    • Region Types

      Overview Forms Designer offers various types of Regions that to allow you (the Form Designer) to customize each Region for specific content. Each Region Type has unique properties and is designed to accept a certain type of input in the Form. For ...
    • How to Clone a Form

      Overview There are situations where you may want to publish the same Form twice for use with two different groups of Users. For example, if you don't want the two groups to be able to see each others versions of essentially the same Form, then you ...
    • Forms Designer Quick Start Guide

      Overview Field2Base Forms Designer is the proprietary software application that allows your existing Forms to be quickly converted to an active, online, smart Form available to your end users via our Mobile Device and Web-based Applications. This ...
    • Creating Regions

      Overview A Region is a field on your company's Form. Regions are the individual fields you define on top of the Form background image and allow the user to provide necessary and relevant data. Regions come in all shapes and sizes, including include ...
    • Creating Buttons

      Overview Buttons can be used to navigate between pages of the Form, show embedded images, link to a web page or kick off a function from your form script. This article describes how to add buttons to your Forms.   Adding a Button 1. Open your Form in ...