Call a custom web service from the front-end
Add a button that calls a custom web service to the contact add page. Display the response returned by the web service in a dialog box.
1. Create a custom web service
This example uses the UsrCustomConfigurationService custom web service. Learn more about developing the service in a separate article: Develop a custom web service that uses cookie-based authentication.
Change the Method parameter of the WebInvoke attribute in the UsrCustomConfigurationService custom web service to POST.
View the source code of the custom web service the example uses below.
namespace Terrasoft.Configuration.UsrCustomConfigurationServiceNamespace {
using System;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.ServiceModel.Activation;
using Terrasoft.Core;
using Terrasoft.Web.Common;
using Terrasoft.Core.Entities;
[ServiceContract]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]
public class UsrCustomConfigurationService: BaseService {
/* The method that returns the contact ID by the contact name. */
[OperationContract]
[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped,
ResponseFormat = WebMessageFormat.Json)]
public string GetContactIdByName(string Name) {
/* The default result. */
var result = "";
/* The EntitySchemaQuery instance that accesses the Contact database table. */
var esq = new EntitySchemaQuery(UserConnection.EntitySchemaManager, "Contact");
/* Add columns to the query. */
var colId = esq.AddColumn("Id");
var colName = esq.AddColumn("Name");
/* Filter the query data. */
var esqFilter = esq.CreateFilterWithParameters(FilterComparisonType.Equal, "Name", Name);
esq.Filters.Add(esqFilter);
/* Retrieve the query results. */
var entities = esq.GetEntityCollection(UserConnection);
/* If the service receives data. */
if (entities.Count > 0) {
/* Return the "Id" column value of the first query result record. */
result = entities[0].GetColumnValue(colId.Name).ToString();
/* You can also use this option:
result = entities[0].GetTypedColumnValue<string>(colId.Name); */
}
/* Return the results. */
return result;
}
}
}
2. Create a replacing contact record page
-
Go to the Configuration section and select a custom package to add the schema.
-
Click Add → Replacing view model on the section list toolbar.
/scr_add_replacing_module.png)
-
Select the
ContactPageV2package's Display schema – Contact card view model schema to replace in the Parent object property. After you confirm the parent object, Creatio will populate the other properties.
-
Enable the
ServiceHelpermodule as a dependency in the declaration of the record page module. Learn more about the module dependencies in a separate article: AMD concept. Module definition.
3. Add the button to the contact record page
-
Click the
/scr_add_button.png)
button in the Localizable strings block of the properties panel and fill out the localizable string properties:- Set Code to "GetServiceInfoButtonCaption."
- Set Value to "Call service."
-
Add the button handler.
Call the web service using the
callService()method of theServiceHelpermodule. Pass the following parameters of thecallService()function:UsrCustomConfigurationService, the name of the custom web service classGetContactIdByName, the name of the custom web service method to call- the callback function in which to process the service output
serviceData, the object that contains the initialized incoming parameters for the custom web service method- the execution context
View the source code of the
ContactPageV2replacing view model below.ContactPageV2define("ContactPageV2", ["ServiceHelper"],function(ServiceHelper) {
return {
/* The name of the record page object's schema. */
entitySchemaName: "Contact",
details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
/* The methods of the record page's view model. */
methods: {
/* Check if the [Full name] page field is filled out. */
isContactNameSet: function() {
return this.get("Name") ? true : false;
},
/* The button click handler method. */
onGetServiceInfoClick: function() {
var name = this.get("Name");
/* The object that initializes the incoming parameters for the service method. */
var serviceData = {
/* The name of the property matches the name of the service method's incoming parameter. */
Name: name
};
/* Call the web service and process the outcome. */
ServiceHelper.callService("UsrCustomConfigurationService", "GetContactIdByName", function(response) {
var result = response.GetContactIdByNameResult;
this.showInformationDialog(result);
}, serviceData, this);
}
},
diff: /**SCHEMA_DIFF*/[
/* The properties to add the custom button to the page. */
{
/* Add the element to the page. */
"operation": "insert",
/* The name of the parent control to add the button. */
"parentName": "LeftContainer",
/* Add the button to the control collection of the parent whose metaname is specified in parentName. */
"propertyName": "items",
/* The name of the button to add. */
"name": "GetServiceInfoButton",
/* The additional field properties. */
"values": {
/* Set the type of the added element to button. */
itemType: Terrasoft.ViewItemType.BUTTON,
/* Bind the button caption to the localizable schema string. */
caption: {bindTo: "Resources.Strings.GetServiceInfoButtonCaption"},
/* Bind the button click handler method. */
click: {bindTo: "onGetServiceInfoClick"},
/* Bind the button availability property. */
enabled: {bindTo: "isContactNameSet"},
/* Set up the field location. */
"layout": {"column": 1, "row": 6, "colSpan": 2, "rowSpan": 1}
}
}
]/**SCHEMA_DIFF*/
};
}); -
Click Save on the Designer's toolbar.
Outcome of the example
As a result, Creatio will display the Call service button on the contact page after you refresh the Creatio web page. Click the button to call the GetContactIdByName method of the UsrCustomConfigurationService custom web service. The method returns the ID of the current contact.
