Microsoft 365 Community Community Demos, 13 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Ribbon API updates with Office Add-ins

Description

In this 6-minute Developer-focused demo, Microsoft presenters Abid Rahman and Preethika Kiruveedula preview 2 capabilities - Enable/Disable Ribbon Buttons and Contextual Tabs, along with timelines for their inclusion in PowerPoint and Word by platform. Enable/Disable APIs used for setting default state of your add-in command, changing state of your add-in command programmatically, and changing state in response to an event. Contextual tabs APIs used for creating new tabs and showing/hiding existing tabs. The capabilities exist presently in Excel. Try the previews for Word and PowerPoint. This PnP Community demo is taken from the Office Add-ins community call – April 2022, recorded on April 13, 2022.

Demo Presenters
• Abid Rahman, Program Manager (Microsoft)
• Preethika Kiruveedula, Program Manager (Microsoft)

Supporting documents
• Documentation - Enable and Disable Add-in Commands | https://docs.microsoft.com/office/dev/add-ins/design/disable-add-in-commands
• Documentation - Create custom contextual tabs in Office Add-ins | https://docs.microsoft.com/office/dev/add-ins/design/contextual-tabs
• Sample – Create custom contextual tabs on the ribbon | https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/office-contextual-tabs

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

A

Hi everyone so today abeed and I will be going over some api updates to the ribbon api, so we're going to go over two changes that have been made lately and two updates we've made today. So we're going to be going over the new edition of enable disable on two different platforms and we're also going to discuss contextual tabs previously enable disable was already available on excel web mac and windows, but it is now also available on powerpoint and word for mac and windows on desktop and contextual.

A

Tabs is now fully available for ga on excel. So with the new addition of enable disable to powerpoint and word, you can now set up your add-in commands to be enabled or disabled dependent on various circumstances.

A

So at first you can set the default state of your add-in command to be disabled for an end user to see so you can specify specific custom buttons or menu items you might have present in your add-in command to be disabled when the add-in is initially opened.

A

You could also change the state of your add-in programmatically throughout different events, happening on a user's workbook or other things that are going on by making a call to the office.ribbon request, update to change the status dependent on a certain activity or a period of time, and you could also change the state of your add-in command in response to an event so utilizing an event handler. You could change the status of a custom, button, menu item, etc based off of something that occurs throughout the document or workbook the ways to go about doing this.

A

In order to change the default state of your add command to disabled, you can add an enabled element to the manifest immediately before the action element. That's already present there.

A

So, for example, here you just add an enabled tag, and in that tag you would add false, and then we can also programmatically change the state, so you can enable or disable your add-in command.

A

So in order to do that, you have to first define a ribbon update or data object, and then you would pass that into the office.ribbon.requestupdate method. So, in order to define your ribbon updater object, you would have some function so in this example, it's enabling a chart format, but you could have whatever enabling whatever necessary item in yours, and you first identify the button that you want to enable or disable and then you go through and you identify the group and the parent as well. And then you add your ribbon updater to the parent tab.

A

So that way it has the whole control and you have direct access to that button. And then, when you call the request, update method, it'll update the ribbon updater object and you could also change the state in response to an event. So you would first assign an event handler it's commonly done with office.on ready, but you can choose to do it, however you'd like and then you would implement your enable function similar to the programmatically changing the state. You would have to also make function enable and then, in this situation it was on activated.

A

You would enable this button and then on deactivated. You would disable so there's two functions and that's how you could use an event handler to use that enable disable functionality.

A

um This was already present on excel online and desktop for a while and is now going to be available for public preview on word and powerpoint on desktop, and if you would like to see a tutorial, this is a link to the documentation that has step by steps on how to do all of these various items, to enable disable for word and powerpoint.

B

Thanks preethi I'll talk uh briefly about contextual tabs api, um so with contextual tabs you can create new tabs and show or hide existing tabs on the ribbon. This functionality was already in preview for excel on windows and online. We just finished up development for mac. So now we have availability across all the different platforms, but do keep in mind that this is only for the excel application.

B

So I have talked about this in the past, but I'll go through this very quickly. uh To show you what that functionality actually is. So this includes, as you can see, we have some native tabs in the ribbon that often show up based on the context of what the user is doing. So a great example of that is when you have added shapes onto excel and you click on the shape, you'll see an additional shape format. Tab show up in the ribbon.

B

So now you can do similar things with your add-in, um as you can see in the bottom picture that you can add your own contextual tabs, based on certain context that the user is in into the ribbon as well. So how do you actually do this? It's it's very similar to enable disable. uh We have two different apis, the first one you use to actually create and add those custom, contextual tabs. So this is all done through the api.

B

uh You don't need to make any changes to your manifest, so you can avoid any resubmission of your add-in if you're, adding this additional new behavior and then the second api works very similar to the enable disable logic in ribbon api 1.1 and you use that api to either show or hide the status of each of these tabs, depending on the context that the user is in I've added a couple links on the slide as well.

B

We have one to directly to the documentation and the documentation is the same as it was during the preview phase and then the second link is to a sample that we have showing you how this is actually done um inside of your add-in. So that's mostly it. Those are the updates for ribbon api. uh We're excited for you to try them out, especially the the one that is in preview. So please try out the enable disable forward and powerpoint and give us any any feedback that you have. So that's! That's all for us.