Hide the feature on a page behind access permissions

Level: intermediate

To implement the example:

1. Set up the page UI. Read more >>>
2. Hide the feature if the user lacks permission to access it. Read more >>>

Example

Hide the Excel data import button on the custom request page if the user lacks permission to import Excel data. Make sure the button is available if the user is permitted to import Excel data.

1. Set up the page UI

1. Create an app based on the Records & business processes template. Instructions: Create an app manually (user documentation).

   For this example, create a Requests app.

2. Open the form page in the Freedom UI Designer.

   For this example, open the Requests form page.

3. Add a button.

   For this example, add a button that starts Excel data import.

   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 starts Excel data import	Title	Excel data import
      	Style	Focus

4. Save the changes.

2. Hide the feature if the user lacks permission to access it

Configure the business logic in the Client Module Designer. For this example, hide the feature if the user lacks permission to access it.

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 RightsService service to check access permissions.

   AMD module dependencies

   /* Declare the AMD module. */
   define("UsrRequests_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
       return {
           ...
       }
   });

3. Add an attribute.

   1. Go to the viewModelConfigDiff schema section → values configuration object.
   2. Add an IsAccessRightsGranted attribute that stores data about user's access permission.
   viewModelConfigDiff schema section

   viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
       {
           "operation": "merge",
           "path": [
               "attributes"
           ],
           "values": {
               ...,
               /* The attribute that stores data about user's access permission. */
               "IsAccessRightsGranted": {}
           }
       },
       ...
   ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

4. Bind an attribute to the field.

   1. Go to the viewConfigDiff schema section → UsrExcelDataImportButton element.
   2. Bind the IsAccessRightsGranted attribute to the visible property.
   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       ...,
       /* Button that starts Excel data import. */
       {
           "operation": "insert",
           "name": "UsrExcelDataImportButton",
           "values": {
               ...,
               /* The property that flags the button as visible. Bound to the "IsAccessRightsGranted" attribute. */
               "visible": "$IsAccessRightsGranted"
           },
           ...
       }
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

5. Implement the base request handler.

   1. Go to the handlers schema section.

   2. Add a custom implementation of the crt.HandleViewModelInitRequest base request handler.

      1. Create an instance of the service that checks access permissions from @creatio-devkit/common.
      2. Retrieve data about the user's access permission to the CanImportFromExcel system operation.
      3. Specify data about the user's access permission in the IsAccessRightsGranted attribute.
   handlers schema section

   handlers: /**SCHEMA_HANDLERS*/[
       {
           request: "crt.HandleViewModelInitRequest",
           /* The custom implementation of the system request handler. */
           handler: async (request, next) => {
               /* Create an instance of the service that checks access permissions from "@creatio-devkit/common." */
               const rightService = new sdk.RightsService();
               /* Retrieve data about the user's access permission to the "CanImportFromExcel" system operation. */
               const canImportFromExcel = await rightService.getCanExecuteOperation('CanImportFromExcel');
               /* Specify data about the user's access permission in the "IsAccessRightsGranted" attribute. */
               request.$context.IsAccessRightsGranted = canImportFromExcel;
               /* Call the next handler if it exists and return its result. */
               return next?.handle(request);
           },
       },
   ] /**SCHEMA_HANDLERS*/,

6. Save the changes.

View the result

1. Log in to the app as a user who lacks the permission to import data from Excel.
2. Open the Requests section.
3. Create a request.
4. Log in to the app as a user who is permitted to import data from Excel.
5. Open the Requests section.
6. Create a request.

As a result:

• Creatio will hide the Excel data import button from the custom request page if the user lacks permission to import Excel data.
• Creatio will display the Excel data import button on the custom request page if the user is permitted to import Excel data. View the result >>>

Source code

UsrRequests_FormPage

/* Declare the AMD module. */
define("UsrRequests_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "merge",
                "name": "Feed",
                "values": {
                    "dataSourceName": "PDS",
                    "entitySchemaName": "UsrRequests"
                }
            },
            {
                "operation": "merge",
                "name": "AttachmentList",
                "values": {
                    "columns": [
                        {
                            "id": "a8156d85-c55e-4ca2-b0c0-a4942936a634",
                            "code": "AttachmentListDS_Name",
                            "caption": "#ResourceString(AttachmentListDS_Name)#",
                            "dataValueType": 28,
                            "width": 200
                        }
                    ]
                }
            },
            /* Button that starts Excel data import. */
            {
                "operation": "insert",
                "name": "UsrExcelDataImportButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(UsrExcelDataImportButton_caption)#",
                    "color": "accent",
                    "disabled": false,
                    "size": "large",
                    "iconPosition": "only-text",
                    /* The property that flags the button as visible. Bound to the "IsAccessRightsGranted" attribute. */
                    "visible": "$IsAccessRightsGranted"
                },
                "parentName": "ActionButtonsContainer",
                "propertyName": "items",
                "index": 0
            },
            {
                "operation": "insert",
                "name": "UsrName",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Input",
                    "label": "$Resources.Strings.UsrName",
                    "control": "$UsrName",
                    "labelPosition": "auto"
                },
                "parentName": "SideAreaProfileContainer",
                "propertyName": "items",
                "index": 0
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
            {
                "operation": "merge",
                "path": [
                    "attributes"
                ],
                "values": {
                    "UsrName": {
                        "modelConfig": {
                            "path": "PDS.UsrName"
                        }
                    },
                    /* The attribute that stores data about user's access permission. */
                    "IsAccessRightsGranted": {}
                }
            },
            {
                "operation": "merge",
                "path": [
                    "attributes",
                    "Id",
                    "modelConfig"
                ],
                "values": {
                    "path": "PDS.Id"
                }
            }
        ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG_DIFF*/[
            {
                "operation": "merge",
                "path": [],
                "values": {
                    "primaryDataSourceName": "PDS"
                }
            },
            {
                "operation": "merge",
                "path": [
                    "dataSources"
                ],
                "values": {
                    "PDS": {
                        "type": "crt.EntityDataSource",
                        "config": {
                            "entitySchemaName": "UsrRequests"
                        },
                        "scope": "page"
                    }
                }
            }
        ]/**SCHEMA_MODEL_CONFIG_DIFF*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "crt.HandleViewModelInitRequest",
                /* The custom implementation of the system request handler. */
                handler: async (request, next) => {
                    /* Create an instance of the service that checks access permissions from "@creatio-devkit/common." */
                    const rightService = new sdk.RightsService();
                    /* Retrieve data about the user's access permission to the "CanImportFromExcel" system operation. */
                    const canImportFromExcel = await rightService.getCanExecuteOperation('CanImportFromExcel');
                    /* Specify data about the user's access permission in the "IsAccessRightsGranted" attribute. */
                    request.$context.IsAccessRightsGranted = canImportFromExcel;
                    /* 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