Skip to main content
Version: 8.2

Call a custom web service from the front-end

Level: intermediate

To implement the example:

  1. Implement a custom web service. Read more >>>
  2. Set up the page UI. Read more >>>
  3. Implement the calling of the web service. Read more >>>
Example

Add a Show contact ID button to the base contact page. The button calls the UsrReceiveContactDataService custom web service that uses cookie-based authentication and returns the ID of the current contact by its name. Creatio must display the data in a dialog window.

1. Implement a custom web service​

Instructions: Implement a custom web service that uses cookie-based authentication.

2. Set up the page UI​

  1. Open form page in the Freedom UI Designer.

    For this example, open the Contacts form page in the Customer 360 app.

  2. Add a button.

    For this example, add the button that calls the UsrReceiveContactDataService custom web service.

    To do this:

    1. Add a Button type component to the toolbar of the Freedom UI Designer.

    2. Click and fill out the button properties.

      Element

      Property

      Property value

      Button that calls the UsrReceiveContactDataService custom web service

      Title

      Show contact ID

      Style

      Focus

  3. Save the changes.

3. Implement the calling of the web service​

Configure the business logic in the Client Module Designer. For this example, implement the calling of the web service.

  1. Open the source code of the Freedom UI page. To do this, click .

  2. Add the dependencies. To do this, add @creatio-devkit/common library as a dependency. The library includes the HttpClientService service that sends HTTP requests.

    AMD module dependencies
    /* Declare the AMD module. */
    define("Contacts_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
        return {
            ...
        }
    });

  3. Add an attribute.

    1. Go to the viewModelConfigDiff schema section → values configuration object.
    2. Add a ContactID attribute that stores data of the contact ID.
    viewModelConfigDiff schema section
    viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
        {
            "operation": "merge",
            "path": [
                "attributes",
                ...,
            ],
            "values": {
                ...,
                /* The attribute that stores data of the contact ID. */
                "ContactID": {},
            }
        },
        ...
    ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

  4. Set up how to handle the action executed on button click.

    1. Go to the viewConfigDiff schema section → ShowContactIdButton element.
    2. Bind the sending of the base crt.ShowDialog request to the clicked button event.
    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        /* Button that calls the "UsrReceiveContactDataService" custom web service. */
        {
            "operation": "insert",
            "name": "ShowContactIdButton",
            "values": {
                ...,
                "clicked": {
                    /* Bind the sending of the base request to the "clicked" button event. */
                    "request": "crt.ShowDialog"
                }
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

  5. Implement the base request handler.

    1. Go to the handlers schema section.

    2. Add a custom implementation of the crt.ShowDialog base request handler.

      1. Create an instance of the HTTP client from @creatio-devkit/common.
      2. Specify the URL to retrieve the contact information by the specified name. Use the UsrReceiveContactDataService custom web service.
      3. Retrieve the contact name from the response and specify the contact name in the ContactName variable.
      4. Send a GET request.
      5. Retrieve the contact ID from the response and specify the contact ID in the ContactID attribute.
      6. Create an instance of the dialog service from @creatio-devkit/common.
      7. Display the response from the UsrReceiveContactDataService custom web service in the dialog window.
    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.ShowDialog",
            /* The custom implementation of the system request handler. */
            handler: async (request, next) => {
                /* Create an instance of the HTTP client from "@creatio-devkit/common." */
                const httpClientService = new sdk.HttpClientService();
                /* Specify the URL to retrieve the contact information by the specified name. Use the "UsrReceiveContactDataService" web service. */
                const endpoint = "/rest/UsrReceiveContactDataService/GetContactIdByName?Name=";
                /* Retrieve the contact name from the response and specify the contact name in the "ContactName" variable. */
                const ContactName = await request.$context.PDS_Name_bckhanw;
                /* Send a GET request. The HTTP client converts the response body from JSON to a JS object automatically. */
                const response = await httpClientService.get(`${endpoint}`+ ContactName);
                /* Retrieve the contact ID from the response and specify the contact ID in the "ContactID" attribute. */
                request.$context.ContactID = response?.body?.GetContactIdByNameResult;
                /* Create an instance of the dialog service from "@creatio-devkit/common." */
                const dialogService = new sdk.DialogService();
                /* Display the response from the "UsrReceiveContactDataService" web service in the dialog window. */
                const result = await dialogService.open({
                    message: request.$context.ContactID,
                    actions: [
                        {
                            key: 'Yes',
                            config: {
                                color: 'primary',
                                caption: 'Close',
                            }
                        },
                    ]
                });
                /* Call the next handler if it exists and return its result. */
                return next?.handle(request);
            },
        },
    ] /**SCHEMA_HANDLERS*/,

  6. Save the changes.

View the result​

  1. Open the Contacts section.
  2. Open a contact that has an arbitrary name. For example, "Alice Phillips."
  3. Click Show contact ID.

As a result, Creatio will display the dialog window that includes the ID of the current contact. View the result >>>

Source code​

namespace Terrasoft.Configuration.UsrReceiveContactDataServiceNamespace {
    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 UsrReceiveContactDataService: BaseService {

        /* The method that returns the contact ID by the contact name. */
        [OperationContract]
        [WebInvoke(Method = "GET", 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 the following option.
                result = entities[0].GetTypedColumnValue<string>(colId.Name); */
            }
            /* Return the results. */
            return result;
        }
    }
}

Resources​

Package with example implementation