Set up the quick filters section block

Create a schema of the replacing section view model 

1. Go to the Configuration section and select a custom package to add the schema.

2. Click Add → Replacing view model on the section list toolbar.

   

3. Fill out the schema properties.

   • Set Code to "ContractSectionV2".
   • Set Title to "Page schema - "Contracts" section".
   • Set Parent object to "ContractSectionV2".
   

4. Add localizable strings that contain filter names.

   1. Add a localizable string that contains the name of the filter by owner.

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

      2. Fill out the localizable string properties.

         • Set Code to "OwnerFilterCaption".
         • Set Value to "Owner".
         
      3. Click Add to add a localizable string.

   2. Add a localizable string that contains the name of the filter by period.

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

      2. Fill out the localizable string properties.

         • Set Code to "PeriodFilterCaption".
         • Set Value to "Period".
         
      3. Click Add to add a localizable string.

5. Implement the filtering behavior. To do this, implement the initFixedFiltersConfig() method in the methods property. In the method, create a configuration object with the array of PeriodFilter and OwnerFilter filters, assign the object link to the fixedFiltersConfig attribute of the view model.

   View the source code of the replacing view model schema of the section below.

   ContractSectionV2

   define("ContractSectionV2", ["BaseFiltersGenerateModule"], function(BaseFiltersGenerateModule) {
       return {
           /* The name of the section object schema. */
           entitySchemaName: "Contract",
           /* The methods of the section view model. */
           methods: {
               /* Initialize the fixed filters. */
               initFixedFiltersConfig: function() {
                   /* Create a configuration object. */
                   var fixedFilterConfig = {
                       /* Specify the section object schema as the object schema for the fixed filters. */
                       entitySchema: this.entitySchema,
                       /* The array of filters. */
                       filters: [
                           /* The period filter. */
                           {
                               /* The filter name. */
                               name: "PeriodFilter",
                               /* The filter caption. */
                               caption: this.get("Resources.Strings.PeriodFilterCaption"),
                               /* Set the data type to data. */
                               dataValueType: this.Terrasoft.DataValueType.DATE,
                               /* The start date of the filtering period. */
                               startDate: {
                                   /* Filter data from the [Date] column. */
                                   columnName: "StartDate",
                                   /* Set the default value to the start of the current week. */
                                   defValue: this.Terrasoft.startOfWeek(new Date())
                               },
                               /* Set the end date of the filtering period to the end of the current week. */
                               dueDate: {
                                   columnName: "StartDate",
                                   defValue: this.Terrasoft.endOfWeek(new Date())
                               }
                           },
                           /* The owner filter. */
                           {
                               /* The filter name. */
                               name: "Owner",
                               /* The filter caption. */
                               caption: this.get("Resources.Strings.OwnerFilterCaption"),
                               /* Filter data from the [Owner] column. */
                               columnName: "Owner",
                               /* Set the default value to the current user contact specified in the system setting. */
                               defValue: this.Terrasoft.SysValue.CURRENT_USER_CONTACT,
                               /* Set the data type to lookup. */
                               dataValueType: this.Terrasoft.DataValueType.LOOKUP,
                               /* The filter. */
                               filter: BaseFiltersGenerateModule.OwnerFilter
                           }
                       ]
                   };
                   /* Assign the link to the created configuration object to the [FixedFilterConfig] attribute. */
                   this.set("FixedFilterConfig", fixedFilterConfig);
               }
           }
       };
   });
   

6. Click Save on the Designer's toolbar.

The outcome of the example 

To view the outcome of the example, refresh the Contracts section page.

As a result, Creatio will display the fixed filters block in the Contracts section. The block will let you filter contracts both by start date and owner.