Overview
This article will walk you through how to call a Web Service from your Form via the Field2Base JavaScript Library.
Initialization
To initialize a call, you will need to assign the endpoint for your Web Services provider.
- WebServices.startRestService(Endpoint, Method);
where
Endpoint: Web Services provider URI
Method: GET, POST
Authorization
You can add an HtmlHeader if Authorization or other information is required from your Web Services provider.
- WebServices.addHtmlHeader(Header, Value);
where
Header: Header Name (ex: Authorization)
Value: Header Value (ex: Basic Token)
Note: Mobile Forms currently only support Basic authentication.
Parameters
You can also add a parameter to your API request.
- WebServices.addParameters(Key, Value);
where
Key: Parameter Key (ex: ID)
Value: Parameter Value (ex: 5)
Sample Code
- WebServices.startRestService("https://fieldconnect.field2base.com/v2/api/users", "GET");
- WebServices.addHtmlHeader("Authorization", "Basic {CompanyID}:{Username}:{Password}:{API Sync Key});
- WebServices.call("handleUserList");
Result
- {
- "UserKey": "5f6d0589-dad0-4fe1-8acc-7669bcxxxxxx",
- "UserName": null,
- "EnableWebAccess": true,
- "Password": null,
- "PasswordNeverExpires": null,
- "ForcePasswordChangeOnLogin": null,
- "PIN": 123ABC,
- "FirstName": "Test",
- "MiddleName": null,
- "LastName": "User",
- "PhoneCode": null,
- "Phone": null,
- "Email": " test@test.com ",
- "Projects": [
- "1be2fd67-9c0b-40ba-a440-xxxxxxxxxxxx",
- "ed02146a-2ca7-4ce7-980f-xxxxxxxxxxxx",
- "3fec86e5-7069-41e4-966e-xxxxxxxxxxxx"
- ],
- "Groups": [
- "Basic Workflow Approval Group",
- "Basic Workflow Recipient Group",
- ],
- "OptionalRecipient": null,
- "Roles": [
- "Mobile Forms Administrator",
- "Web App User"
- ],
- "PersonnelID": null,
- "PersonnelType": null,
- "JobTitle": null,
- "DefaultLocation": "",
- "DefaultGroup": null,
- "ActivationLimit": null,
- "SendPasswordEmail": null,
- "AllowForgotPasswordToolToResets": true,
- "UserType": "User",
- "LastLogin": "2022-11-23T17:24:21.837",
- "CreationDate": "2021-11-23T17:24:21.837",
- "RequireAlwaysSSO": null
- }
Result Handler
- WebServices.call("handleUserList");
The handleUserList is a JavaScript function that handles the result 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 the data, you need to use eval() to convert the result into a JavaScript Object.
In this example, we create the userList[] array with the usernames for all Users in the Approval Group. Then, we populate the array to a Datasource region in the Form to create a drop-down with all the Users who are in the specified group.
- function handleUserList(result) {
- var resultObj = eval(result);
- var userList = [];
- for (var i = 0; i < resultObj.length; i++) {
- for (var j = 0; j < resultObj[i].Groups.length; j++) {
- View.showDialog(resultObj[i].Groups, 0)
- if (resultObj[i].Groups[j] == '1629') {
- userList.push(resultObj[i].UserName);
- break;
- }
- }
- }
- Form.getRegion("Page1@ApprovalGroupUsers").setDatasourceList(userList);
- }
In this example, the city and state are populated when someone enters a 5 digit zip code into the Zip Region.
- function Page1_Zip_ValueChanged(objArgs) {
- var zipCode = objArgs.getRegion().getValue();
- if (zipCode.length == 5) {
- WebServices.startRestService("http://api.zippopotam.us/us/" + zipCode, "GET");
- WebServices.call("handleZipResult");
- }
- }
- function handleZipResult(result) {
- var ResultObj = eval(result);
- var state =ResultObj.places[0]["state abbreviation"];
- var city = ResultObj.places[0]["place name"];
- Form.getRegion("Page1@State").setValue(state);
- Form.getRegion("Page1@City").setValue(city);
- }