# Designer Permission Support

## Content

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](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support1.86e8f1.png)
    ![designer_permission_support2](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support2.aa5439.png)
* 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](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support3.bbb13a.png)
    ![designer_permission_support4](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support4.50e18f.png)
* 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](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support5.90da6f.png)
    ![designer_permission_support6](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support6.af67f8.png)
* 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](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support7.1848c4.png)
    * When the user’s `viewModePermission` includes `allowHideRowsOrColumns`, Copy, Hide, and Unhide are displayed on the context menu.
        [designer_permission_support8](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support8.e7178b.png)
    * When the user’s `viewModePermission` includes `allowResizeRowsOrColumns`, Copy and Row Height…, Column Width… are displayed on the context menu.
        ![designer_permission_support9](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support9.d8f9f3.png)
    * When the user’s `viewModePermission` includes `allowFilter`, Copy and Filter are displayed on the context menu.
        ![designer_permission_support10](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support10.4384ed.png)
    * 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](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/designer_permission_support11.80d08b.png)

## Interface

```typescript
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.

```typescript
// 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);
```