Page customization

Use case 1: Control an existing component

• Requirement

  Hide the More Menus button , located in the upper-left corner of Word for the web.

• Syntax

  expression.CommandBars(CommandBarId).Visible = false

  expression: Represents the application object for the document type.

  CommandBars is the object you call, and CommandBarId is the ID of the element you want to control.

• Example

  async function example() {
    await instance.ready();
    const app = instance.Application;
    // Get the page customization object: More Menus
    const moreMenus = await app.CommandBars('MoreMenus');
    // Hide the More Menus
    moreMenus.Visible = false;
  }

For a complete list of elements you can control, see the Customizable List.

Use case 2: Create a custom component

• Requirement

  Use the CommandBars object to create a custom component and set its properties, such as the element's icon and caption. This example adds a custom Button with a diamond icon to the far right of the document editor's formatting toolbar.

• Example

  async function example() {
    await instance.ready();
    const app = instance.Application;
    // Get the page customization object: Start Tab
    const controls = await app.CommandBars('StartTab').Controls;
    // Add a custom element: a button
    const controlButton = await controls.Add(1);
    controlButton.Caption = 'Button'; // Set the caption
    // Set the icon
    controlButton.Picture = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik04LjIxMyAxM0g2LjhsNi42MzYtNi42MzYtNC4yNDMtNC4yNDMtNy4wNyA3LjA3MUw1LjkyOCAxM0g0LjUxNUwxLjA2IDkuNTQ2YS41LjUgMCAwIDEgMC0uNzA3TDguODM5IDEuMDZhLjUuNSAwIDAgMSAuNzA3IDBsNC45NSA0Ljk1YS41LjUgMCAwIDEgMCAuNzA3TDguMjEzIDEzeiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTQuNTM2IDYuMzY0bDQuOTUgNC45NS0uNzA3LjcwNy00Ljk1LTQuOTV6TTQuNTIxIDEzaDEwLjAzdjFINS40OTZ6Ii8+PC9nPjwvc3ZnPg==';
    controlButton.SetFocus(true); // Set focus to the element
  }

Notes

Page customization works in various applications, including Word, Excel, PowerPoint, and PDF. For clarity, all examples in this document use Word.