Skip to main content
Version: 8.0

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.

User lacks permission to import Excel data
User lacks permission to import Excel data
User permits to import Excel data
User permits 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

      Primary

  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 viewModelConfig schema section → attributes configuration object.
    2. Add an IsAccessRightsGranted attribute that stores data about user's access permission.
    viewModelConfig schema section
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
        ...,
            /* The attribute that stores data about user's access permission. */
            "IsAccessRightsGranted": {}
        },
        ...
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,

  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. View the result >>>
  • 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*/[
            /* Button that starts Excel data import. */
            {
                "operation": "insert",
                "name": "UsrExcelDataImportButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(UsrExcelDataImportButton_caption)#",
                    "color": "primary",
                    "disabled": false,
                    /* The property that flags the button as visible. Bound to the "IsAccessRightsGranted" attribute. */
                    "visible": "$IsAccessRightsGranted"
                },
                "parentName": "ActionButtonsContainer",
                "propertyName": "items",
                "index": 3
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "Id": {
                    "modelConfig": {
                        "path": "PDS.Id"
                    }
                },
                /* The attribute that stores data about user's access permission. */
                "IsAccessRightsGranted": {}
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfig: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrRequests"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        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