Suplementos do PowerPoint

Você pode usar suplementos do PowerPoint na criação de soluções envolventes para as apresentações de seus usuários em todas as plataformas, incluindo Windows, iPad, Mac e em um navegador. Você pode criar dois tipos de comandos de suplementos do PowerPoint:

  • Use suplementos de conteúdo para adicionar conteúdo dinâmico do HTML5 às suas apresentações. Por exemplo, confira o suplemento LucidChart Diagrams for PowerPoint que pode ser usado para inserir um diagrama interativo do LucidChart para seu conjunto.

  • Use suplementos do painel de tarefas para exibir as informações de referência ou inserir dados na apresentação através de um serviço. Por exemplo, consulte o suplemento Pexels Free Stock Photos, que você pode usar para adicionar fotos profissionais à sua apresentação.

Cenários de suplemento do PowerPoint

Os exemplos de código no artigo mostram algumas tarefas básicas para desenvolver suplementos para o PowerPoint. Além disso, observe o seguinte:

  • Para exibir as informações, esses exemplos dependem da função app.showNotification, incluída em modelos de projeto de Suplementos do Office do Visual Studio. Se você não estiver usando o Visual Studio para desenvolver seu suplemento, será necessário substituir a função showNotification por seu próprio código.

  • Vários desses exemplos também usam um Globals objeto que é declarado além do escopo dessas funções como: var Globals = {activeViewHandler:0, firstSlideId:0};

  • Para usar esses exemplos, seu suplemento de projeto deverá referenciar a biblioteca do Office.js 1.1 ou posterior.

Detecte a exibição ativa da apresentação e manipule o evento ActiveViewChanged

Se você estiver criando um suplemento de conteúdo, será necessário obter o modo de exibição ativo da apresentação e manipular o ActiveViewChanged evento, como parte do seu Office.Initialize manipulador.

Observação

No PowerPoint Online na Web, o evento Document.ActiveViewChanged nunca será acionado porque o modo de Apresentação de Slides é tratado como uma nova sessão. Nesse caso, o suplemento deve obter o modo de exibição ativo ao carregar, conforme observado abaixo.

No seguinte exemplo de código:

  • A getActiveFileView função chama o método Document.getActiveViewAsync para retornar se o modo de exibição atual da apresentação é "editar" (qualquer uma das exibições em que você pode editar slides, como Normal ou Modo de Exibição de Contorno) ou "leitura" (Apresentação de Slides ou Exibição de Leitura).

  • A registerActiveViewChanged função chama o método addHandlerAsync para registrar um manipulador para o evento Document.ActiveViewChanged .

//general Office.initialize function. Fires on load of the add-in.
Office.initialize = function(){

    //Gets whether the current view is edit or read.
    const currentView = getActiveFileView();

    //register for the active view changed handler
    registerActiveViewChanged();

    //render the content based off of the currentView
    //....
}

function getActiveFileView()
{
    Office.context.document.getActiveViewAsync(function (asyncResult) {
        if (asyncResult.status == "failed") {
            app.showNotification("Action failed with error: " + asyncResult.error.message);
        }
        else {
            app.showNotification(asyncResult.value);
        }
    });

}

function registerActiveViewChanged() {
    Globals.activeViewHandler = function (args) {
        app.showNotification(JSON.stringify(args));
    }

    Office.context.document.addHandlerAsync(Office.EventType.ActiveViewChanged, Globals.activeViewHandler,
        function (asyncResult) {
            if (asyncResult.status == "failed") {
                app.showNotification("Action failed with error: " + asyncResult.error.message);
            }
            else {
                app.showNotification(asyncResult.status);
            }
        });
}

No exemplo de código a seguir, a função getSelectedRange chama o método Document.getSelectedDataAsync para obter o objeto JSON retornado por asyncResult.value, que contém uma matriz denominada slides. A matriz slides contém índices, ids e títulos do intervalo selecionado slides (ou do slide atual, se vários slides não forem selecionados). Ela também salva a id do primeiro slide no intervalo selecionado em uma variável global.

function getSelectedRange() {
    // Get the id, title, and index of the current slide (or selected slides) and store the first slide id */
    Globals.firstSlideId = 0;

    Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange, function (asyncResult) {
        if (asyncResult.status == "failed") {
            app.showNotification("Action failed with error: " + asyncResult.error.message);
        }
        else {
            Globals.firstSlideId = asyncResult.value.slides[0].id;
            app.showNotification(JSON.stringify(asyncResult.value));
        }
    });
}

No seguinte exemplo de código, o método goToFirstSlide função chamadas a Document.goToByIdAsync para navegar até o primeiro slide identificado pela getSelectedRange função mostrada anteriormente.

function goToFirstSlide() {
    Office.context.document.goToByIdAsync(Globals.firstSlideId, Office.GoToType.Slide, function (asyncResult) {
        if (asyncResult.status == "failed") {
            app.showNotification("Action failed with error: " + asyncResult.error.message);
        }
        else {
            app.showNotification("Navigation successful");
        }
    });
}

No exemplo de código a seguir, a função goToSlideByIndex chama o método Document.goToByIdAsync para navegar para o próximo slide da apresentação.

function goToSlideByIndex() {
    const goToFirst = Office.Index.First;
    const goToLast = Office.Index.Last;
    const goToPrevious = Office.Index.Previous;
    const goToNext = Office.Index.Next;

    Office.context.document.goToByIdAsync(goToNext, Office.GoToType.Index, function (asyncResult) {
        if (asyncResult.status == "failed") {
            app.showNotification("Action failed with error: " + asyncResult.error.message);
        }
        else {
            app.showNotification("Navigation successful");
        }
    });
}

Obtenha a URL da apresentação

No exemplo de código a seguir, a getFileUrl função chama o método Document.getFileProperties para obter a URL do arquivo de apresentação.

function getFileUrl() {
    //Get the URL of the current file.
    Office.context.document.getFilePropertiesAsync(function (asyncResult) {
        const fileUrl = asyncResult.value.url;
        if (fileUrl == "") {
            app.showNotification("The file hasn't been saved yet. Save the file and try again");
        }
        else {
            app.showNotification(fileUrl);
        }
    });
}

Criar uma apresentação

O suplemento pode criar uma nova apresentação separada da instância do PowerPoint, na qual o suplemento está sendo executado atualmente. O namespace do PowerPoint tem o método createPresentation para essa finalidade. Quando esse método é chamado, a nova apresentação é aberta imediatamente e exibida em uma nova instância do PowerPoint. O suplemento permanece aberto e em execução com a apresentação anterior.

PowerPoint.createPresentation();

O método createPresentation também cria uma cópia de uma apresentação existente. O método aceita uma representação de cadeia de caracteres codificada em Base64 de um arquivo .pptx como parâmetro opcional. A apresentação resultante será uma cópia desse arquivo, supondo que o argumento da cadeia de caracteres seja um arquivo .pptx válido. A classe FileReader pode ser usada para converter um arquivo em uma cadeia de caracteres codificada com Base64, como demonstrado no exemplo a seguir.

const myFile = document.getElementById("file");
const reader = new FileReader();

reader.onload = function (event) {
    // strip off the metadata before the base64-encoded string
    const startIndex = reader.result.toString().indexOf("base64,");
    const copyBase64 = reader.result.toString().substr(startIndex + 7);

    PowerPoint.createPresentation(copyBase64);
};

// read in the file as a data URL so we can parse the base64-encoded string
reader.readAsDataURL(myFile.files[0]);

Confira também