Can not create custom contextual tabs in Office Add-ins

[sitthinan]

Expected Behavior

My custom contextual tabs should appear on the Excel ribbon when a chart is selected.

Current Behavior

I try to implement it following this document The custom contextual tabs do not appear on the ribbon when I select an Excel chart.

Steps to Reproduce, or Live Example

I have implemented this code to my ribbon

Office.onReady(async () => {
            const contextualTabJSON = this.GetContextualTabsJsonSupportedLocale();
            console.info(contextualTabJSON);
            const contextualTab = JSON.parse(contextualTabJSON);
            // @ts-ignore
            await Office.ribbon.requestCreateControls(contextualTab);
            await Excel.run(context => {
                const charts = context.workbook.worksheets.getActiveWorksheet().charts;
                charts.onActivated.add(this.showDataTab);
                charts.onDeactivated.add(this.hideDataTab);
                return context.sync();
     });
});

this is my function for show and hide the tab

private async showDataTab() {
        console.info('showtab');
        // @ts-ignore
        const myContextualTab: Office.Tab = { id: 'CtxTab1', visible: true };
        // @ts-ignore
        const ribbonUpdater: Office.RibbonUpdaterData = { tabs: [myContextualTab] };
        // @ts-ignore
        await Office.ribbon.requestUpdate(ribbonUpdater);
    }
private async hideDataTab() {
        console.info('hidetab');
        // @ts-ignore
        const myContextualTab: Office.Tab = { id: 'CtxTab1', visible: false };
        // @ts-ignore
        const ribbonUpdater: Office.RibbonUpdaterData = { tabs: [myContextualTab] };
        // @ts-ignore
        await Office.ribbon.requestUpdate(ribbonUpdater);
    }

this is my JSON

private GetContextualTabsJsonSupportedLocale() {
        const displayLanguage = Office.context.displayLanguage;
        switch (displayLanguage) {
            case 'en-US':
                return `{
                        "actions": [
                            {
                            "id": "executeWriteData",
                            "type": "ExecuteFunction",
                            "functionName": "writeData"
                            }
                        ],
                        "tabs": [
                            {
                            "id": "CtxTab1",
                            "label": "Contoso Data",
                            "groups": [
                                {
                                "id": "CustomGroup111",
                                "label": "Insertion",
                                "icon": [
                                    {
                                        "size": 32,
                                        "sourceLocation": "https://i.imgur.com/jdPJs1D.png"
                                    },
                                    {
                                        "size": 80,
                                        "sourceLocation": "https://i.imgur.com/jdPJs1D.png"
                                    }
                                ],
                                "controls": [
                                    {
                                        "type": "Button",
                                        "id": "CtxBt112",
                                        "actionId": "executeWriteData",
                                        "enabled": false,
                                        "label": "Write Data",
                                        "superTip": {
                                            "title": "Data Insertion",
                                            "description": "Use this button to insert data into the document."
                                        },
                                        "icon": [
                                            {
                                                "size": 32,
                                                "sourceLocation": "https://i.imgur.com/jdPJs1D.png"
                                            },
                                            {
                                                "size": 80,
                                                "sourceLocation": "https://i.imgur.com/jdPJs1D.png"
                                            }
                                        ]
                                    }
                                ]
                                }
                            ]
                            }
                        ]
                        }`;

            default:
                return '';
         }
    }

• Additional details:
  1. I try to use the <OverriddenByRibbonApi>true</OverriddenByRibbonApi> on my custom tab for checking my application can call requestCreateControls method. Then, my custom tab is shown when I add the add-in.

Context

After running the code and add my add-in. when clicking a chart my custom contextual should shows.

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: Laptop
• Host [Excel, Word, PowerPoint, etc.]: Excel
• Office version number: version 2102 (Build 13801.20274 Click-to-Run) Current Chanel Preview
• Operating System: Windows

Useful logs

• [/] Screenshots

[trigurl]

Hi @sitthinan, I am an engineer on the Office team, can you show me your add-in xml manifest please?

[sitthinan]

Hi @trigurl , This is my xml custom tab

[trigurl]

Hello, since you did not provide me with your full manifest, can you double check whether it is using the shared runtime? Your add-in must be shared runtime. `

`

[ghost]

This issue has been automatically marked as stale because it is marked as needing author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your interest in Office Add-ins!

[ghost]

This issue has been closed due to inactivity. Please comment if you still need assistance and we'll re-open the issue.