Read records using DataService

Level: advanced

To implement the example:

1. Set up the page UI. Read more >>>
2. Set up how to read records. Read more >>>

Example

Add a Receive summarized contacts button to the Contacts section. Using the Model class, the button must receive the following data of all contacts:

• Full name
• Number of activities that contains aggregated number of contact activities.

Display the result in the browser console.

1. Set up the page UI

1. Open the Customer 360 app in the No-Code Designer.

2. Open the Advanced settings tab in the No-Code Designer. To do this, click in the top right → "Application management" → "Application Hub" → Customer 360 app → "Advanced settings."

3. Create a user-made package to add the report. To do this, click → Create new package → fill out the package properties → Save.

   For this example, create the sdkReadContactsViaSelectQuery user-made package.

4. Change the current package. Instructions: Change the current package.

   For this example, change the current package to sdkReadContactsViaSelectQuery user-made package.

5. Open list page in the Freedom UI Designer.

   For this example, open the Contacts list page.

6. Add a button.

   For this example, add the button that receives summarized contact data.

   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 receives summarized contact data	Title	Receive summarized contacts
      	Style	Focus

7. Save the changes.

2. Set up how to read records

Configure the business logic in the Client Module Designer. For this example, set up how to read records.

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 Model class to access the data source.

   AMD module dependencies

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

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

   1. Go to the viewConfigDiff schema section → UsrReceiveContactsButton element.
   2. Bind the sending of the custom usr.ReceiveContactsRequest request to the clicked button event.
   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       /* Button that receives summarized contact data. */
       {
           "operation": "insert",
           "name": "UsrReceiveContactsButton",
           "values": {
               ...,
               "clicked": {
                   /* Bind the sending of the custom request to the "clicked" button event. */
                   "request": "usr.ReceiveContactsRequest"
               }
           },
           ...
       }
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

4. Implement the custom request handler.

   For this example, implement the custom usr.ReceiveContactsRequest request handler.

   1. Go to the handlers schema section.
   2. Create an instance of the model from @creatio-devkit/common. For this example, create an instance of the Contact model.
   3. Load required data of the model.
   4. Add columns to the query. For this example, add Full name, Number of activities using the Name, ActivitiesCount codes respectively.
   5. Receive required data from the collection.
   handlers schema section

   handlers: /**SCHEMA_HANDLERS*/[
       {
           request: "usr.ReceiveContactsRequest",
           /* The implementation of the custom request handler. */
           handler: async (request, next) => {
               /* Create an instance of the "Contact" model from "@creatio-devkit/common." */
               const model = await sdk.Model.create('Contact');
   
               /* Load required data of the "Contact" model. */
               const result = await model.load({
   
                   /* Add columns to the query. */
                   attributes: [
                       {
                           name: 'Name',
                           path: 'Name',
                       },
                       {
                           name: 'ActivitiesCount',
                           path: '[Activity:Contact].Id',
                           type: 'aggregation',
                           aggregationConfig: {
                               aggregationFunction: 'Count',
                           }
                       }
                   ],
                   parameters: [],
                   loadOptions: {},
               });
   
               /* Query result. */
               var message = "";
   
               /* Receive required data from the collection. */
               result.forEach(function(item) {
                   message += `Full name: ${item.Name}. Number of activities: ${item.ActivitiesCount}\n`;
               });
   
               /* Display the result in the browser console. */
               console.info(message);
   
               /* Call the next handler if it exists and return its result. */
               return next?.handle(request);
           },
       }
   ] /**SCHEMA_HANDLERS*/,

5. Save the changes.

View the result

1. Open the Contacts section.
2. Click Receive summarized contacts.

As a result, Creatio will display Full name and Number of activities data of all contacts in the browser console. View the result >>>

Source code

Contacts_ListPage

/* Declare the AMD module. */
define("Contacts_ListPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            /* Button that receives summarized contact data. */
            {
                "operation": "insert",
                "name": "UsrReceiveContactsButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(UsrReceiveContactsButton_caption)#",
                    "color": "accent",
                    "disabled": false,
                    "size": "large",
                    "iconPosition": "only-text",
                    "visible": true,
                    "clicked": {
                        /* Bind the sending of the custom request to the "clicked" button event. */
                        "request": "usr.ReceiveContactsRequest"
                    }
                },
                "parentName": "ActionButtonsContainer",
                "propertyName": "items",
                "index": 0
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG_DIFF*/[]/**SCHEMA_MODEL_CONFIG_DIFF*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "usr.ReceiveContactsRequest",
                /* The implementation of the custom request handler. */
                handler: async (request, next) => {
                    /* Create an instance of the "Contact" model from "@creatio-devkit/common." */
                    const model = await sdk.Model.create('Contact');

                    /* Load required data of the "Contact" model. */
                    const result = await model.load({

                        /* Add columns to the query. */
                        attributes: [
                            {
                                name: 'Name',
                                path: 'Name',
                            },
                            {
                                name: 'ActivitiesCount',
                                path: '[Activity:Contact].Id',
                                type: 'aggregation',
                                aggregationConfig: {
                                    aggregationFunction: 'Count',
                                }
                            }
                        ],
                        parameters: [],
                        loadOptions: {},
                    });

                    /* Query result. */
                    var message = "";

                    /* Receive required data from the collection. */
                    result.forEach(function(item) {
                        message += `Full name: ${item.Name}. Number of activities: ${item.ActivitiesCount}\n`;
                    });

                    /* Display the result in the browser console. */
                    console.info(message);

                    /* Call the next handler if it exists and return its result. */
                    return next?.handle(request);
                },
            }
        ] /**SCHEMA_HANDLERS*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
    };
});

---

Resources

Package with example implementation