Adding pop-up hints

As of version 7.7.0 bpm'online supports tooltips. This article describes tooltip types that can be added to the system elements and methods for adding them.

All tooltips can be divided into 3 main groups:

1 A field tooltip (the field title is marked with a small green triangle) .  The tooltip appears when you hover the mouse cursor over the triangle or click the field title.

2 A tooltip for other control elements (buttons, completeness indicators, images). The tooltip appears when you hover the mouse cursor over a control element.

3 The information button . The tooltip appears when you hover over the information button.

General algorithm for adding tooltips for standard controls:

1. Create the replacement schema of a page or section
2. Add tooltip text to the collection of schema localizable strings.
3. Describe the necessary modifications to schema elements in the diff array.

Let's consider creating different types of tooltips with specific examples.

Example 1. Adding a tooltip to the [Account] field of the contact edit page

1 In a custom package, create a replacement contact edit page

You need to create a replacement client module, and set the [Contact mini-page display schema] as a parent object (Fig. 1).

The process of creating a replacement page is described in the "Creating a custom client module schema" article.

Fig. 1 Product replacement edit page properties

2 Add tooltip text to the collection of localizable strings of the replacement edit page schema

To do this, right-click the [LocalizableStrings] node structure and select [Add].

Fill in the properties of the created string, as shown in Fig. 2.

Fig. 2 Сustom localizable string properties

3 Add field configuration object to the diff array

To add a tooltip to the field, you need to add the "tip" property to the "values" property field, which, in turn, should contain a "content" property. The value of the "content" property will serve as a tooltip text.

Here is the source code of the contact replacement edit page schema.

define("ContactPageV2", [],
function () {
    return {
        //Edit page object schema name
        entitySchemaName: "Contact",
        //Tooltip display setup
        diff: /**SCHEMA_DIFF*/[
            // Metadata for adding a tooltip to a field.
            {
                // Indicates that the operation changing the existing item is being performed.
                "operation": "merge",
                "name": "Account",
                "parentName": "Header",
                "propertyName": "items",
                "values": {
                    //
                    "tip": {
                        // Tooltip text.
                        "content": { "bindTo": "Resources.Strings.AccountTipContent" },
                        // Tooltip dispaly mode.
                        // By default, WIDE - width of the green stripe, 
                        // which is displayed in the tooltip.
                        "displayMode": Terrasoft.controls.TipEnums.displayMode.WIDE
                    }
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});

After the schema is saved on the contact edit page, the [Account] field will be displayed with a tooltip (Fig. 3).

Fig. 3 Result demonstration

Example 2. Adding a tooltip to the [Save] button of the contact edit page

1 In a custom package, create a replacement contact edit page

2 Add tooltip text to the collection of localizable strings of the replacement edit page schema

Fill in the properties of the created string, as shown in Fig. 4.

Fig. 4 Сustom localizable string properties

3 Add button configuration object to the diff array

There are several ways to add a tooltip to a control element.

Method 1

Add the "hint" property to the "values" control element property, which, in turn, should contain the tooltip text.

Here is the source code of the contact replacement edit page schema when adding tips using the first method.

define("ContactPageV2", [],
function () {
    return {
        //Edit page object schema name
        entitySchemaName: "Contact",
        //Tooltip display setup
        diff: /**SCHEMA_DIFF*/[
            // Metadata for adding a button to a field.
            {
                // Indicates that the operation changing the existing button is being performed.
                "operation": "merge",
                "parentName": "LeftContainer",
                "propertyName": "items",
                "name": "SaveButton",
                "values": {
                    // Button tooltip
                    "hint": { "bindTo": "Resources.Strings.SaveButtonHint" } 
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});

Method 2

Add the "tips" array to the "values" control element property. Then, using the "insert" operation, add the tooltip configuration object to the "tips" array. In the "values" property of this object, specify the "content" property — the text of the tooltip. Using this method, you can customize a tooltip i.e., change the display style, bind the tooltip to any event of the view model, add control elements, etc.

Important! This method works for itemType:   Terrasoft.ViewItemType.BUTTON,  Terrasoft.ViewItemType.LABEL,  Terrasoft.ViewItemType.COLOR_BUTTON,  Terrasoft.ViewItemType.HYPERLINK,  Terrasoft.ViewItemType.INFORMATION_BUTTON, and for those items in which the specified property is "generator".

Here is the source code of the contact replacement edit page schema when adding tips using the second method.

define("ContactPageV2", [],
function () {
    return {
        //Edit page object schema name
        entitySchemaName: "Contact",
        //Tooltip display setup
        diff: /**SCHEMA_DIFF*/[
            // Metadata for adding a button to a field.
            {
                // Indicates that the operation changing the existing button is being performed.
                "operation": "merge",
                "parentName": "LeftContainer",
                "propertyName": "items",
                "name": "SaveButton",
                "values": {
                    // Button tooltip array.
                    "tips": [] 
                }
            },
            // Simple tooltip configuration element
            {
                // Indicates that the operation adding a new element is being performed.
                "operation": "insert",
                "parentName": "SaveButton",
                "propertyName": "tips",
                "name": "CustomShowedTip",
                "values": {
                    // Tooltip text.
                    "content": {"bindTo": "Resources.Strings.SaveButtonHint"}
                    // Here you can optionally configure other options 
                    // of tooltip display and operation.
                }
            },
        ]/**SCHEMA_DIFF*/
    };
});

After the schema is saved on the contact edit page, the [Save] button will be displayed with a tooltip (Fig. 5).

Fig. 5 Result demonstration

Example 3. Adding a tooltip to the [Full name] field of the contact edit page

1 In a custom package, create a replacement contact edit page

2 Add tooltip text to the collection of localizable strings of the replacement edit page schema

Fill in the properties of the created string, as shown in Fig. 6.

Fig. 6 Сustom localizable string properties

3 Add button configuration object to the diff array

To add the information button to the page, you need to add a new item to the diff array with the Terrasoft.ViewItemType.INFORMATION_BUTTON type and the "content" property. The value of the "content" property will serve as a tooltip text.

Here is the source code of the contact replacement edit page schema.

define("ContactPageV2", [],
function () {
    return {
        //Edit page object schema name
        entitySchemaName: "Contact",
        //Tooltip display setup
        diff: /**SCHEMA_DIFF*/[
            // Metadata for adding a button to a field.
            {
                // Indicates that the operation changing the existing button is being performed.
                "operation": "merge",
                "parentName": "Header",
                "propertyName": "items",
                "name": "Name",
                "values": {
                    "layout": { "column": 4, "row": 0, "colSpan": 18 }
                }
            },
            {
                // Indicates that the operation adding a new element is being performed.
                "operation": "insert",
                "parentName": "Header",
                "propertyName": "items",
                "name": "SimpleInfoButton",
                "values": {
                    "layout": { "column": 22, "row": 0, "colSpan": 1 },
                    // Indicates the control element type - "Information button"
                    "itemType": Terrasoft.ViewItemType.INFORMATION_BUTTON,
                    // Information button tooltip text
                    "content": { "bindTo": "Resources.Strings.InfoButtonCaption" }
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});

After the schema is saved on the contact edit page, the [Account] field will be displayed with a tooltip (Fig. 7).

Fig. 7 Result demonstration

Adding a web-resource link to a tooltip

You can add web-resource links and context-sensitive help to tooltips. For this you need to add html-code link directly to a localizable string of the tooltip text.

Example of adding a direct link to a web-resource:

<a href="http://academy.bpmonline.com/" target="_blank">Read more</a>

As a result the tooltip will look like this:

Fig. 8 Tooltip with a link example