Create a new record using DataService

Level: advanced

To implement the example:

1. Set up the page UI. Read more >>>
2. Set up how to create a record. Read more >>>

Example

Add an Add demo contact button to the Contacts section. Using the Model class, the button must add the demo contact that contains the following data:

• Full name – "John Best."
• Full job title – "Developer."
• Business phone – "+12 345 678 00 00."

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 sdkAddDemoContactViaInsertQuery user-made package.

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

   For this example, change the current package to sdkAddDemoContactViaInsertQuery 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 adds a demo contact.

   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 adds a demo contact	Title	Add demo contact
      	Style	Focus

7. Save the changes.

2. Set up how to create a record

Configure the business logic in the Client Module Designer. For this example, set up how to create a record.

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 → UsrAddDemoContactButton element.
   2. Bind the sending of the custom usr.CreateDemoContactRequest request to the clicked button event.
   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       /* Button that adds a demo contact. */
       {
           "operation": "insert",
           "name": "UsrAddDemoContactButton",
           "values": {
               ...,
               "clicked": {
                   /* Bind the sending of the custom request to the "clicked" button event. */
                   "request": "usr.CreateDemoContactRequest"
               }
           },
           ...
       }
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

4. Implement the custom request handler.

   For this example, implement the custom usr.CreateDemoContactRequest 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. Specify values of the contact columns. Fill out the Full name, Full job title, Business phone fields using "John Best," "Developer," "+12 345 678 00 00," respectively. View the ID of the "Developer" job in the Job titles lookup. For this example, the ID is "11d68189-ced6-df11-9b2a-001d60e938c6."
   handlers schema section

   handlers: /**SCHEMA_HANDLERS*/[
       {
           request: "usr.CreateDemoContactRequest",
           /* The implementation of the custom request handler. */
           handler: async () => {
               /* Create an instance of the "Contact" model from "@creatio-devkit/common." */
               const model = await sdk.Model.create('Contact');
               /* Specify values of the contact columns. */
               const response = await model.insert({
                   Name: 'John Best',
                   Job: '11d68189-ced6-df11-9b2a-001d60e938c6',
                   MobilePhone: '+12 345 678 00 00'
               });
   
               if (response) {
                   /* If a contact is created, display the message box. */
                   alert("'John Best' demo contact has been created.");
               } else {
                   /* If a contact is not created, display the message box. */
                   alert("'John Best' demo contact has not been created. Check the business logic that creates a demo contact.");
               }
   
               /* 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 Add demo contact.

As a result, Creatio will create a demo contact and populate the Full name, Full job title, Business phone fields using the "John Best," "Developer," "+12 345 678 00 00," respectively. 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 adds a demo contact. */
            {
                "operation": "insert",
                "name": "UsrAddDemoContactButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(UsrAddDemoContactButton_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.CreateDemoContactRequest"
                  }
                },
                "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.CreateDemoContactRequest",
                /* The implementation of the custom request handler. */
                handler: async () => {
                    /* Create an instance of the "Contact" model from "@creatio-devkit/common." */
                    const model = await sdk.Model.create('Contact');
                    /* Specify values of the contact columns. */
                    const response = await model.insert({
                        Name: 'John Best',
                        Job: '11d68189-ced6-df11-9b2a-001d60e938c6',
                        MobilePhone: '+12 345 678 00 00'
                    });

                    if (response) {
                        /* If a contact is created, display the message box. */
                        alert("'John Best' demo contact has been created.");
                    } else {
                        /* If a contact is not created, display the message box. */
                        alert("'John Best' demo contact has not been created. Check the business logic that creates a demo contact.");
                    }
        
                    /* 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