Skip to main content
Version: 8.1

Set up the display condition of a field on a page

Level: intermediate
Example

Set up the display condition for the Sick leave, days left field on the record page of the custom Requests section. Display the field for requests that originate from employees, i. e., requests whose Originator type field is set to "Employee."

1. Set up the page UI​

  1. Create a custom Requests app based on the Records & business processes template. To do this, follow the guide in the user documentation: Create a custom app.

  2. Open the Requests form page page in the working area of the Requests app page.

    The Requests form page page includes the Name field by default.

  3. Add a field that contains the request originator type.

    1. Add a Dropdown type field to the working area of the Freedom UI Designer.

    2. Click in the action panel of the Freedom UI Designer and fill out the field properties in the setup area.

      • Set Title to "Originator type."
      • Set Code to "UsrOriginatorType."
      • Select "Contact type" in the Lookup property.

  4. Add a field that contains the number of sick days left.

    1. Add a Number type field to the working area of the Freedom UI Designer.

    2. Click in the action panel of the Freedom UI Designer and fill out the field properties in the setup area.

      • Set Title to "Sick leave, days left."
      • Set Code to "UsrSickDaysLeft."

  5. Click in the action panel of the Freedom UI Designer. After you save the page settings, Creatio opens the source code of the Freedom UI page.

2. Set up the field display condition​

Configure the business logic in the Client Module Designer. For this example, set up the field display condition.

  1. Add an IsRequestFromEmployee attribute that stores data about the contact type from which the request originates to the viewModelConfigDiff schema section.

    viewModelConfigDiff schema section
    viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* The attribute that stores the request originator type. */
            "IsRequestFromEmployee": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,

  2. Bind the visible property of the UsrSickDaysLeft element to the IsRequestFromEmployee model attribute in the viewConfigDiff schema section. If the request originates from an Employee type contact, display the Sick leave, days left field. Hide the field for other contact types.

    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        {
            "operation": "insert",
            "name": "UsrSickDaysLeft",
            "values": {
                ...,
                /* The property that flags the field as visible. Bound to the IsRequestFromEmployee attribute. */
                "visible": "$IsRequestFromEmployee"
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

  3. Add a custom implementation of the crt.HandleViewModelAttributeChangeRequest system query handler to the handlers schema section. Run the handler when the value of any attribute changes, including changes made after loading the attribute values from the data source. The handler checks the UsrOriginatorType attribute value. If the new attribute value refers to the "Employee" value of the Contact type lookup, set the IsRequestFromEmployee attribute value to true, otherwise set it to false. The unique ID of the Employee type contact set as the employeeOriginatorTypeId constant is stored in the corresponding string of the Contact type lookup record. In this example, the ID of the Employee type contact is "60733efc-f36b-1410-a883-16d83cab0980."

    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelAttributeChangeRequest",
            /* The custom implementation of the system query handler. */
            handler: async (request, next) => {
                /* Check the request originator type. */
                if (request.attributeName === 'UsrOriginatorType') {
                    const employeeOriginatorTypeId = '60733efc-f36b-1410-a883-16d83cab0980';
                    const selectedOriginatorType = await request.$context.UsrOriginatorType;
                    const selectedOriginatorTypeId = selectedOriginatorType?.value;
                    /* If the request originates from an employee, set the IsRequestFromEmployee to true. */
                    request.$context.IsRequestFromEmployee = selectedOriginatorTypeId === employeeOriginatorTypeId;
                }
                /* Call the next handler (if it exists) and return its result. */
                return next?.handle(request);
            }
        }
    ]/**SCHEMA_HANDLERS*/,

  4. Click Save on the Client Module Designer's toolbar.

Outcome of the example​

To view the outcome of the example:

  1. Open the Requests app page and click Run app.
  2. Click New on the Requests app toolbar.
  3. Enter "Sick leave" in the Name field.
  4. Select "Employee" in the Originator type field.

As a result, Creatio will display the Sick leave, days left field on the page of the request that originates from an Employee type contact.

Creatio will not display the Sick leave, days left field for requests that originate from other contact types, e. g., Customer.

Source codes​

UsrAppRequests_FormPage
/* AMD module declaration. */
define("UsrAppRequests_FormPage", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "insert",
                "name": "UsrName",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Input",
                    "label": "$Resources.Strings.UsrName",
                    "control": "$UsrName"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 0
            },
            {
                "operation": "insert",
                "name": "UsrOriginatorType",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.ComboBox",
                    "loading": false,
                    "control": "$UsrOriginatorType",
                    "label": "$Resources.Strings.UsrOriginatorType",
                    "items": "$UsrOriginatorType_List",
                    "attributeName": "UsrOriginatorType",
                    "isAddAllowed": true,
                    "showValueAsLink": true
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 1
            },
            {
                "operation": "insert",
                "name": "UsrSickDaysLeft",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 3,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.NumberInput",
                    "control": "$UsrSickDaysLeft",
                    "label": "$Resources.Strings.UsrSickDaysLeft",
                    /* The property that flags the field as visible. Bound to the IsRequestFromEmployee attribute. */
                    "visible": "$IsRequestFromEmployee"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 2
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "UsrName": {
                    "modelConfigDiff": {
                        "path": "PDS.UsrName"
                    }
                },
                "Id": {
                    "modelConfigDiff": {
                        "path": "PDS.Id"
                    }
                },
                "UsrOriginatorType": {
                    "modelConfigDiff": {
                        "path": "PDS.UsrOriginatorType"
                    }
                },
                "UsrOriginatorType_List": {
                    "isCollection": true,
                    "viewModelConfigDiff": {
                        "attributes": {
                            "value": {
                                "modelConfigDiff": {
                                    "path": "UsrOriginatorType_List_DS.Id"
                                }
                            },
                            "displayValue": {
                                "modelConfigDiff": {
                                    "path": "UsrOriginatorType_List_DS.Name"
                                }
                            }
                        }
                    },
                    "modelConfigDiff": {
                        "path": "UsrOriginatorType_List_DS",
                        "sortingConfig": {
                            "attributeName": "UsrOriginatorType_List_Sorting",
                            "default": [
                                {
                                    "columnName": "Name",
                                    "direction": "asc"
                                }
                            ]
                        },
                        "pagingConfig": {
                            "rowCount": 50,
                            "rowsOffset": null
                        }
                    },
                    "embeddedModel": {
                        "name": "UsrOriginatorType_List_DS",
                        "config": {
                            "type": "crt.EntityDataSource",
                            "config": {
                                "entitySchemaName": "ContactType"
                            }
                        }
                    }
                },
                "UsrOriginatorType_List_Sorting": {
                    "isCollection": true,
                    "viewModelConfigDiff": {
                        "attributes": {
                            "columnName": {},
                            "direction": {}
                        }
                    }
                },
                "UsrSickDaysLeft": {
                    "modelConfigDiff": {
                        "path": "PDS.UsrSickDaysLeft"
                    }
                },
                /* The attribute that stores the request originator type. */
                "IsRequestFromEmployee": {}
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppRequests"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "crt.HandleViewModelAttributeChangeRequest",
                /* The custom implementation of the system query handler. */
                handler: async (request, next) => {
                    /* Check the request originator type. */
                    if (request.attributeName === 'UsrOriginatorType') {
                        const employeeOriginatorTypeId = '60733efc-f36b-1410-a883-16d83cab0980';
                        const selectedOriginatorType = await request.$context.UsrOriginatorType;
                        const selectedOriginatorTypeId = selectedOriginatorType?.value;
                        /* If the request originates from an employee, set the IsRequestFromEmployee to true. */
                        request.$context.IsRequestFromEmployee = selectedOriginatorTypeId === employeeOriginatorTypeId;
                    }
                    /* 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