SharePoint 2013: Novedades en los Servicios de Excel (II)!

Siguiendo con las novedades de los Servicios de Excel, en esta ocasión vamos a ver una “pequeña joya” que sobre la base de los Servicios de Excel y JavaScript nos permite consumir una tabla estática HTML y convertirla en un origen de datos que se pueda explotar en Excel. Se trata de las llamadas vistas interactivas Excel. Para ver esta novedad en funcionamiento:

  • En nuestro sitio de trabajo, creamos una página Wiki o una página de WebParts.
  • Añadimos a la página creada una WebPart de tipo “Editor de contenido”.
  • A través de la opción HTML de esta WebPart, añadimos el siguiente etiquetado HTML que contiene los elementos claves para poder usar esta funcionalidad de vistas interactivas. Como veis:
    • En primer lugar añadimos un botón que nos permite abrir la funcionalidad de creación de vistas interactivas.
    • A continuación añadimos el código HTML de la tabla estática.
    • Finalmente añadimos la referencia a las funciones JavaScript que permiten realizar este análisis.
<a href="#" name="MicrosoftExcelButton" data-xl-buttonStyle="Small" data-xl-tabletitle="My Table Title"></a>
<table border="1">
     <tr>
        <th>Año</th>
        <th>Rural</th>
        <th>Urbano</th>
        <th>Total</th>
     </tr>
     <tr>
        <td>1980</td>
        <td>547279</td>
        <td>600000</td>
        <td>1147279</td>
     </tr>
     <tr>
        <td>1990</td>
        <td>600279</td>
        <td>1000000</td>
        <td>1600279</td>
     </tr>
     <tr>
        <td>2000</td>
        <td>800000</td>
        <td>1200000</td>
        <td>2000000</td>
     </tr>
 </table> 
<script src="http://r.office.microsoft.com/r/rlidExcelButton?v=1&kip=1" type="text/javascript"></script>
  • Como resultado, en la página visualizamos el botón de análisis y la tabla estática.
  • Si pulsamos el botón, se lanza la funcionalidad de vistas interactivas que nos muestra una primera preview de tabla de datos con mapas de color y capacidades de filtrado. Además, podemos hacer el switch a otras visualizaciones.

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

image image

Referencia: