[]
        
(Showing Draft Content)

Designer Permission Support

The designer supports the View Mode permission control. When a user's permission is set to the View Mode, the default context menu items will be hidden, and ribbon items will be disabled.

Core Features

If the current user's permission is set to View Mode, the designer's ribbon and context menu will adjust accordingly.

When the user's permission is in the View Mode, by default, items in the context menu will be hidden, and items on the ribbon will be disabled. If users need to make custom context menu items or ribbon items available in the View Mode, they must add properties to the ICommand:

  • ribbon item: Requires setting the property viewModeEnableContext

  • context menu item: Requires setting the property viewModeVisibleContext

  • metaData: Requires adding the metaData property to the command executed by the item, setting the viewModePermission property within it to control which permission types the command is available under.

By default, the built-in ribbon items and context menu items behave as follows when the current user's permission is view-only:

  • Ribbon: Ribbon items will be set to unavailable based on permissions. By default, only copy, Find, Find…, and Go To… are enabled.

    designer_permission_support1

    designer_permission_support2

  • When the user’s viewModePermission includes allowNonDataModifyingOperations, copy, Find, Find…, and Go To… on the ribbon are enabled.

  • When the user’s viewModePermission includes allowHideRowsOrColumns, copy, Find, Find…, and Go To… on the ribbon are enabled.

  • When the user’s viewModePermission includes allowResizeRowsOrColumns, copy, Find, Find…, and Go To… on the ribbon are enabled.

  • When the user’s viewModePermission includes allowFilter, copy, Find, Find…, Go To…, Sort & Filter, Filter, Clear Filter, and Reapply on the ribbon are enabled.

    designer_permission_support3

    designer_permission_support4

  • When the user’s viewModePermission includes allowSort, copy, Find, Find…, Go To…, Sort & Filter, Sort A to Z, Sort Z to A, and Custom Sort… on the ribbon are enabled.

    designer_permission_support5

    designer_permission_support6

  • context menu: Menu items will be hidden based on permissions.

    • When the user’s viewModePermission includes allowNonDataModifyingOperations, Copy is displayed on the context menu.

      designer_permission_support7

    • When the user’s viewModePermission includes allowHideRowsOrColumns, Copy, Hide, and Unhide are displayed on the context menu.

      designer_permission_support8

    • When the user’s viewModePermission includes allowResizeRowsOrColumns, Copy and Row Height…, Column Width… are displayed on the context menu.

      designer_permission_support9

    • When the user’s viewModePermission includes allowFilter, Copy and Filter are displayed on the context menu.

      designer_permission_support10

    • When the user’s viewModePermission includes allowSort, Copy, Sort, Sort A to Z, and Sort Z to A is displayed on the context menu.

      designer_permission_support11

Interface

interface GC.Spread.Sheets.Designer.ICommand {
  ...,
  viewModeVisibleContext?: string; // used for context menu item
  viewModeEnableContext?: string; // used for ribbon item
}

Sample Code

Suppose a new ribbon item "AutoFitAll" needs to be added to the designer ribbon. Clicking it can autofit all rows and columns of the current sheet. It is available when the user is in the Edit Mode or in the View Mode but allowResizeRowsOrColumns.

To complete this function:

  1. Obtain the user's permission information and record whether the user is allowsResizeRowsOrColumns.

  2. Add the command to the commandMap of the config. Note that the command needs to set the viewModeEnableContext property.

  3. Add a command group, put the command in the group, and add this command group to the ribbon config.

  4. Set the config to the designer.

// update current user permission info.
// 1. Need to obtain the user's permission information and record whether the user is allowsResizeRowsOrColumns.
const user = spread.collaboration.getUser(),
  permission = user && user.permission,
  browsingMode = permission && permission.mode,
  viewModePermissions = permission && permission.viewModePermissions;
const AllowViewModeResizeRowsOrColumnsFlag = "allowViewModeResizeRowsOrColumns";
if (browsingMode === GC.Spread.Sheets.Collaboration.BrowsingMode.view && viewModePermissions & GC.Spread.Sheets.Collaboration.PermissionTypes.allowResizeRowsOrColumns) {
  designer.setData(AllowViewModeResizeRowsOrColumnsFlag , true);
}

// add custom command "AutoFitAll"
// 2. Add the command to the commandMap of the config. Note that the command needs to set the viewModeEnableContext property.
const autoFitAllCommand = {
    text: "AutoFitAll",
    commandName: "autoFitAll",
    iconClass: "ribbon-button-autofit-all",
    bigButton: true,
    viewModeEnableContext: AllowViewModeResizeRowsOrColumnsFlag, // if user in not in viewMode, or user is in viewMode but the viewModePermissions include allowResizeRowsOrColumns
    execute: (context) => {
        const spread = context.Spread, sheet = spread.getActiveSheet(), rowCount = sheet.getRowCount(), colCount = sheet.getColumnCount();
        spread.collaboration.startBatchOp();
        sheet.suspendPaint();
        for (let i = 0; i < rowCount; i++) {
          sheet.autoFitRow(i);
        }
        for (let i = 0; i < colCount; i++) {
            sheet.autoFitColumn(i);
        }
        sheet.resumePaint();
        spread.collaboration.endBatchOp();
    }
}
const config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
  autoFitAll: autoFitAllCommand
};
// 3. Add a command group, put the command in the group, and add this command group to the ribbon config.
const autoFitCommandGroup = {
  label: "AutoFit",
  thumbnailClass: "AutoFit",
  commandGroup: {
    children: [{
      direction: "vertical",
      commands: ["autoFitAll"]
    }]
  }
}
config.ribbon[0].buttonGroups.unshift(autoFitCommandGroup);
// 4. Set the config to the designer.
designer.setConfig(config);