Personalizar una vista de lista en complementos de SharePoint mediante representación del lado cliente

Artículo
04/08/2023

En SharePoint, la representación del lado cliente ofrece una forma de que genere sus propios resultados a fin de obtener un conjunto de controles hospedados en una página de SharePoint. Esto le permite usar tecnologías conocidas, como HTML y JavaScript, para definir la lógica de representación de vistas de lista de SharePoint. En la representación del lado cliente, puede especificar sus propios recursos de JavaScript y hospedarlos en las opciones de almacenamiento de datos disponibles para los complementos, como una biblioteca de documentos. Un complemento hospedado por SharePoint solo incluye componentes de SharePoint. Un complemento hospedado por SharePoint tiene sus recursos en un subsitio aislado de la web de host, denominado web de complemento.

Requisitos previos para usar los ejemplos de este artículo

Para seguir los pasos de este ejemplo, necesita lo siguiente:

Visual Studio 2015 y la versión más reciente de Microsoft Office Developer Tools
Un entorno de desarrollo de SharePoint (hay que aislar el complemento en los escenarios locales)

Si necesita ayuda para configurar un entorno de desarrollo que se adapte a sus necesidades, vea Dos tipos de complementos de SharePoint: hospedado por SharePoint y hospedado por el proveedor.

Conceptos básicos que le ayudarán a comprender la personalización de la vista de lista con la representación del lado cliente

En la tabla siguiente se muestra una lista de artículos útiles que le permitirán comprender los conceptos propios de un escenario de personalización de vista de lista.

Título del artículo	Descripción
Complementos de SharePoint	Obtenga información sobre el nuevo modelo de complementos de Microsoft SharePoint, que permite crear complementos (pequeñas soluciones fáciles de usar para usuarios finales).
Diseño de la experiencia del usuario para complementos de SharePoint	Obtenga información sobre las opciones de experiencia del usuario disponibles al crear complementos de SharePoint.
Hospedar webs, webs de complemento y componentes de SharePoint en SharePoint	Aprenda cuál es la diferencia entre una web de host y una web de complemento. Descubra qué componentes de SharePoint se pueden incluir en una Complemento de SharePoint, qué componentes se implementan en la web de host, qué componentes se implementan en la web de complemento y cómo se implementa la web de complemento en un dominio aislado.

Ejemplo de código: Personalizar una vista de lista con representación del lado cliente

Los siguientes pasos le indican cómo personalizar una vista de lista que se implementa en la web de complemento con representación del lado cliente.

Cree el proyecto de complemento de SharePoint.
Cree una definición de lista nueva con una vista personalizada.
Especifique la lógica de representación personalizada en un archivo JavaScript.

En la ilustración siguiente se muestra una vista con representación del lado cliente de una lista de anuncios.

Vista personalizada de una lista de anuncios

Vista personalizada de una lista de anuncios

Para crear el proyecto de complemento de SharePoint

Abra Visual Studio 2015 como administrador. (Para ello, haga clic con el botón derecho en el icono de Visual Studio del menú Inicio y seleccione Ejecutar como administrador).
Cree un proyecto con la plantilla Complemento de SharePoint.

En la ilustración siguiente se muestra la ubicación de la plantilla Complemento de SharePoint de Visual Studio 2015 (Plantillas>Visual C#>Office/SharePoint>Complementos de Office).

Plantilla de Visual Studio Complemento de SharePoint
Especifique la dirección URL del sitio web de SharePoint que quiera usar para la depuración.
Seleccione Hospedado en SharePoint como la opción de hospedaje del complemento.

Para crear una definición de lista

Haga clic con el botón secundario en el proyecto de Complemento de SharePoint y agregue un elemento de Lista nuevo. Cree una lista personalizable basada en anuncios.
Copie el siguiente marcado y péguelo en el elemento Views en el archivo Schema.xml de la característica de lista. El marcado efectúa las siguientes tareas:
- Declara una vista nueva denominada Overridable con un BaseViewID=2.
- Proporciona un valor para el elemento JSLink que apunta a un archivo JavaScript que se aprovisiona con el complemento.
Nota:

La propiedad JSLink no es compatible con las listas de Encuesta o Eventos. Un calendario de SharePoint es una lista de eventos.
```
<View BaseViewID="2" 
    Name="8d2719f3-c3c3-415b-989d-33840d8e2ddb" 
    DisplayName="Overridable" 
    Type="HTML" 
    WebPartZoneID="Main" 
    SetupPath="pages\viewpage.aspx" 
    Url="Overridable.aspx"
    DefaultView="TRUE">
<ViewFields>
    <FieldRef Name="Title" />
</ViewFields>
<Query />
<Toolbar Type="Standard" />
<XslLink>main.xsl</XslLink>
<JSLink Default="TRUE">~site/Scripts/CSRListView.js</JSLink>
</View>
```

Para especificar la lógica de representación personalizada en un archivo JavaScript

Haga clic con el botón derecho en la carpeta Scripts y agregue un nuevo archivo JavaScript. Asigne al archivo el nombre CSRListView.js.

Copie el siguiente código y péguelo en el archivo CSRListView.js. El código efectúa las siguientes tareas:

Proporciona controladores de eventos para los eventos PreRender y PostRender.
Proporciona plantillas para los conjuntos de plantillas de Encabezado, Pie de página y Elemento.
Registra las plantillas.


(function () {
    // Initialize the variable that stores the objects.
    var overrideCtx = {};
    overrideCtx.Templates = {};

    // Assign functions or plain html strings to the templateset objects:
    // header, footer and item.
    overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B>" +
        "<hr><ul id='unorderedlist'>";

    // This template is assigned to the CustomItem function.
    overrideCtx.Templates.Item = customItem;
    overrideCtx.Templates.Footer = "</ul>";

    // Set the template to the:
    //  Custom list definition ID
    //  Base view ID
    overrideCtx.BaseViewID = 2;
    overrideCtx.ListTemplateType = 10057;

    // Assign a function to handle the
    // PreRender and PostRender events
    overrideCtx.OnPreRender = preRenderHandler;
    overrideCtx.OnPostRender = postRenderHandler;

    // Register the template overrides.
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

// This function builds the output for the item template.
// It uses the context object to access announcement data.
function customItem(ctx) {

    // Build a listitem entry for every announcement in the list.
    var ret = "<li>" + ctx.CurrentItem.Title + "</li>";
    return ret;
}

// The preRenderHandler attends the OnPreRender event
function preRenderHandler(ctx) {

    // Override the default title with user input.
    ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
}

// The postRenderHandler attends the OnPostRender event
function postRenderHandler(ctx) {

    // You can manipulate the DOM in the postRender event
    var ulObj;
    var i, j;

    ulObj = document.getElementById("unorderedlist");

    // Reverse order the list.
    for (i = 1; i < ulObj.children.length; i++) {
        var x = ulObj.children[i];
        for (j = 1; j < ulObj.children.length; j++) {
            var y = ulObj.children[j];
            if(x.innerText<y.innerText){                  
                ulObj.insertBefore(y, x);
            }
        }
    }
}

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.
Para ir a la lista personalizada, escriba la dirección /Lists/<your_list_instance> relativa al directorio del complemento en el dominio web del complemento (no el dominio web host). Agregue uno o dos anuncios. En la cinta, elija la vista Reemplazable.

Compartir a través de