Set up the condition that locks the field on a page

Medium
PDF

This example is implemented in the front-end. Learn more about the back-end implementation in the user documentation guide: Access management.

Example. Set up the condition that locks the Applicant field on the record page of the custom Requests section. Lock the field if the request is completed, i. e., the Status field is set to "Completed."

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 an applicant field.

    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 "Applicant."
      • Set Code to "UsrApplicant."
      • Select "Contact " in the Lookup property.
  4. Add a request status field.

    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 "Status."
      • Set Code to "UsrStatus."
      • Click the button next to the Lookup property and fill out the lookup properties:

        • Set Title to "Request status."
        • Set Code to "UsrRequestStatusLookup."

        Click Save to add the lookup.

    3. Click Save on the Freedom UI Designer's toolbar.
  5. Fill out the Request status lookup.

    1. Open the Requests app page and click Run app.
    2. Click to open the System Designer. Go to the System setup block → Lookups.
    3. If you use Creatio 8.0.0, register the lookup. The lookup is registered automatically in Creatio 8.0.1 and later.

      1. Click New lookup on the Lookups section toolbar and fill out the lookup properties:

        • Set Name to "Request status."
        • Select "Request status " in the Object property.
      2. Click Save on the lookup setup page's toolbar.
    4. Open the Request status toolbar.
    5. Click New on the lookup setup page's toolbar and add the following lookup values:

      • "New"
      • "Under evaluation"
      • "In progress"
      • "Canceled"
      • "Completed"
  6. Open the Requests form page page and click the button on the Freedom UI Designer's toolbar. After you save the page settings, Creatio opens the source code of the Freedom UI page.

2. Set up the condition that locks the field 

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

  1. Add an IsApplicantReadonly attribute that stores data about the contact's permission to edit the Applicant field to the viewModelConfig schema section.

    viewModelConfig schema section
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* The attribute that locks the [Applicant] field. */
            "IsApplicantReadonly": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  2. Bind the readonly property of the UsrApplicant element to the IsApplicantReadonly model attribute in the viewConfigDiff schema section. Lock the Applicant field if the request is completed. Keep the field editable for other request statuses.

    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        {
            "operation": "insert",
            "name": "UsrApplicant",
            "values": {
                ...,
                /* The property that locks the field from editing. Bound to the IsApplicantReadonly attribute. */
                "readonly": "$IsApplicantReadonly"
            },
            ...
        },
        ...
    ]/**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 UsrStatus attribute value. If the new attribute value refers to the "Completed" value of the Request status lookup, set the IsApplicantReadonly attribute value to true, otherwise set it to false. The unique status ID of the completed request set as the completedStatusId constant is stored in the corresponding column of the Request status lookup's record string. To display the Id column in the Request status lookup list, follow the guide in the user documentation: Work with record lists. In this example, the status ID of the completed request is "6d76b4e0-6507-4c34-902b-90e18df84153."

    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelAttributeChangeRequest",
            /* The custom implementation of the system query handler. */
            handler: async (request, next) => {
                /* Check the request status. */
                if (request.attributeName === 'UsrStatus') {
                    const completedStatusId = '6d76b4e0-6507-4c34-902b-90e18df84153';
                    const selectedStatus = await request.$context.UsrStatus;
                    const selectedStatusId = selectedStatus?.value;
                    const isRequestCompleted = selectedStatusId === completedStatusId;
                    /* If the request status is [Completed], set the IsApplicantReadonly attribute to true and lock the [Applicant] field from editing. */
                    request.$context.IsApplicantReadonly = isRequestCompleted;
                }
                /* Call the next handler (if it exists) and return its results. */
                return next?.handle(request);
            }
        }
    ]/**SCHEMA_HANDLERS*/,
    
    Complete source code of the page schema
  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 "Request's name" in the Name field.
  4. Select "Bruce Clayton" in the Applicant field.
  5. Select "Completed" in the Status field.

As a result, Creatio will lock the Applicant field for completed requests.

The Applicant field will be editable for requests that have a different status. For example, "New."