Usar SharePoint Designer 2010 para crear elementos web de vista de lista XSLT

Introducción a los elementos web en SharePoint 2010   Aprenda a usar SharePoint Designer 2010 para crear un elemento web de vista de lista XSLT.

Se aplica a:   Microsoft SharePoint Foundation 2010 | Microsoft SharePoint Server 2010 | Microsoft SharePoint Designer 2010
Publicado:   abril de 2010
Proporcionado por:    Frank Rice, Microsoft Corporation

En este ejercicio, se crea un elemento web de vista de lista XSLT dentro de Microsoft SharePoint Designer 2010 que muestra una lista de empleados en la página principal del sitio web local. Para completar esta tarea, debe hacer lo siguiente:

• Crear un elemento web visual en SharePoint Designer 2010
  
• Modificar el elemento web de vista de lista XSLT
  
• Probar el proyecto
  

Crear un elemento web visual en SharePoint Designer 2010

En esta tarea, se crea un elemento web visual en Microsoft SharePoint Designer 2010.

Para crear el elemento web visual

1. Inicie SharePoint Designer 2010, para ello, haga clic en Inicio, en Todos los programas, en Microsoft Office y, a continuación, haga clic en Microsoft SharePoint Designer 2010.
2. Haga clic en el botón Abrir sitio y, en la ventana de diálogo Abrir sitio, escriba la dirección URL del sitio web local (comohttp://localhost/SampleWebPartSite) en el cuadro Nombre del sitio.
3. Del panel de navegación izquierdo del Sitio de SharePoint, haga clic en la pestaña Páginas del sitio y, a continuación, haga clic en Home.aspx.
4. En el menú de la cinta de opciones, haga clic en Editar archivo y, a continuación, haga clic en Editar archivo en modo avanzado. Ignore los errores que puede ver en esta pantalla haciendo clic en Aceptar.
5. En la ficha de vista Inicio, haga clic en Código situado en la parte inferior del panel del diseñador para mostrar la vista de código.
6. En la pantalla del código, desplácese hacia la parte inferior de la página y coloque el puntero delante de la etiqueta final </ContentTemplate>(detrás de la etiqueta de cierre </WebPartPages:WebPartZone>) como se muestra en la figura 1.
   
   
   Figura 1. Coloque el puntero delante de la etiqueta </ContentTemplate>
   
   
7. Haga clic en la pestaña Insertar de la cinta y, a continuación, haga clic en Vista de datos.
8. En la lista desplegable, haga clic en Employees. SharePoint Designer agrega el elemento web XsltListViewWebPart a la página principal.
9. Haga clic en Guardar en la parte superior de la página. Si se le solicita confirmación, haga clic en Sí.
10. Abra el explorador en el sitio web que especificó anteriormente. En la parte inferior de la página principal, debería ver el elemento web XsltListViewWebPart como se muestra en la figura 2.
    
    
    Figura 2. Empleados de las listas del elemento web XsltListViewWebPart
    
    

Modificar el elemento web de vista de lista XSLT

En esta tarea, se modifica el elemento web para agregar formato y limitar la cantidad de elementos que se muestra.

Para modificar el elemento web de vista de lista XSLT

1. Regrese a SharePoint Designer 2010 y, en la vista Diseño (haga clic en Diseño en la parte inferior de la pantalla), haga clic en la celda de tabla que tiene la palabra Título.
2. En la ventana Aplicar estilos que aparece en la parte inferior derecha de la pantalla, en el panel Seleccione el estilo CSS que va a aplicar, desplácese al panel Seleccione el estilo CSS que va a aplicar y, a continuación, haga clic en .ms-bodyareapagemargin. Haga clic con el botón secundario y, a continuación, haga clic en Aplicar estilo como se muestra en la figura 3. Si no se muestra la ventana Aplicar estilos, en la ficha Ver, haga clic en Aplicar estilos debajo del botón Paneles de tareas.
   
   
   Figura 3. Aplicar un nuevo estilo a la lista de empleados
   
   
3. En la vista de código del diseñador (haga clic en Código en la parte inferior de la pantalla), desplácese hacia arriba hasta RowLimit y cambie el valor a 5.
4. En la vista de código del diseñador, desplácese hacia arriba hasta WebPartPages:XsltListViewWebPart, escriba el atributo ChromeType y, a continuación, seleccione TitleAndBorder como el tipo de contenedor visual, tal como se muestra en la figura 4.
   
   
   Figura 4. Seleccionar el tipo de contenedor visual
   
   
5. Haga clic en Guardar en la parte superior de la página.

Probar el proyecto

En esta tarea, se comprueba que el elemento web se muestra y que sólo se muestran cinco elementos por página.

Para probar el proyecto

1. Abra un explorador web en el sitio web que especificó anteriormente. Ahora debería ver la lista de elementos web XsltListViewWebPart (similar a la figura 2) con sólo cinco empleados por página.
2. Haga clic en la flecha derecha de la parte inferior de la pantalla para ver el siguiente elemento de la lista.