MicroStrategy ONE

Custom Context Menu Items

Custom context menu items can be configured to allow for changes to properties specific to your visualization. For example, whether to show the Date Labels on your visualization, or open the pop-up format editor to perform shape formatting on a certain shape. Custom context menu items are configured by setting the customConfig variable when using the getContextMenuConfig API.

The customConfig variable should be an array, should be an object array and each object has a type property and properties specific to the kind of menu item being configured. All the supported types can be found in Enumeration mstrmojo.CUSTOM_CONTEXT_MENU.

Most menu items can bind with custom properties. For more information on custom properties, see Create and Use Custom Properties.

Configuring the Context Menu Items

This section describes the properties that can be configured for each type:

NORMAL

Add a menu item and onClick callback will be called when clicked

Properties

name: (required) The text label shown on menu item

onClick: (required and should be function) Tthe callback function which will be called when menu item clicked.

isDisabled: (optional) Whether the menu item is disabled. When disabled, it will show disabled style and do nothing when clicked. Default value is false.

isShown: (optional) Show condition for this menu item. Default value is true.

Sample UI

Default:

With isDisabled set to true:

Example

Copy 
{
    type: mstrmojo.CUSTOM_CONTEXT_MENU.NORMAL,
    name: "Show more Info...",
    onClick: function () {
         // do something when clicked
    }
}

TOGGLE

Add a menu item which switch between on and off status when clicked. It will show a check marker in front for on status.

Properties

name: (required) The text label shown on menu item.

currentValue: (required) True for on status, and false for off status.

onClick: (required) The callback function which will be called when menu item clicked.

The onClick function has one param which is boolean, indicate the new value for the status after menu is clicked.

isShown: (optional) Show condition for this menu item. Default value is true.

Sample UI

Example

Copy 
{
    type: mstrmojo.CUSTOM_CONTEXT_MENU.TOGGLE,
    name: "Condense Label",
    currentValue: true,
    onClick: function (newValue) {
        //newValue: true/false refer to on/off status
    }
}

Binding with Custom Properties

name: (required) The text label shown on menu item

propertyName: (required) The name of the custom property binding with this context menu.

showFormatPanel: (optional) If true, when clicking this context menu, the format panel which contains the controls bound to the same property is shown. Default value is true

config: (optional) Config for setProperty. (For details, click here)

isShown: (optional) Show condition for this menu item. Default value is true.

Example

Copy 
{
    type: mstrmojo.CUSTOM_CONTEXT_MENU.TOGGLE,
    name: "Condense Label",
    propertyName: "condenseLabel",
    showFormatPanel: true
}

SEPARATOR

A menu separator which used to divide different group of context menu.

Sample UI

Example

Copy 
{
    type: mstrmojo.CUSTOM_CONTEXT_MENU.SEPARATOR
}

SUBMENU

A menu item which will launch sub menu when hovered. Submenu is defined by subMenuConfig.

Properties

name: (required) The text label shown on menu item.

subMenuConfig (required) An array describing the menu configuration for the submenu which has the same format as the customConfig.

isShown: (optional) Show condition for this menu item. Default value is true.

Sample UI

Example

Copy 
{
    type: mstrmojo.CUSTOM_CONTEXT_MENU.SUBMENU,
    name: "Data Label",
    subMenuConfig: []
}

SINGLE_SELECT_LIST

A menu group whose items are mutually exclusive. If one is selected, the others will be unselected.

Properties

currentValue: (required)value decide which item in list is selected

onClick: (required)the callback function which will be called when one menu item clicked. The onClick function has one param which is the new value after menu is clicked

items: (required)array of object which has name and value, name is text label show for each menu item, value is value for each menu item

isShown: (optional)show condition for this menu item. Default value is true.

Sample UI

Example

Binding with Custom Properties

name: (required) The text label shown on menu item

propertyName: (required) The name of the custom property binding with this context menu.

showFormatPanel: (optional) If true, when clicking this context menu, the format panel which contains the controls bound to the same property is shown. Default value is true

config: (optional) Config for setProperty. (For details, click here)

isShown: (optional) Show condition for this menu item. Default value is true.

Example

Copy 
{
    type: mstrmojo.CUSTOM_CONTEXT_MENU.SINGLE_SELECT_LIST,
    propertyName: "chartType",
    showFormatPanel: true,
    items: [
        {
            name: "Bar",
            value: "0"
        },
        {
            name: "Line",
            value: "1"
        },
        {
            name: "Circle",
            value: "2"
        }
    ]
}

MULTI_SELECT_LIST

A menu group which each item could be selected or deselected. Must bind with a two-level property. Each item has its own property.

Properties

This must bind with a custom property. Use multiple TOGGLE menus if you don't need binding with a custom property.

name: (required) The text label shown on menu item

propertyName: (required) The name of the custom property binding with this context menu.

showFormatPanel: (optional) If true, when clicking this context menu, the format panel which contains the controls bound to the same property is shown. Default value is true

config: (optional) Config for setProperty. (For details, click here)

isShown: (optional) Show condition for this menu item. Default value is true.

Sample UI

Example

Copy 
{
    propertyName: "ppp",
    showFormatPanel: true,
    type: mstrmojo.CUSTOM_CONTEXT_MENU.MULTI_SELECT_LIST,
    items: [
        {
            labelText: "aaa",
            propertyName: "a"
        },
        {
            labelText: "bbb",
            propertyName: "b"
        },
        {
            labelText: "ccc",
            propertyName: "c"
        }
    ]
}

FORMAT

A menu item that opens a pop-up format editor when clicked.

Other Properties

name: (required) The text label shown on menu item. Default is 'Format'

isShown: (optional) Show condition for this menu item. Default is not shown on library and VI presentation mode.

formatConfig: (required) Defines the content for the format pop-up editor opened, see Configure the Pop-Up Format Editor for details.

showFormatPanelName: (optional) The name for which format panel will shown when this menu item clicked.

Sample UI

Menu Item:

Pop-Up Format Editor:

Example

Copy 
{
    type: mstrmojo.CUSTOM_CONTEXT_MENU.FORMAT,
    formatConfig: [{
        type: $FORMAT_CONTROL_TYPE.COLORBYGROUP,
        isShown: isColorbyAttribute,
        colorInfo: data.colorInfo,
        width: "150px",
        label: {
            text: "Fill",
            width: "50px"
        }
    }, {
        type: $FORMAT_CONTROL_TYPE.LINEGROUP,
        propertyName: "lg",
        hideColorControl: true,
        label: {
            text: "Border",
            width: "50px"
        }
    }, {
        type: $FORMAT_CONTROL_TYPE.CHARACTERGROUP,
        propertyName: "cg",
        label: {
            text' "Fot",
            width: "50px"
        }
    }],
    showFormatPanelName: "Shape Formatting"
}

Configure the Pop-Up Format Editor

The following section shows how to configure the pop-up format editor.

FILLGROUP

Combination of controls that help set fill color and transparency. The property names of the child controls have been preset: fillColor and fillAlpha, the same as FILLGROUP on the Properties panel.

Common Properties

label: Configures the label before the control, it could has properties:

  • text: (required) Text for the label.
  • width: (optional) The width of the label the actual width of the label is used.

isShown: Show condition for this menu item.

Other Properties

propertyName: (required) Property name bound with this control.

config: (optional) Configuration for setProperty, for details click here

showFillColor: (optional) Show or hide the color control, default value is true

showFillAlpha: (optional) Show or hide the transparency control, default value is true

showFormatPanel: (optional) If true, when clicking this context menu, the format panel which contains the controls bound to the same property is shown. Default value is true.

Sample UI

Example

Copy 
{
    type: $FORMAT_CONTROL_TYPE.FILLGROUP,
    propertyName: "fill",
}

LINEGROUP

Combination of controls that help set line style and color. The property name of the child controls have been preset: lineColor and lineStyle, , the same as LINEGROUP on the Properties panel.

Common Properties

label: Configures the label before the control, it could has properties:

  • text: (required) Text for the label.
  • width: (optional) The width of the label the actual width of the label is used.

isShown: Show condition for this menu item.

Other Properties

propertyName: (required) Property name bound with this control.

config: (optional) Configuration for setProperty, for details click here

hideColorControl:(optional)hide the color control or not, default value is false.

showFormatPanel: (optional) If true, when clicking this context menu, the format panel which contains the controls bound to the same property is shown. Default value is true.

Sample UI

Example

Copy 
{
    type: $FORMAT_CONTROL_TYPE.LINEGROUP,
    propertyName: "border"
}

CHARACTERGROUP

Combination of controls that help set font family, style, size and color. The property names of the child controls have been preset: fontFamily, fontStyle, fontSize, and fontColor, the same as CHARACTERGROUP on the Properties panel.

Common Properties

label: Configures the label before the control, it could has properties:

  • text: (required) Text for the label.
  • width: (optional) The width of the label the actual width of the label is used.

isShown: Show condition for this menu item.

Other Properties

propertyName: (required) Property name bound with this control.

config: (optional) Configuration for setProperty, for details click here

showFormatPanel: (optional) If true, when clicking this context menu, the format panel which contains the controls bound to the same property is shown. Default value is true.

Sample UI

Example

Copy 
{
    type: $FORMAT_CONTROL_TYPE.CHARACTERGROUP,
    propertyName: "font"
}

COLORBYGROUP

Controls to change color in color palette for given colorInfo. This control only changes the color palette for certain attribute combinations defined by colorInfo. (The COLORBYGROUP on Properties changes the color palette for all attribute combinations.)

Common Properties

label: Configures the label before the control, it could has properties:

  • text: (required) Text for the label.
  • width: (optional) The width of the label the actual width of the label is used.

isShown: Show condition for this menu item.

Other Properties

colorInfo: (required) An array of attribute element IDs which will be foramatted.

The values for colorInfo could be retrieved from DataInterface.getDawData by adding

{colorByInfo: this.zonesModel && this.zonesModel.getColorByAttributes()} to the parameters.

showFormatPanel: (optional) If true, when clicking this context menu, the format panel which contains the controls bound to the same property is shown. Default value is true.

Sample UI

Example

Copy 
{
    type: $FORMAT_CONTROL_TYPE.COLORBYGROUP,
    colorInfo:[
        "h2007;8D679D5111D3E4981000E787EC6DE8A4",
        "h2;8D679D3711D3E4981000E787EC6DE8A4"
    ]
}

Show or Hide On Different Conditions

Each menu item has a property called isShown which should be a boolean to decide whether this menu item will show or hide.

For example, the mstrmojo.CUSTOM_CONTEXT_MENU.FORMAT type is hidden for both Library and Web Presentation Mode by default.

To change the behavior to only hide on Web Presentation Mode, add the utility as the isShown property value:

Copy 
{
    type: mstrmojo.CUSTOM_CONTEXT_MENU.FORMAT,
    isShown: !mstrmojo.CustomVisUtility.isVIPresentationMode(),
    formatConfig: [{
        type: $FORMAT_CONTROL_TYPE.FILLGROUP,
        propertyName: "fg",
        label: {
            text: "Fill",
            width: "50px"
        }
    }, {
        type: $FORMAT_CONTROL_TYPE.LINEGROUP,
        propertyName: "lg",
        hideColorControl: true,
        label: {
            text: "Border",
            width: "50px"
        }
    }, {
        type: $FORMAT_CONTROL_TYPE.CHARACTERGROUP,
        propertyName: "cg",
        label: {
            text: "Font",
            width: "50px"
        }
    }],
    showFormatPanelName: "Shape Formatting"
}

More utility functions can be found in CustomVisUtiltilty.js.