Version: 8.1

Hide a feature at the development stage on a page

Level: intermediate

Example

Hide a custom Feature button on a record page of a custom Feature Service section. The button contains the feature at the development stage.

1. Set up the page UI

Add the developed feature to hide.
1. Open the Feature page and fill out the feature properties:
  - Set Feature code to "UsrShowMyButton."
  - Set Feature name to "Show My Button."
2. Click Create feature.
Create a custom Feature Service app based on the Records & business processes template. To do this, follow the guide in the user documentation: Create a custom app.
Open the Feature service form page page in the working area of the Feature Service app page.
Delete the Name field the Feature Service form page page includes by default.
Add a button that contains the feature at the development stage.
1. Add a Button type component to the toolbar of the Freedom UI Designer.
2. Click in the action panel of the Freedom UI Designer and fill out the button properties in the setup area.
  - Set Title to "Feature."
  - Select "Primary" in the Style property.
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. 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.

Enable the sdk.FeatureService service that checks the feature status. To do this, add @creatio-devkit/common to the AMD module as a dependency.

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

Add the ShowMyButton attribute that stores feature status data to the viewModelConfigDiff schema section.

viewModelConfigDiff schema section
viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
    "attributes": {
        ...,
        /* The attribute that stores the feature status. */
        "ShowMyButton": {}
    }
}/**SCHEMA_VIEW_MODEL_CONFIG*/,

Bind the visible property of the FeatureButton element to the ShowMyButton model attribute in the viewConfigDiff schema section.

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

Add a custom implementation of the crt.HandlerViewModelInitRequest system query handler to the handlers schema section. Execute the handler when Creatio initializes the View model.

Create an instance of the service that checks the feature status from @creatio-devkit/common.
Retrieve the status of the feature that has the UsrShowMyButton code and specify the status in the ShowMyButton attribute.

handlers schema section
handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "crt.HandleViewModelInitRequest",
        /* The custom implementation of the system query 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 UsrShowMyButton feature status and specify it in the ShowMyButton attribute. */
            request.$context.ShowMyButton = await featureService.getFeatureState('UsrShowMyButton');
            /* Call the next handler if it exists and return its result. */
            return next?.handle(request);
        }
    }
] /**SCHEMA_HANDLERS*/,

Click Save on the Client Module Designer's toolbar.

Outcome of the example

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

Open the Feature Service app page and click Run app.
Click New on the Feature Service app toolbar.

As a result, Creatio will hide the Feature button that contains the feature at the development stage on the Feature Service app page.

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

Enable the feature that has UsrShowMyButton code.
1. Open the Feature page.
2. Enable the Show My Button feature in the page list.
3. Click Save changes and refresh the page.
Refresh the Feature Service app page.
Click New on the Feature Service app toolbar.

As a result, Creatio will display the Feature button that contains the fully developed feature on the Feature Service app page.

Source codes

UsrAppFeatureService_FormPage
/* Declare the AMD module. */
define("UsrAppFeatureService_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "insert",
                "name": "FeatureButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(FeatureButton_caption)#",
                    "color": "primary",
                    "disabled": false,
                    "clicked": {
                        "request": "crt.RunBusinessProcessRequest"
                    },
                    /* The property that flags the field as visible. Bound to the ShowMyButton attribute. */
                    "visible": "$ShowMyButton"
                },
                "parentName": "ActionButtonsContainer",
                "propertyName": "items",
                "index": 3
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "Id": {
                    "modelConfigDiff": {
                        "path": "PDS.Id"
                    }
                },
                /* The attribute that stores the feature status. */
                "ShowMyButton": {}
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppFeatureService"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "crt.HandleViewModelInitRequest",
                /* The custom implementation of the system query 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 UsrShowMyButton feature status and specify it in the ShowMyButton attribute. */
                    request.$context.ShowMyButton = 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

1. Set up the page UI​

2. Hide the feature at the development stage​

Outcome of the example​

Source codes​

Resources​

1. Set up the page UI

2. Hide the feature at the development stage

Outcome of the example

Source codes

Resources