Hide a feature at the development stage on a page

Level: intermediate

To implement the example:

1. Set up the page UI. Read more >>>
2. Hide the feature at the development stage. Read more >>>

Example

Hide a Feature button from the custom request page. The button must contain the feature at the development stage. Make sure the fully developed feature is available.

Feature at the development stage

Fully developed feature

1. Set up the page UI

1. Add custom feature at the development stage.

   1. Open the Feature toggling section. Instructions: Open the Feature toggling page.

   2. Click New and fill out the feature properties.

      Property	Property value
      Feature code	UsrShowMyButton

   3. Save the changes.

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

   For this example, create a Requests app.

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

   For this example, open the Requests form page.

4. Add a button.

   For this example, add a button that contains the feature at the development stage.

   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 contains the feature at the development stage	Title	Feature
      	Style	Primary

5. Save the changes.

2. Hide the feature at the development stage

Configure the business logic in the Client Module Designer. For this example, hide the feature at the development stage.

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 FeatureService service to check the feature status.

   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 IsFeatureDeveloped attribute that stores data about the feature status.
   viewModelConfig schema section

   viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
       "attributes": {
       ...,
           /* The attribute that stores data about the feature status. */
           "IsFeatureDeveloped": {}
       },
       ...
   }/**SCHEMA_VIEW_MODEL_CONFIG*/,

4. Bind an attribute to the field.

   1. Go to the viewConfigDiff schema section → UsrFeatureButton element.
   2. Bind the IsFeatureDeveloped attribute to the visible property.
   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       ...,
       /* Button that contains the feature at the development stage. */
       {
           "operation": "insert",
           "name": "UsrFeatureButton",
           "values": {
               ...,
               /* The property that flags the button as visible. Bound to the "IsFeatureDeveloped" attribute. */
               "visible": "$IsFeatureDeveloped"
           },
           ...
       }
   ]/**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 the feature status from @creatio-devkit/common.
      2. Retrieve the status of the feature that has the UsrShowMyButton code and specify the status in the IsFeatureDeveloped 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 the feature status from "@creatio-devkit/common." */
               const featureService = new sdk.FeatureService();
               /* Retrieve the status of the feature that has the "UsrShowMyButton" code and specify the status in the "IsFeatureDeveloped" attribute. */
               request.$context.IsFeatureDeveloped = await featureService.getFeatureState('UsrShowMyButton');
               /* Call the next handler if it exists and return its result. */
               return next?.handle(request);
           },
       },
   ] /**SCHEMA_HANDLERS*/,

6. Save the changes.

View the result

To view the outcome of the example for the feature at the development stage:

1. Open the Requests section.
2. Create a request.

As a result, Creatio will hide a Feature button that contains the feature at the development stage from the custom request page. View the result >>>

To view the outcome of the example for the fully developed feature:

1. Turn on the "UsrShowMyButton" additional feature. Instructions: Change the status of an additional feature for all users.
2. Open the Requests section.
3. Create a request.

As a result, Creatio will display a Feature button that contains the fully developed feature on the custom request page. 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 contains the feature at the development stage. */
            {
                "operation": "insert",
                "name": "UsrFeatureButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(UsrFeatureButton_caption)#",
                    "color": "primary",
                    "disabled": false,
                    /* The property that flags the button as visible. Bound to the "IsFeatureDeveloped" attribute. */
                    "visible": "$IsFeatureDeveloped"
                },
                "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 the feature status. */
                "IsFeatureDeveloped": {}
            }
        }/**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 the feature status from "@creatio-devkit/common." */
                    const featureService = new sdk.FeatureService();
                    /* Retrieve the status of the feature that has the "UsrShowMyButton" code and specify the status in the "IsFeatureDeveloped" attribute. */
                    request.$context.IsFeatureDeveloped = await featureService.getFeatureState('UsrShowMyButton');
                    /* 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