Creating Custom tab in Excel by JavaScript (json format)

Question

Office.onReady(async() => {
  // If needed, Office.js is ready to be called
  const contextualTabJSON = `{
    "actions": [
      {
        "id": "executeWriteData",
        "type": "ExecuteFunction",
        "functionName": "writeData"
      }
    ],
    "tabs": [
      {
        "id": "CtxTab1",
        "label": "Contoso Data",
        "groups": [
          {
            "id": "CustomGroup111",
            "label": "Insertion",
            "icon": [
              {
                  "size": 32,
                  "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/Group32x32.png"
              },
              {
                  "size": 80,
                  "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/Group80x80.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://cdn.contoso.com/addins/datainsertion/Images/WriteDataButton32x32.png"
                      },
                      {
                          "size": 80,
                          "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/WriteDataButton80x80.png"
                      }
                  ]
              }
            ]
          }
        ]
      }
    ]
  }`; // Assign the JSON string.

  const contextualTab = JSON.parse(contextualTabJSON);
  await Office.ribbon.requestCreateControls(contextualTab);

});

Is it Possible to add custom tab in excel by js or react js ??? — Vikash Choudhary, Aug 31 '22 at 07:42
Yes, it is. But you need to make sure that your host supports them by checking requirements sets specified in my post. Try running the sample project I mentioned. Does it work for you? — Eugene Astafiev, Aug 31 '22 at 12:14

Eugene Astafiev · Accepted Answer · 2022-09-26T21:46:37.963

1

I don't think the onReady callback is the right place for such things. Try running the following sample web add-in which creates a custom ribbon when selection is changed in Excel, see Create custom contextual tabs on the ribbon.

Custom contextual tabs are currently only supported on Excel and only on these platforms and builds.

Excel on Windows (Microsoft 365 subscription only): Version 2102 (Build 13801.20294) or later.
Excel on Mac: Version 16.53.806.0 or later.
Excel on the web

Custom contextual tabs work only on platforms that support the following requirement sets:

RibbonApi 1.2
SharedRuntime 1.1

Read more about contextual ribbon tabs in the Create custom contextual tabs in Office Add-ins article.

edited Sep 26 '22 at 21:46

answered Aug 31 '22 at 12:13

Eugene Astafiev

47,483
3
24
45

thanks @Eugene Astafiev for your answer – Vikash Choudhary Sep 02 '22 at 12:09
@VikashChoudhary don't forget to vote/accept if your issue is resolved – FreeSoftwareServers Sep 26 '22 at 21:45

Creating Custom tab in Excel by JavaScript (json format)

1 Answers1