Create a new snippet from a blank template.

Visualizar Imagen.EXCEL.yaml

name: Visualizar Imagen
description: Create a new snippet from a blank template.
host: EXCEL
api_set: {}
script:
  content: |
    $("#add-event-handler").click(addEventHandler);
    $("#remove-all-event-handlers").click(removeAllEventHandlers);

    let lastHandler: OfficeExtension.EventHandlerResult<Excel.Workbook>;
    let workbook: Excel.Workbook;

    async function addEventHandler() {
      try {
        if (workbook !== undefined) {
          await Excel.run(workbook, async (context) => {
            workbook = context.workbook;
            lastHandler = context.workbook.onSelectionChanged.add(onSelectionChanged);
            await context.sync();
          });
        } else {
          await Excel.run(async (context) => {
            workbook = context.workbook;
            lastHandler = context.workbook.onSelectionChanged.add(onSelectionChanged);
            await context.sync();
          });
        }
        //console.log("Event handler added. Try changing the selection.");
        $("#section_body").html("Iniciado, por favor seleccione una celda.");
      } catch (error) {
        OfficeHelpers.Utilities.log(error);
      }
    }

    async function removeAllEventHandlers() {
      try {
        await Excel.run(workbook, async (context) => {
          context.workbook.onSelectionChanged.removeAll();
          await context.sync();
          //console.log("All event handlers removed");
          $("#section_body").html("");
        });
      } catch (error) {
        OfficeHelpers.Utilities.log(error);
      }
    }
    async function onSelectionChanged() {
      //console.log("Selection changed, let's look up the address");
      //$("#section_body").html("Cargando...");
      await Excel.run(workbook, async (context) => {
        const val = context.workbook.getSelectedRange().load("values");
        const range = context.workbook.getSelectedRange().load("address");
        await context.sync();

        //console.log(range.address.includes("!N"));
        //console.log(val.values[0][0]);

        if (range.address.includes("!N")) {
          $("#section_body").html(
            '<iframe src="' + val.values[0][0] + '" style="height:2500px;width:500px;" title="JOTFROM" onLoad="$(\'body, html\').animate({scrollTop: \'0px\'}, 1000);"></iframe>'
          );
        } else if(
          range.address.includes("!G") ||
          range.address.includes("!I") ||
          range.address.includes("!K") 
        ) {
          $("#section_body").html('<img src="' + val.values[0][0] + '">');
        }

      });
    }
  language: typescript
template:
  content: "<section class=\"samples ms-font-m\">\n\t<h3>VISUALIZAR API</h3>\n\t<a id=\"add-event-handler\" class=\"ms-Button\">\n\t\t<span class=\"ms-Button-label\">Iniciar</span>\n\t</a>\n\t<a id=\"remove-all-event-handlers\" class=\"ms-Button\">\n\t\t<span class=\"ms-Button-label\">Terminar</span>\n\t</a>\n</section>\n<section id=\"section_body\" class=\"samples ms-font-m\">\n\t<img id=\"excel_imagen\" src=\"\">\n</section>"
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        /*display: block;*/
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }

    img{
      max-width:500px;
    }
  language: css
libraries: |-
  # Office.js
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
    # CSS Libraries
    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css
    # NPM libraries
    core-js@2.4.1/client/core.min.js
    @microsoft/office-js-helpers@0.6.0/dist/office.helpers.min.js
    jquery@3.1.1
    # IntelliSense: @types/library or node_modules paths or URL to d.ts files
    @types/office-js
    @types/core-js
    @microsoft/office-js-helpers/dist/office.helpers.d.ts
    @types/jquery