Criar guias contextuais personalizadas em Suplementos do Office

Uma guia contextual é um controle de guia oculto na faixa de opções do Office que é exibido na linha da guia quando um evento especificado ocorre no documento do Office. Por exemplo, a guia Design da Tabela que aparece na faixa de opções do Excel quando uma tabela é selecionada. Você inclui guias contextuais personalizadas em seu Suplemento do Office e especifica quando elas estão visíveis ou ocultas, criando manipuladores de eventos que alteram a visibilidade. (No entanto, as guias contextuais personalizadas não respondem a alterações de foco.)

Observação

Este artigo pressupõe que você esteja familiarizado com os conceitos básicos para comandos de suplemento. Revise-o se você não tiver trabalhado com comandos de suplemento (itens de menu personalizados e botões da faixa de opções) recentemente.

Pré-requisitos

No momento, as guias contextuais personalizadas só têm suporte no Excel e apenas nas seguintes plataformas e builds.

  • Excel Online
  • Excel no Windows: versão 2102 (Build 13801.20294) e posterior.
  • Excel no Mac: Versão 16.53 (21080600) e posterior.

Além disso, as guias contextuais personalizadas só funcionam em plataformas que dão suporte aos conjuntos de requisitos a seguir. Para obter mais informações sobre conjuntos de requisitos e como trabalhar com eles, consulte Especificar aplicativos do Office e requisitos de API.

Dica

Use as verificações de tempo de execução em seu código para testar se a combinação de host e plataforma do usuário dá suporte a esses conjuntos de requisitos, conforme descrito em Verificar a disponibilidade da API no tempo de execução. (A técnica de especificar os conjuntos de requisitos no manifesto, que também é descrita nesse artigo, não funciona atualmente para RibbonApi 1.2.) Como alternativa, você pode implementar uma experiência de interface do usuário alternativa quando não houver suporte para guias contextuais personalizadas.

Experimente um suplemento de exemplo

Para testar imediatamente um suplemento que implementa uma guia contextual personalizada, experimente Criar guias contextuais personalizadas em um exemplo de faixa de opções.

Assista a uma demonstração deste exemplo.

Comportamento de guias contextuais personalizadas

A experiência do usuário para guias contextuais personalizadas segue o padrão das guias contextuais internas do Office. A seguir estão os princípios básicos para o posicionamento de guias contextuais personalizadas.

  • Quando uma guia contextual personalizada está visível, ela aparece na extremidade direita da faixa de opções.
  • Se uma ou mais guias contextuais internas e uma ou mais guias contextuais personalizadas dos suplementos estiverem visíveis ao mesmo tempo, as guias contextuais personalizadas estarão sempre à direita de todas as guias contextuais internas.
  • Se o suplemento tiver mais de uma guia contextual e houver contextos nos quais mais de uma estiver visível, elas aparecerão na ordem em que são definidas no suplemento. (A direção é a mesma direção que o idioma do Office; ou seja, da esquerda para a direita em idiomas da esquerda para a direita, mas da direita para a esquerda em idiomas da direita para a esquerda.) Consulte Definir os grupos e controles que aparecem na guia para obter detalhes sobre como você os define.
  • Se mais de um suplemento tiver uma guia contextual visível em um contexto específico, elas aparecerão na ordem em que foram iniciados.
  • As guias contextuais personalizadas, ao contrário das guias principais personalizadas, não são adicionadas permanentemente à faixa de opções do aplicativo do Office. Eles estão presentes apenas em documentos do Office nos quais seu suplemento está sendo executado.

Etapas principais para incluir uma guia contextual em um suplemento

A seguir estão as principais etapas para incluir uma guia contextual personalizada em um suplemento.

  1. Configure o suplemento para usar um runtime compartilhado.
  2. Defina os grupos e controles que aparecem na guia.
  3. Registre a guia contextual no Office.
  4. Especifique as circunstâncias em que a guia ficará visível.

Configurar o suplemento para usar um runtime compartilhado

A adição de guias contextuais personalizadas exige que seu suplemento use o tempo de execução compartilhado. Para obter mais informações, confira Configurar um suplemento para usar um runtime compartilhado.

Definir os grupos e controles que aparecem na guia

Ao contrário das guias principais personalizadas, que são definidas no manifesto, as guias contextuais personalizadas são definidas em tempo de execução com um objeto JavaScript que você passa para o método Office.ribbon.requestCreateControls . Você pode definir o objeto diretamente como um literal de objeto JavaScript ou pode defini-lo como uma cadeia de caracteres JSON e convertê-lo em um objeto com JSON.parse antes de passá-lo. As guias contextuais personalizadas estão presentes apenas em documentos nos quais o suplemento está sendo executado no momento. Isso é diferente das guias principais personalizadas, que são adicionadas à faixa de opções do aplicativo do Office quando o suplemento é instalado e permanecem presentes quando outro documento é aberto. Além disso, o requestCreateControls método pode ser executado apenas uma vez em uma sessão do seu suplemento. Se ele for chamado novamente, um erro será gerado.

Vamos construir um exemplo de um objeto de guia contextual passo a passo. O esquema completo para o JSON da guia contextual está em dynamic-ribbon.schema.json. Se você estiver trabalhando com o Visual Studio Code, poderá usar esse arquivo para obter o IntelliSense e validar seu JSON. Para obter mais informações, consulte Editando JSON com o Visual Studio Code - Esquemas e configurações JSON.

  1. Comece criando um objeto JavaScript com duas propriedades de matriz chamadas actions e tabs. A actions matriz é uma especificação de todas as funções que podem ser executadas pelos controles na guia contextual. A tabs matriz define uma ou mais guias contextuais.

    {
      "actions": [
    
      ],
      "tabs": [
    
      ]
    }
    
  2. Este exemplo simples de uma guia contextual terá apenas um único botão e, portanto, apenas uma única ação. Adicione o seguinte como o único membro da actions matriz. Sobre essa marcação, observe:

    • As id propriedades and type são obrigatórias.

    • O valor de type pode ser ou "ExecuteFunction""ShowTaskpane".

    • A functionName propriedade só é usada quando o valor de type é ExecuteFunction. Seu valor é o nome de uma função definida no arquivo de código-fonte referenciado no manifesto do suplemento. O local do arquivo de código-fonte depende do tipo de manifesto que seu suplemento usa.

    • Em uma etapa posterior, você mapeará essa ação para um botão na guia contextual.

    {
      "id": "executeWriteData",
      "type": "ExecuteFunction",
      "functionName": "writeData"
    }
    
  3. Adicione o seguinte como o único membro da tabs matriz. Sobre essa marcação, observe:

    • A propriedade id é obrigatória. Use uma ID breve e descritiva que seja exclusiva entre todas as guias contextuais em seu suplemento.
    • A propriedade label é obrigatória. É uma cadeia de caracteres amigável para servir como o rótulo da guia contextual.
    • A propriedade groups é obrigatória. Ele define os grupos de controles que serão exibidos na guia. Deve ter pelo menos um membro.

    Observação

    O objeto guia também pode ter uma propriedade opcional visible que especifica se a guia ficará visível imediatamente quando o suplemento for iniciado. Como as guias contextuais normalmente ficam ocultas até que um evento do usuário acione sua visibilidade (como o usuário selecionando uma entidade de algum tipo no documento), a visible propriedade é padronizada para false quando não estiver presente. Em uma seção posterior, mostraremos como definir a propriedade como true em resposta a um evento.

    {
      "id": "CtxTab1",
      "label": "Contoso Data",
      "groups": [
    
      ]
    }
    
  4. No exemplo simples em andamento, a guia contextual tem apenas um único grupo. Adicione o seguinte como o único membro da groups matriz. Sobre essa marcação, observe:

    • Todas as propriedades são obrigatórias.
    • A id propriedade deve ser exclusiva entre todos os grupos no manifesto. Use uma ID breve e descritiva, de até 125 caracteres.
    • É label uma cadeia de caracteres amigável para servir como rótulo do grupo.
    • O icon valor da propriedade é uma matriz de objetos que especifica os ícones que o grupo terá na faixa de opções, dependendo do tamanho da faixa de opções e da janela do aplicativo Office.
    • O controls valor da propriedade é uma matriz de objetos que especificam os botões e menus no grupo. Deve haver pelo menos um.
    {
        "id": "CustomGroup111",
        "label": "Insertion",
        "icon": [
    
        ],
        "controls": [
    
        ]
    }
    
  5. Cada grupo deve ter um ícone de pelo menos três tamanhos: 16x16 px, 32x32 px e 80x80 px. Opcionalmente, você também pode ter ícones de tamanhos 20x20 px, 24x24 px, 40x40 px, 48x48 px e 64x64 px. O Office decide qual ícone usar com base no tamanho da faixa de opções e na janela do aplicativo do Office. Adicione os seguintes objetos à matriz de ícones. (Se os tamanhos da janela e da faixa de opções forem grandes o suficiente para que pelo menos um dos controles do grupo apareça, nenhum ícone de grupo aparecerá. Por exemplo, observe o grupo Estilos na faixa de opções do Word à medida que você reduz e expande a janela do Word.) Sobre essa marcação, observe:

    • Ambas as propriedades são obrigatórias.

    • A size unidade de medida da propriedade é pixels. Os ícones são sempre quadrados, portanto, o número é a altura e a largura.

    • A sourceLocation propriedade especifica a URL completa do ícone.

      Importante

      Assim como você normalmente deve alterar as URLs no manifesto do suplemento ao passar do desenvolvimento para a produção, você também deve alterar as URLs em suas guias contextuais JSON.

    {
        "size": 16,
        "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/Group16x16.png"
    },
    {
        "size": 32,
        "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/Group32x32.png"
    },
    {
        "size": 80,
        "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/Group80x80.png"
    }
    
  6. Em nosso exemplo simples em andamento, o grupo tem apenas um único botão. Adicione o objeto a seguir como o único membro da controls matriz. Sobre essa marcação, observe:

    • Todas as propriedades, exceto enabled, são necessárias.
    • type Especifica o tipo de controle. Os valores podem ser "Button", "Menu", ou "MobileButton".
    • id Pode ter até 125 caracteres.
    • actionId deve ser a ID de uma ação definida na actions matriz. (Consulte a etapa 1 desta seção.)
    • label é uma cadeia de caracteres amigável para servir como o rótulo do botão.
    • superTip Representa uma forma avançada de dica de ferramenta. title As propriedades and description são necessárias.
    • icon Especifica os ícones para o botão. As observações anteriores sobre o ícone do grupo também se aplicam aqui.
    • enabled (opcional) Especifica se o botão é habilitado quando a guia contextual aparece pela primeira vez. O padrão, se não estiver presente, é true.
    {
        "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": 16,
                "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/WriteDataButton16x16.png"
            },
            {
                "size": 32,
                "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/WriteDataButton32x32.png"
            },
            {
                "size": 80,
                "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/WriteDataButton80x80.png"
            }
        ]
    }
    

Veja a seguir o exemplo completo do objeto de guia contextual.

{
  "actions": [
    {
      "id": "executeWriteData",
      "type": "ExecuteFunction",
      "functionName": "writeData"
    }
  ],
  "tabs": [
    {
      "id": "CtxTab1",
      "label": "Contoso Data",
      "groups": [
        {
          "id": "CustomGroup111",
          "label": "Insertion",
          "icon": [
            {
                "size": 16,
                "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/Group16x16.png"
            },
            {
                "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": 16,
                        "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/WriteDataButton16x16.png"
                    },
                    {
                        "size": 32,
                        "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/WriteDataButton32x32.png"
                    },
                    {
                        "size": 80,
                        "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/WriteDataButton80x80.png"
                    }
                ]
            }
          ]
        }
      ]
    }
  ]
}

Registrar a guia contextual no Office com requestCreateControls

A guia contextual é registrada no Office chamando o método Office.ribbon.requestCreateControls . Isso geralmente é feito na função atribuída ou Office.initialize com a Office.onReady função. Para obter mais informações sobre essas funções e inicializar o suplemento, consulte Inicializar seu suplemento do Office. No entanto, você pode chamar o método a qualquer momento após a inicialização.

Importante

O requestCreateControls método pode ser chamado apenas uma vez em uma determinada sessão de um suplemento. Um erro é gerado se for chamado novamente.

Os exemplos a seguir mostram ambas as abordagens.

literal de objeto JavaScript

Office.onReady(async () => {
    const contextualTab = { ... }; // Assign the object such as the one at the end of the preceding section.
    await Office.ribbon.requestCreateControls(contextualTab);
});

Cadeia de caracteres JSON analisada em tempo de execução

Office.onReady(async () => {
    const contextualTabJSON = ` ... `; // Assign the JSON string such as the one at the end of the preceding section.
    const contextualTab = JSON.parse(contextualTabJSON);
    await Office.ribbon.requestCreateControls(contextualTab);
});

Especifique os contextos em que a guia ficará visível com requestUpdate

Normalmente, uma guia contextual personalizada deve aparecer quando um evento iniciado pelo usuário altera o contexto do suplemento. Considere um cenário em que a guia deve estar visível quando, e somente quando, um gráfico (na planilha padrão de uma pasta de trabalho do Excel) é ativado.

Comece atribuindo manipuladores. Isso geralmente é feito na função, Office.onReady como no exemplo a seguir, que atribui manipuladores (criados em uma etapa posterior) aos onActivated eventos and onDeactivated de todos os gráficos na planilha.

Office.onReady(async () => {
    const contextualTab = { ... }; // Assign the object or use JSON.parse() on a JSON string.
    await Office.ribbon.requestCreateControls(contextualTab);

    await Excel.run(context => {
        const charts = context.workbook.worksheets
            .getActiveWorksheet()
            .charts;
        charts.onActivated.add(showDataTab);
        charts.onDeactivated.add(hideDataTab);
        return context.sync();
    });
});

Em seguida, defina os manipuladores. Veja a seguir um exemplo simples de um showDataTab, mas consulte Como lidar com o erro HostRestartNeeded mais adiante neste artigo para obter uma versão mais robusta da função. Sobre este código, observe:

  • O Office controla quando atualiza o estado da faixa de opções. O método Office.ribbon.requestUpdate enfileira uma solicitação de atualização. O método resolverá o Promise objeto assim que enfileirar a solicitação, não quando a faixa de opções realmente for atualizada.
  • O parâmetro do requestUpdate método é um objeto RibbonUpdaterData que (1) especifica a guia por sua ID exatamente como especificado no JSON e (2) especifica a visibilidade da guia.
  • Se você tiver mais de uma guia contextual personalizada que deve estar visível no mesmo contexto, basta adicionar outros objetos de guia à tabs matriz.
async function showDataTab() {
    await Office.ribbon.requestUpdate({
        tabs: [
            {
                id: "CtxTab1",
                visible: true
            }
        ]});
}

O manipulador para ocultar a guia é quase idêntico, exceto que ele define a visible propriedade de volta para false.

A biblioteca JavaScript do Office também fornece várias interfaces (tipos) para facilitar a construção do RibbonUpdateData objeto. A seguir está a showDataTab função no TypeScript e ela usa esses tipos.

const showDataTab = async () => {
    const myContextualTab: Office.Tab = {id: "CtxTab1", visible: true};
    const ribbonUpdater: Office.RibbonUpdaterData = { tabs: [ myContextualTab ]};
    await Office.ribbon.requestUpdate(ribbonUpdater);
}

Alternar a visibilidade da guia e o status habilitado de um botão ao mesmo tempo

O requestUpdate método também é usado para alternar o status habilitado ou desabilitado de um botão personalizado em uma guia contextual personalizada ou em uma guia principal personalizada. Para obter detalhes sobre isso, consulte Alterar a disponibilidade de comandos de suplemento. Pode haver cenários em que você queira alterar a visibilidade de uma guia e o status habilitado de um botão ao mesmo tempo. Você faz isso com uma única chamada de requestUpdate. Veja a seguir um exemplo em que um botão em uma guia principal é habilitado ao mesmo tempo em que uma guia contextual se torna visível.

function myContextChanges() {
    Office.ribbon.requestUpdate({
        tabs: [
            {
                id: "CtxTab1",
                visible: true
            },
            {
                id: "OfficeAppTab1",
                groups: [
                    {
                        id: "CustomGroup111",
                        controls: [
                            {
                                id: "MyButton",
                                enabled: true
                            }
                        ]
                    }
                ]
            }
        ]
    });
}

No exemplo a seguir, o botão habilitado está na mesma guia contextual que está se tornando visível.

function myContextChanges() {
    Office.ribbon.requestUpdate({
        tabs: [
            {
                id: "CtxTab1",
                visible: true,
                groups: [
                    {
                        id: "CustomGroup111",
                        controls: [
                            {
                                id: "MyButton",
                                enabled: true
                           }
                       ]
                   }
               ]
            }
        ]
    });
}

Abrir um painel de tarefas a partir de guias contextuais

Para abrir o painel de tarefas a partir de um botão em uma guia contextual personalizada, crie uma ação no JSON com um type de ShowTaskpane. Em seguida, defina um botão com a actionId propriedade definida como a id ação. Isso abre o painel de tarefas padrão especificado no manifesto.

{
  "actions": [
    {
      "id": "openChartsTaskpane",
      "type": "ShowTaskpane",
      "title": "Work with Charts"
    }
  ],
  "tabs": [
    {
      // Some tab properties omitted.
      "groups": [
        {
          // Some group properties omitted.
          "controls": [
            {
                "type": "Button",
                "id": "CtxBt112",
                "actionId": "openChartsTaskpane",
                "enabled": false,
                "label": "Open Charts Taskpane",
                // Some control properties omitted.
            }
          ]
        }
      ]
    }
  ]
}

Para abrir qualquer painel de tarefas que não seja o painel de tarefas padrão, especifique uma sourceLocation propriedade na definição da ação. No exemplo a seguir, um segundo painel de tarefas é aberto a partir de um botão diferente.

Importante

  • Quando a sourceLocation é especificado para a ação, o painel de tarefas não usa o tempo de execução compartilhado. Ele é executado em um novo tempo de execução separado.
  • Não é possível usar mais de um painel de tarefas o tempo de execução compartilhado, portanto, não mais do que uma ação do tipo ShowTaskpane pode omitir a sourceLocation propriedade.
{
  "actions": [
    {
      "id": "openChartsTaskpane",
      "type": "ShowTaskpane",
      "title": "Work with Charts"
    },
    {
      "id": "openTablesTaskpane",
      "type": "ShowTaskpane",
      "title": "Work with Tables",
      "sourceLocation": "https://MyDomain.com/myPage.html"
    }
  ],
  "tabs": [
    {
      // Some tab properties omitted.
      "groups": [
        {
          // Some group properties omitted.
          "controls": [
            {
                "type": "Button",
                "id": "CtxBt112",
                "actionId": "openChartsTaskpane",
                "enabled": false,
                "label": "Open Charts Taskpane",
                // Some control properties omitted.
            },
            {
                "type": "Button",
                "id": "CtxBt113",
                "actionId": "openTablesTaskpane",
                "enabled": false,
                "label": "Open Tables Taskpane",
                // Some control properties omitted.
            }
          ]
        }
      ]
    }
  ]
}

Localizar o objeto de guia contextual

O objeto para o qual é passado requestCreateControls não está localizado da mesma forma que a marcação de manifesto para guias principais personalizadas é localizada (que é descrita em Controlar a localização do manifesto). Em vez disso, a localização deve ocorrer em tempo de execução usando objetos distintos para cada localidade. Sugerimos que você use uma switch instrução que teste a propriedade Office.context.displayLanguage . Apresentamos um exemplo a seguir.

function getContextualTabForLocale () {
    const displayLanguage = Office.context.displayLanguage;

        switch (displayLanguage) {
            case 'en-US':
                return {
                    "actions": [
                        // Actions omitted.
                     ],
                    "tabs": [
                        {
                          "id": "CtxTab1",
                          "label": "Contoso Data",
                          "groups": [
                              // Groups omitted.
                          ]
                        }
                    ]
                };

            case 'fr-FR':
                return {
                    "actions": [
                        // Actions omitted.
                    ],
                    "tabs": [
                        {
                          "id": "CtxTab1",
                          "label": "Contoso Données",
                          "groups": [
                              // Groups omitted.
                          ]
                       }
                    ]
               };

            // Other cases omitted.
       }
}

Em seguida, seu código chama a função para obter o objeto localizado que é passado para requestCreateControls, como no exemplo a seguir.

const contextualTab = getContextualTabForLocale();

Práticas recomendadas para guias contextuais personalizadas

Implemente uma experiência de interface do usuário alternativa quando não houver suporte para guias contextuais personalizadas

Algumas combinações de plataforma, aplicativo do Office e build do Office não dão suporte requestCreateControlsao . Seu suplemento deve ser projetado para fornecer uma experiência alternativa aos usuários que estão executando o suplemento em uma dessas combinações. As seções a seguir descrevem duas maneiras de fornecer uma experiência de fallback.

Usar guias ou controles não contextuais

O manifesto do suplemento fornece uma maneira de criar uma experiência de fallback em um suplemento que implementa guias contextuais personalizadas quando o suplemento está em execução em um aplicativo ou plataforma que não dá suporte a guias contextuais personalizadas. A estratégia é definir uma guia principal personalizada (ou seja, uma guia personalizada não contextual ) no manifesto que duplique as personalizações da faixa de opções das guias contextuais personalizadas em seu suplemento. Em seguida, você usa a marcação de manifesto especial para permitir que a guia principal personalizada fique visível o tempo todo em combinações de plataforma e versão que não dão suporte a guias contextuais personalizadas. O processo depende do tipo de manifesto que seu suplemento usa.

Comece definindo uma guia principal personalizada (ou seja, uma guia personalizada não contextual ) no manifesto que duplica as personalizações de faixa de opções das guias contextuais personalizadas em seu suplemento. Em seguida, marque quaisquer grupos de controle, controles individuais ou itens de menu que não devem estar visíveis em plataformas que dão suporte a guias contextuais. Você marca um grupo, controle ou objeto de item de menu adicionando uma "overriddenByRibbonApi" propriedade a ele e definindo seu valor como true. O efeito de fazer isso é o seguinte:

  • Se o suplemento for executado em um aplicativo e plataforma que dá suporte a guias contextuais personalizadas, os grupos, controles e itens de menu personalizados marcados não aparecerão na faixa de opções. Em vez disso, a guia contextual personalizada será criada quando o suplemento chamar o requestCreateControls método.
  • Se o suplemento for executado em um aplicativo ou plataforma que não dá suporte requestCreateControlsa , os grupos, controles e itens de menu aparecerão na guia núcleo personalizada.

Apresentamos um exemplo a seguir. Observe que "Contoso.MyButton1" aparecerá na guia principal personalizada somente quando não houver suporte para guias contextuais personalizadas. No entanto, o grupo pai (com "ContosoButton2") e a guia principal personalizada serão exibidos independentemente de haver suporte para guias contextuais personalizadas.

"extensions": [
    ...
    {
        ...
        "ribbons": [
            ...
            {
                ...
                "tabs": [
                    {
                        "id": "MyTab",
                        "groups": [
                            {
                                ...
                                "controls": [
                                    {
                                        "id": "Contoso.MyButton1",
                                        ...
                                        "overriddenByRibbonApi": true
                                    },
                                    {
                                        "id": "Contoso.MyButton2",
                                        ...
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

Veja a seguir outro exemplo. Observe que "MyControlGroup" aparecerá na guia principal personalizada somente quando não houver suporte para guias contextuais personalizadas. No entanto, a guia principal personalizada pai (com grupos não marcados) será exibida independentemente de haver suporte para guias contextuais personalizadas.

"extensions": [
    ...
    {
        ...
        "ribbons": [
            ...
            {
                ...
                "tabs": [
                    {
                        "id": "MyTab",
                        "groups": [
                            {
                                "id": "MyControlGroup",
                                "overriddenByRibbonApi": true
                                ...
                                "controls": [
                                    {
                                        "id": "Contoso.MyButton1",
                                        ...
                                    }
                                ]
                            },
                            ... other groups configured here
                        ]
                    }
                ]
            }
        ]
    }
]

Quando um controle de menu pai é marcado com "overriddenByRibbonApi": true, ele não fica visível e toda a sua marcação filho é ignorada quando não há suporte para guias contextuais personalizadas. Portanto, não importa se algum desses itens de menu filho tem a propriedade ou qual é o "overriddenByRibbonApi" seu valor. A implicação disso é que, se um item de menu deve ser visível em todos os contextos, não apenas ele não deve ser marcado com "overriddenByRibbonApi": true, mas seu controle de menu ancestral também não deve ser marcado dessa forma. Um ponto semelhante se aplica aos controles de faixa de opções. Se um controle deve estar visível em todos os contextos, não apenas ele não deve ser marcado com "overriddenByRibbonApi": true, mas seu grupo pai também não deve ser marcado dessa forma.

Importante

Não marque todos os itens filho de um menu com "overriddenByRibbonApi": true. Isso é inútil se o elemento pai estiver marcado com "overriddenByRibbonApi": true pelos motivos indicados no parágrafo anterior. Além disso, se você deixar de fora a "overriddenByRibbonApi" propriedade no controle de menu pai (ou defini-la como false), o pai aparecerá independentemente de haver suporte para guias contextuais personalizadas, mas ficará vazio quando houver suporte. Portanto, se todos os elementos filho não forem exibidos quando houver suporte para guias contextuais personalizadas, marque o controle de menu pai com "overriddenByRibbonApi": true.

Um ponto paralelo se aplica a grupos e controles. Não marque todos os controles em um grupo com "overriddenByRibbonApi": true. Isso é inútil se o grupo pai estiver marcado com "overriddenByRibbonApi": true. Além disso, se você deixar de fora a "overriddenByRibbonApi" propriedade no grupo pai (ou defini-la como false), o grupo aparecerá independentemente de haver suporte para guias contextuais personalizadas, mas não terá controles quando forem suportadas. Portanto, se todos os controles não forem exibidos quando houver suporte para guias contextuais personalizadas, marque o grupo pai com "overriddenByRibbonApi": true.

Usar APIs que mostram ou ocultam um painel de tarefas em contextos especificados

Como alternativa ao uso do manifesto, seu suplemento pode definir um painel de tarefas com controles de interface do usuário que duplicam a funcionalidade dos controles em uma guia contextual personalizada. Em seguida, use os métodos Office.addin.showAsTaskpane e Office.addin.hide para mostrar o painel de tarefas quando a guia contextual teria sido mostrada se houvesse suporte. Para obter detalhes sobre como usar esses métodos, confira Mostrar ou ocultar o painel de tarefas do seu Suplemento do Office.

Lidar com o erro HostRestartNeeded

Em alguns cenários, o Office não consegue atualizar a faixa de opções e retornará um erro. Por exemplo, se o suplemento for atualizado e o suplemento atualizado tiver um conjunto diferente de comandos de suplemento personalizados, o aplicativo do Office deverá ser fechado e reaberto. Até que isso ocorra, o método requestUpdate retornará o erro HostRestartNeeded. Seu código deve lidar com esse erro. Veja a seguir um exemplo de como. Nesse caso, o método reportError exibe o erro para o usuário.

function showDataTab() {
    try {
        Office.ribbon.requestUpdate({
            tabs: [
                {
                    id: "CtxTab1",
                    visible: true
                }
            ]});
    }
    catch(error) {
        if (error.code == "HostRestartNeeded"){
            reportError("Contoso Awesome Add-in has been upgraded. Please save your work, then close and reopen the Office application.");
        }
    }
}

Confira também