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

Question

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)

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.

Answer 1

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.