Usar el widget experimental Vista de lista de escritorio en complementos de SharePoint
Puede usar el widget Vista de lista de escritorio en cualquier página web, aunque la página no esté hospedada en SharePoint. Use el widget Vista de lista en los complementos para mostrar los datos en listas de SharePoint que se hospedan en un sitio de SharePoint.
Advertencia
Widgets de Web de Office: Experimental solo se ofrece a efectos de investigación y comentarios. No se usa en escenarios de producción. El comportamiento de Office Web Widgets puede cambiar significativamente en futuras versiones. Lea y revise los Términos de licencia de Office Web Widgets: Experimental.
Puede usar el widget Vista de lista para mostrar los datos de una lista de SharePoint de forma similar al widget Vista de lista normal, pero se puede usar en complementos y sitios web que no están hospedados necesariamente en SharePoint.
Widget Vista de lista de escritorio donde se muestran datos en una lista
Puede especificar la vista en la lista de SharePoint que quiera usar para mostrar los datos. El widget Vista de lista muestra las columnas y los elementos en el orden especificado por la vista.
El widget Vista de lista usa la biblioteca entre dominios para obtener los datos de lista. Por este motivo, la comunicación se produce a nivel de cliente.
Nota:
El widget Vista de lista de escritorio no habilita todos los escenarios de la vista de lista nativa.
Los escenarios siguientes no son válidos con la versión actual del widget:
- Usar el widget en esquemas de autenticación que no sean compatibles de forma nativa con la biblioteca entre dominios.
- Usar el widget con orígenes de datos que no sean listas ni bibliotecas de SharePoint.
- Enlazar datos en el widget.
- Vistas de usuario táctiles.
- Edición en línea de usuarios.
- Mostrar información de presencia.
- Proporcionar plantillas de representación personalizadas.
- Escenarios locales. De momento, el widget solo funciona en SharePoint Online.
Requisitos previos para usar los ejemplos de este artículo
Para seguir los ejemplos de este artículo, necesita lo siguiente:
Visual Studio 2013 o posterior.
Administrador de paquetes NuGet. Para obtener más información, vea Instalación de herramientas de cliente NuGet.
Un entorno de desarrollo de SharePoint (es necesario aislar la aplicación en los escenarios locales).
Paquete NuGet Office Web Widgets: Experimental. Para obtener más información sobre cómo instalar un paquete NuGet, vea NuGet Package Manager UI (Interfaz de usuario del Administrador de paquetes NuGet). También puede examinar la Página Galería de NuGet.
Usar el widget Vista de lista de escritorio en un complemento de SharePoint hospedado por el proveedor
En este ejemplo, hay una página sencilla hospedada fuera de SharePoint que declara un widget Vista de lista de escritorio.
Para usar el widget Vista de lista, debe hacer lo siguiente:
Crear un Complemento de SharePoint y proyectos web.
Crear una lista en la web de complemento. Este paso también garantiza que se cree una web de complemento cuando los usuarios implementen el complemento.
Nota:
La biblioteca entre dominios requiere la existencia de una web de complemento. El widget Vista de lista se comunica con SharePoint mediante la biblioteca entre dominios.
Cree una página de complemento donde se declare una instancia del widget Vista de lista con formato HTML.
Para crear un complemento de SharePoint y proyectos web
Abra Visual Studio como administrador. (Para ello, seleccione el icono de Visual Studio del menú Inicio y elija Ejecutar como administrador).
Cree un proyecto con la plantilla Complemento de SharePoint. La plantilla Complemento de SharePoint se encuentra en Plantillas>Visual C#>Office/SharePoint>Complementos.
Especifique la dirección URL del sitio web de SharePoint que quiere usar para la depuración.
Seleccione Hospedado por el proveedor como la opción de hospedaje del complemento.
Nota:
También puede usar el widget Vista de lista de escritorio con otras opciones de hospedaje e incluso con complementos de Office o su propio sitio web.
Seleccione Aplicación de formularios Web Forms ASP.NET como tipo de proyecto de aplicación web.
Seleccione Servicio de control de acceso de Windows Azure como opción de autenticación.
Para crear una lista en la web de complemento
Elija el proyecto de complemento de SharePoint en el Explorador de soluciones y luego seleccione Agregar>Nuevo elemento
Seleccione Elementos de Visual C#>Office/SharePoint>Lista. Escriba Anuncios en el cuadro de texto Nombre y luego seleccione Agregar.
Seleccione Crear una instancia de lista basada en una plantilla de lista existente. Seleccione la plantilla Anuncios y luego Finalizar.
Para agregar una nueva página que use el widget Vista de lista de escritorio
Seleccione la carpeta Páginas del proyecto web en el Explorador de soluciones.
Copie el código siguiente y péguelo en un archivo ASPX del proyecto. El código realiza las tareas siguientes:
Agrega referencias a las bibliotecas y recursos de Office necesarios.
Proporciona un marcador de posición para el widget Vista de lista.
Inicializa el entorno de ejecución de los controles.
Ejecuta el método renderAll del tiempo de ejecución de los controles de Office.
<!DOCTYPE html> <html> <head> <!-- IE9 or superior --> <meta http-equiv="x-ua-compatible" content="IE=10"> <title>Desktop List View HTML Markup</title> <!-- Controls Specific CSS File --> <link rel="stylesheet" type="text/css" href="/Scripts/Office.Controls.css" /> <!-- Ajax, jQuery, and utils --> <script src=" https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js.js"> </script> <script src=" https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"> </script> <script type="text/javascript"> // Function to retrieve a query string value. // For production purposes you may want to use // a library to handle the query string. function getQueryStringParameter(paramToRetrieve) { var params = document.URL.split("?")[1].split("&"); var strParams = ""; for (var i = 0; i < params.length; i = i + 1) { var singleParam = params[i].split("="); if (singleParam[0] == paramToRetrieve) return singleParam[1]; } } </script> <!-- Cross-Domain Library and Office controls runtime --> <script type="text/javascript"> //Register namespace and variables used through the sample Type.registerNamespace("Office.Samples.ListViewBasic"); //Retrieve context tokens from the querystring Office.Samples.ListViewBasic.appWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl")); Office.Samples.ListViewBasic.hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl")); Office.Samples.ListViewBasic.ctag = decodeURIComponent(getQueryStringParameter("SPClientTag")); //Pattern to dynamically load JSOM and the cross-domain library var scriptbase = Office.Samples.ListViewBasic.hostWebUrl + "/_layouts/15/"; //Get the cross-domain library $.getScript(scriptbase + "SP.RequestExecutor.js", //Get the Office controls runtime and // continue to the createControl function function () { $.getScript("../Scripts/Office.Controls.js", createControl); } ); </script> <!-- List View --> <script src="../Scripts/Office.Controls.ListView.debug.js" type="text/javascript"> </script> <!-- SharePoint CSS --> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { // The resource files are in a URL in the form: // web_url/_layouts/15/Resource.ashx var scriptbase = Office.Samples.ListViewBasic.appWebUrl + "/_layouts/15/"; // Dynamically create the invisible iframe. var blankiframe; var blankurl; var body; blankurl = Office.Samples.ListViewBasic.appWebUrl + "/Pages/blank.html"; blankiframe = document.createElement("iframe"); blankiframe.setAttribute("src", blankurl); blankiframe.setAttribute("style", "display: none"); body = document.getElementsByTagName("body"); body[0].appendChild(blankiframe); // Dynamically create the link element. var dclink; var head; dclink = document.createElement("link"); dclink.setAttribute("rel", "stylesheet"); dclink.setAttribute("href", scriptbase + "defaultcss.ashx?ctag=" + Office.Samples.ListViewBasic.ctag ); head = document.getElementsByTagName("head"); head[0].appendChild(dclink); }, false); </script> </head> <body> Basic List View sample (HTML markup declaration): <div id="ListViewDiv" data-office-control="Office.Controls.ListView" data-office-options='{"listUrl" : getListUrl()}'> </div> <script type="text/javascript"> function createControl() { //Initialize Controls Runtime Office.Controls.Runtime.initialize({ sharePointHostUrl: Office.Samples.ListViewBasic.hostWebUrl, appWebUrl: Office.Samples.ListViewBasic.appWebUrl }); //Render the widget, this must be executed after the //placeholder DOM is loaded Office.Controls.Runtime.renderAll(); } function getListUrl() { return Office.Samples.ListViewBasic.appWebUrl + "/_api/web/lists/getbytitle('Announcements')"; } </script> </body> </html>
Nota:
En el ejemplo de código anterior se especifica explícitamente la web de host y la web de complemento en las direcciones URL para inicializar el tiempo de ejecución de los controles de Office. Pero, si las direcciones URL de la web de complemento y la web de host se especifican respectivamente en los parámetros SPAppWebUrl y SPHostUrl de la cadena de consulta, se puede pasar un objeto vacío y el código intentará obtener los parámetros automáticamente. Los parámetros SPAppWebUrl y SPHostUrl se incluyen en la cadena de consulta al usar el token {StandardTokens}.
En el siguiente ejemplo se muestra cómo pasar un objeto vacío al método de inicialización:
// Initialize with an empty object and the code
// will attempt to get the tokens from the
// query string directly.
Office.Controls.Runtime.initialize({});
Para crear y ejecutar la solución
Seleccione la tecla F5.
Nota:
Al seleccionar F5, Visual Studio compila la solución, implementa el complemento y abre la página de permisos del complemento.
Seleccione el botón Confiar.
Seleccione el icono del complemento en la página Contenidos del sitio.
Para descargar este ejemplo de la galería de código, vea el ejemplo de código Usar el widget experimental Vista de lista de escritorio en un complemento.
Pasos siguientes
En este artículo le enseñamos a usar el widget Vista de lista de escritorio en su complemento con HTML. También puede explorar los siguientes escenarios y detalles sobre el widget.
Usar JavaScript para declarar el widget Vista de lista de escritorio
Según sus preferencias, tal le vez le convenga usar JavaScript en lugar de HTML para declarar el widget. Si este es el caso, puede usar el marcado siguiente como marcador de posición para el widget.
<div id="ListViewDiv"></div>
Use el siguiente código JavaScript para crear una instancia del widget Vista de lista.
new Office.Controls.ListView(
document.getElementById("ListViewDiv"), {
listUrl: Office.Samples.ListViewBasic.appWebUrl + "/_api/web/lists/getbytitle('Announcements')"
});
Si quiere ver un ejemplo de cómo hacer las tareas, vaya a la página JSSimple.html en el ejemplo de código Usar el widget experimental Vista de lista de escritorio en un complemento.
Especificar una vista para mostrar los datos
Para especificar una vista en la lista de SharePoint, el widget Vista de lista muestra los datos con la especificación de la vista.
Si usa formato HTML para declarar el widget, puede usar la siguiente sintaxis para especificar una vista.
<div id="ListViewDiv"
data-office-control="Office.Controls.ListView"
data-office-options="{listUrl: 'list URL',
viewID: 'GUID'
}">
</div>
Si quiere declarar el widget con JavaScript, use la siguiente sintaxis para especificar una vista.
new Office.Controls.ListView(
document.getElementById("ListViewDiv"), {
listUrl: "list URL",
viewID: "GUID"
});
Puede usar el widget experimental Vista de lista de escritorio para mostrar los datos en listas de SharePoint. El widget muestra los datos en modo de solo lectura. Proporcione ideas y comentarios en el sitio Office Developer Platform UserVoice.