Set up a detail with fields

Level: advanced

Important

For Financial Services Creatio product lineup, use the BaseFieldsDetail schema of the BaseFinance package to set up details with fields. This package is available only in Financial Services Creatio product lineup.

To use details with fields in CRM Creatio products:

1. Download the sdkFieldsDetailPackage package: download package.
2. Import the package into Creatio. To do this, follow the guide in a separate article: Transfer packages.
3. Add the sdkFieldsDetailPackage package to the dependencies of a custom package.

Example

Implement the Medical documents custom detail with the Number and Series virtual fields. Add the detail to the History tab of the contact page. The value of the Number field cannot be negative. Render the detail field names blue.

1. Create a custom detail

1. Create a custom package and set it as current. Learn more in a separate article: Packages basics.

2. Click to open the System Designer.

3. Go to the System setup block → Detail wizard.

4. Fill out the detail properties:

   • Set Title to "Medical documents."

   • Set How to create detail? to "Create new object."

     Fill out the object properties:

     • Set Title to "Medical document."
     • Set Code to "UsrMedDocument."

     

   As a result, Creatio will add the following schemas to the configuration:

   • The UsrMedDocument schema of the detail object.
   • The UsrSchemac6fd3fd0Detail schema of the Medical documents detail list's view model.
   • The UsrUsrMedDocument4988cee4Page schema of the Medical documents detail record page's view model.

5. Go to the Page tab and set up the detail record page.

6. Set up the detail fields.

   1. Fill out the Contact field of the Lookup type.

      1. Set Title to "Contact."
      2. Set Code to "UsrContact."
      3. Select the Required checkbox.
      4. Set Lookup to "Contact."

      

   2. Fill out the Series field of the String type.

      1. Set Title to "Series."
      2. Set Code to "UsrSeries."
      3. Set Text length to "Text (50 characters)."
      4. Select the Required checkbox.

      

   3. Fill out Number field of the Integer type.

      1. Set Title to "Number."
      2. Set Code to "UsrNumber."
      3. Select the Required checkbox.

      

7. If necessary, modify the position of detail fields.

8. Click Save on the Detail Wizard's toolbar.

As a result, Creatio will modify the UsrUsrMedDocument4988cee4Page configuration schema of the Medical documents detail record page's view model.

2. Set up the custom detail

1. Go to the Configuration section and select a custom package to set as the current package.

2. Open the UsrMedDocument schema of the detail object.

3. Delete the [UsrName] required column in the context menu of the object structure's Columns node.

   

4. Click Publish on the Object Designer's toolbar.

5. Open the UsrSchemac6fd3fd0Detail schema of the Medical documents detail list's view model.

6. Click the button on the properties panel and specify BaseFieldsDetail in the Parent object field. The BaseFieldsDetail schema implements the detail that has fields. By default, the parent object in the Detail Wizard is the schema of a base detail that has a list.

   

7. Add the getDisplayColumns method to the methods property of the detail's view model schema. The method returns the array of column names displayed as fields in the detail.

   View the source code of the UsrSchemac6fd3fd0Detail schema below.

   UsrSchemac6fd3fd0Detail

   define("UsrSchemac6fd3fd0Detail", [], function() {
       return {
           entitySchemaName: "UsrMedDocument",
           details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
           diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
           methods: {
               getDisplayColumns: function() {
                   return ["UsrSeries", "UsrNumber"];
               }
           }
       };
   });

8. Click Save on the Module Designer's toolbar.

3. Add the detail to the section record page

1. Go to the Contacts section and open the contact page.

2. Click View → Open section wizard on the toolbar.

3. Go to the History tab of the Section Wizard workspace and click the New detail button.

4. Fill out the detail parameters.

   • Set Detail to "Medical documents." Creatio will populate the Title and Code fields.

   • Set Where detail column to "Contact."

     Leave other columns as they are.

   

5. Click Save → Section wizard → Save.

As a result, Creatio will add the Medical documents detail to the History tab of the contact page.

4. Add custom detail styles

The view model schema of a detail page does not support visual styles. As such, take the following steps to add the styles:

1. Create a module schema. Define the styles there.
2. Add the style module to the dependencies of the detail module.

1. Create a module schema

1. Go to the Configuration section and select a custom package to set as current.

2. Click Add → Module on the section list toolbar.

   

3. Fill out the following schema properties:

   • Set Code to "UsrMedDocumentRowViewModel."
   • Set Title to "MedDocumentRowViewModel."

   

   Click Apply to apply the properties.

4. Add the source code in the Schema Designer. Create a module description in the source code of the schema. Define the Terrasoft.configuration.UsrMedDocumentRowViewModel class inherited from the Terrasoft.BaseFieldRowViewModel class in the module description.

   UsrMedDocumentRowViewModel

   define("UsrMedDocumentRowViewModel", ["BaseFieldRowViewModel"], function() {
       Ext.define("Terrasoft.configuration.UsrMedDocumentRowViewModel", {
           extend: "Terrasoft.BaseFieldRowViewModel",
           alternateClassName: "Terrasoft.UsrMedDocumentRowViewModel"
       });
       return Terrasoft.UsrMedDocumentRowViewModel;
   });

5. Go to the LESS node of the object structure and set up the needed visual styles of the detail.

   Set up the visual styles of the detail

   .med-document-left-row-container {
       .t-label {
           color: blue;
       }
   }
   .field-detail-row {
       width: 100;
       display: inline-flex;
       margin-bottom: 10px;
   
       .field-detail-row-left {
           display: flex;
           flex-wrap: wrap;
           
           .control-width-15 {
               min-width: 300px;
               width: 50;
               margin-bottom: 5px;
           }
       }
       .field-detail-row-left.singlecolumn {
           width: 50%;
       }
   }

6. Click Save on the Designer's toolbar.

2. Modify the view model schema of the detail

To use the module and its styles in the detail schema:

1. Open the UsrSchemac6fd3fd0Detail schema of the Medical documents detail list's view model.

2. Add the UsrMedDocumentRowViewModel module to the dependencies of the UsrSchemac6fd3fd0Detail schema.

3. Add the following methods that override the base CSS style classes to the definition of the detail schema module:

   • The getRowViewModelClassName() method. Returns the class name for the view model of the record on the detail.
   • The getLeftRowContainerWrapClass() method. Returns the string array of CSS class names. The names are required to generate the view of containers that include the record field signatures.

   View the source code of the modified schema below.

   UsrSchemac6fd3fd0Detail

   define("UsrSchemac6fd3fd0Detail", ["UsrMedDocumentRowViewModel", "css!UsrMedDocumentRowViewModel"], function() {
       return {
           entitySchemaName: "UsrMedDocument",
           details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
           diff: /**SCHEMA_DIFF*/ [], /**SCHEMA_DIFF*/
           methods: {
               getDisplayColumns: function() {
                   return ["UsrSeries", "UsrNumber"];
               },
               getRowViewModelClassName: function() {
                   return "Terrasoft.UsrMedDocumentRowViewModel";
               },
               getLeftRowContainerWrapClass: function() {
                   return ["med-document-left-row-container", "field-detail-row"];
               }
           }
       };
   });

4. Click Save on the Designer's toolbar.

As a result, Creatio will render the field names of the Medical documents detail added to the History tab of the contact page blue.

5. Add validation to the detail field

1. Open the UsrMedDocumentRowViewModel schema of the module.

2. Add a localizable string with the warning about an incorrect Number field value.

   1. Click the button in the context menu of the Localizable strings node.

   2. Fill out the localizable string properties:

      • Set Code to "NumberMustBeGreaterThenZeroMessage."
      • Set Value to "Number must be greater than zero."

      

   3. Click Add to add a localizable string.

   4. Add the UsrMedDocumentRowViewModelResources resource module to the dependencies of the UsrMedDocumentRowViewModel module. This is required for Creatio to display the localizable string value in the front-end.

3. Add the validation logic of the Number field value. To do this, implement the following methods:

   • the validateNumberMoreThenZero() method that contains the validation logic of the field value
   • the setValidationConfig() method that binds the [Number] column to the validateNumberMoreThenZero() validator method.
   • the init() overridden base method that calls the base logic and the setValidationConfig() method

   View the source code of the modified schema below.

   UsrMedDocumentFieldsDetail

   define("UsrMedDocumentRowViewModel", ["BaseFieldRowViewModel", "UsrMedDocumentRowViewModelResources"], function(resources) {
       Ext.define("Terrasoft.configuration.UsrMedDocumentRowViewModel", {
           extend: "Terrasoft.BaseFieldRowViewModel",
           alternateClassName: "Terrasoft.UsrMedDocumentRowViewModel",
           validateNumberMoreThenZero: function(columnValue) {
               var invalidMessage ="";
               if (columnValue < 0) {
                   invalidMessage = resources.localizableStrings.NumberMustBeGreaterThenZeroMessage;
               }
               return {
                   fullInvalidMessage: invalidMessage,
                   invalidMessage: invalidMessage
               };
           },
           setValidationConfig: function() {
               this.addColumnValidator("UsrNumber", this.validateNumberMoreThenZero);
           },
           init: function() {
               this.callParent(arguments);
               this.setValidationConfig();
           }
       });
       return Terrasoft.UsrMedDocumentRowViewModel;
   });

4. Click Save on the Designer's toolbar.

As a result, if you enter a negative value in the Number field, Creatio will display the corresponding warning.

6. Make the detail fields virtual

1. Open the UsrSchemac6fd3fd0Detail schema of the Medical documents detail list's view model.

2. Add the useVirtualRecord() method implementation.

   View the source code of the modified schema below.

   UsrSchemac6fd3fd0Detail

   define("UsrSchemac6fd3fd0Detail", ["UsrMedDocumentRowViewModel", "css!UsrMedDocumentRowViewModel"], function() {
       return {
           entitySchemaName: "UsrMedDocument",
           details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
           diff: /**SCHEMA_DIFF*/ [], /**SCHEMA_DIFF*/
           methods: {
               getDisplayColumns: function() {
                   return ["UsrSeries", "UsrNumber"];
               },
               getRowViewModelClassName: function() {
                   return "Terrasoft.UsrMedDocumentRowViewModel";
               },
               getLeftRowContainerWrapClass: function() {
                   return ["med-document-left-row-container", "field-detail-row"];
               },
               useVirtualRecord: function() {
                   return true;
               }
           }
       };
   });

3. Click Save on the Designer's toolbar.

As a result, if you open the History tab with the Medical documents detail, Creatio will display a virtual record.

---

Resources

Package with example implementation for Financial Services Creatio product lineup

Package with example implementation for CRM Creatio products