How do you customize the PowerPoint ribbon layout by combining custom menu and buttons with existing controls (Office Javascript API)

AndreP 21 Reputation points
2022-11-15T08:46:48.837+00:00

I'm using the Office Javascript API to develop an add-in which will have a custom ribbon.

I'm planning to use a mix of existing PowerPoint controls and custom ones. I've figured out how to incorporate the existing PowerPoint controls, but I don't know how to layout the controls within a group in a nice way.

  • The image on the right (Font) is the default PowerPoint Font group.
  • The image on the left (Edit) is the group that I'm creating which will include a mix of custom controls and some PowerPoint ones.
  • I want to create a similar layout to the Font group (i.e. be able to control how large the combo box for the font is, and layout the controls exactly how I want to)

260444-custom-powerpoint-ribbon.png

In the manifest I've laid them out like this which just populates them in sequence (3 top-bottom in 2 columns).
<OfficeControl id="Font"/>
<OfficeControl id="FontSize"/>
<OfficeControl id="AlignLeft"/>
<OfficeControl id="Italic"/>
<OfficeControl id="Underline"/>
<OfficeControl id="ChangeCaseGallery"/>
<OfficeControl id="FormatPainter"/>

Appreciate some help on how the layout works.

JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
864 questions
Office Development
Office Development
Office: A suite of Microsoft productivity software that supports common business tasks, including word processing, email, presentations, and data management and analysis.Development: The process of researching, productizing, and refining new or existing technologies.
3,473 questions
PowerPoint Management
PowerPoint Management
PowerPoint: A family of Microsoft presentation graphics products that offer tools for creating presentations and adding graphic effects like multimedia objects and special effects with text.Management: The act or process of organizing, handling, directing or controlling something.
220 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Eugene Astafiev 891 Reputation points
    2022-11-15T22:32:31.907+00:00

    The Office JavaScript API (OfficeJS) doesn't provide anything for that. The best what you could do is to specify for custom controls where to place them by using the insertAfter or insertBefore` tags (only available in PowerPoint). See Integrate built-in Office buttons into custom control groups and tabs for more information.

    You can post or vote for an existing feature request on Tech Community where they are considered when the Office dev team goes through the planning process.