Personalizar vistas de datos y formularios con SharePoint Designer

En este artículo

• Abrir vistas de lista y datos

• Agregar, quitar y reorganizar columnas

• Ordenar y agrupar

• Filtro

• Formato condicional

• Situado

• Habilitar la edición en línea

• Habilitar actualizaciones asincrónicas

• Agregar opciones de barra de herramientas

• Aplicar estilos de vista

• Más opciones de personalización

Abrir vistas de lista y datos

Las vistas de lista y de datos se pueden crear y abrir de varias maneras en SharePoint Designer 2010 (como se explica al principio de este artículo). Puede, por ejemplo, abrir una vista de lista de la lista o biblioteca a la que está asociada actualmente, o bien, puede abrir una vista de datos desde la página del sitio donde se encuentra. Ambas opciones están en el menú de navegación. (Asociada a una lista o biblioteca, o a cualquier número de orígenes de datos. Use uno de los métodos siguientes para abrir una vista de lista o vista de datos en SharePoint Designer 2010.

Para abrir una vista de lista asociada a una lista

1. Abra su sitio en SharePoint Designer 2010.

2. En el panel de navegación , haga clic en listas y bibliotecas.

3. Abra la lista que contiene la vista de lista.

4. Haga clic en la pestaña Opciones y use las opciones de edición de la vista para personalizar la vista de lista.
   

   Nota:  Es posible que primero deba hacer clic dentro de la vista para mostrar las opciones de edición de la vista en SharePoint Designer 2010

Para abrir una vista de datos o una vista de lista desde una página del sitio

1. Abra su sitio en SharePoint Designer 2010.

2. En el panel de navegación , haga clic en páginas del sitio.

3. Abra la página que contiene la vista de datos o la vista de lista.

4. Haga clic en la pestaña Opciones y use las opciones de edición de la vista para personalizar la lista o la vista de datos.
   

   Nota:  Es posible que primero deba hacer clic dentro de la vista para mostrar las opciones de edición de la vista en SharePoint Designer 2010.

En el resto de este artículo se supone que ha realizado estos pasos o pasos similares para abrir la vista para modificarla.

Parte superior de la página

Agregar, quitar y reorganizar columnas

Una de las primeras cosas que normalmente hace con una vista de datos es agregar y quitar columnas. Al cambiar las columnas en una vista de datos, está agregando, quitando u organizando los campos tal como aparecen en la vista de datos. Use el cuadro de diálogo Editar columnas para agregar, quitar y reordenar columnas, ya sea que muestren filas o columnas. También puede modificar columnas con los comandos de edición de tabla de la pestaña tabla. El diseño de la tabla se trata más adelante en este artículo.

Realice los siguientes pasos para agregar, quitar y reorganizar columnas en una vista de lista o de datos.

1. Con la vista abierta en SharePoint Designer 2010, haga clic en la pestaña Opciones y, a continuación, haga clic en Agregar o quitar columnas .
   

   Nota:  El comando Editar columnas no está disponible si la vista de datos está en una tabla HTML que usa atributos rowspan o colspan con un valor mayor que 1.

2. Se abrirá el cuadro de diálogo Editar columnas .
   

3. Realice una de las siguientes acciones:

   • Para agregar una columna, seleccione el campo de la columna en campos disponibles y, a continuación, haga clic en Agregar.

   • Para seleccionar varios campos a la vez, mantenga presionada la tecla CTRL mientras hace clic en los campos.

   • Para quitar una columna existente, seleccione la columna en columnas mostradas y, a continuación, haga clic en quitar.

   • Para seleccionar varios campos a la vez, mantenga presionada la tecla CTRL mientras hace clic en los campos.

   • Para reorganizar las columnas, seleccione la columna en columnas mostradas y, a continuación, haga clic en subir o bajar

4. Haga clic en Aceptar para aplicar los cambios a la vista.

Obtenga más información sobre las vistas de datos en la sección vea también .

Parte superior de la página

Ordenar y agrupar

Al ordenar datos en una vista de datos, se modifica el orden en el que aparecen los datos para que sea más fácil para usted y los visitantes del sitio comprender los datos. Entre los ejemplos de ordenación se incluyen el orden alfabético y el numérico. Puede crear órdenes de clasificación adicionales mediante el cuadro de diálogo ordenación avanzada en SharePoint Designer 2010.

Además de ordenar, puede agrupar datos. Al agrupar datos, puede mostrar un encabezado o pie de página para un grupo de campos en el criterio de ordenación y elegir si el grupo está expandido o contraído de forma predeterminada. También puede elegir mantener juntos los grupos al paginar por la vista y mostrar los nombres de columna o los totales de cada grupo.

Para ordenar las columnas de una lista o vista de datos

Con la vista abierta en SharePoint Designer 2010, haga clic en la pestaña Opciones y, a continuación, haga clic en ordenar & grupo .

Se abrirá el cuadro de diálogo ordenar y agrupar .

1. En campos disponibles, haga clic en el campo por el que desea ordenar y, a continuación, haga clic en Agregar.

2. En ordenar propiedades, elija cómo desea ordenar los campos seleccionando ascendente (de menor a mayor) o descendente (de mayor a menor).

   También puede cambiar el criterio de ordenación ascendente o descendente haciendo doble clic en el campo de la lista criterio de ordenación.

3. Para usar una ordenación más avanzada que la de ascendente o descendente, haga clic en Editar expresiónde ordenación. De esta forma, se abre el cuadro de diálogo ordenación avanzada , donde puede personalizar el criterio de ordenación mediante expresiones XPath. Más información en la lista avanzada y la personalización de la vista de datos con expresiones XPath.

4. Para ordenar por varios campos, elija más campos en campos disponibles y, a continuación, agréguelos al criterio de ordenación.

   Si agrega varios campos al criterio de ordenación y desea cambiar el campo que se ordena en primer lugar, seleccione el campo en la lista criterio de ordenación y haga clic en subir o bajar.

   Haga clic en Aceptar para aplicar los cambios a la vista.

Para agrupar columnas en una vista de datos o lista

Con la vista abierta en SharePoint Designer 2010, haga clic en la pestaña Opciones y, a continuación, haga clic en ordenar & grupo .

1. Se abrirá el cuadro de diálogo ordenar y agrupar .
   

2. En la lista criterio de ordenación, haga clic en el campo por el que desea agrupar.
   Nota cada campo en el criterio de ordenación puede tener aplicadas propiedades de grupo individuales. Asegúrese de seleccionar el campo que desea antes de aplicar las propiedades del grupo.

3. Para mostrar un encabezado al principio de cada grupo, en propiedades del grupo, active la casilla Mostrar encabezado de grupo y, a continuación, siga uno de estos procedimientos:

   1. Para que los grupos de la vista aparezcan expandidos de forma predeterminada, haga clic en el Grupo expandir de forma predeterminada.

   2. Para que los grupos en la vista de datos aparezcan contraídos de forma predeterminada, haga clic en contraer grupo de forma predeterminada

4. Las opciones restantes solo se aplican a vistas de datos y no a vistas de lista. Para obtener más información sobre las diferencias entre las listas y las vistas de datos, visite la sección Vea también.

5. Para mostrar un pie de página al final de cada grupo que muestra cuántos registros hay en ese grupo, active la casilla Mostrar pie de grupo .

6. Después de activar la casilla de verificación Mostrar encabezado de grupo o Mostrar pie de grupo , aparece el botón agrupación avanzada .

7. Haga clic en agrupación avanzada. (Esta opción se activa al activar la opción Mostrar encabezado de grupo o Mostrar pie de grupo ).

8. Realice una de las siguientes acciones:

   • Para ocultar los registros individuales de la lista, active la casilla ocultar siempre los detalles del grupo .

   • Para mostrar todos los elementos de un grupo en una página, incluso si el total supera el número especificado de elementos para mostrar en una lista, seleccione la casilla de verificación mantener grupos al paginar .

   • Para insertar una fila en cada grupo que muestra los nombres de columna, active la casilla Mostrar nombres de columna por grupo .

   • Para insertar una fila en cada grupo que muestra el número total de registros dentro de cada grupo, active la casilla Mostrar totales de columna por grupo .

Para permitir a los usuarios del sitio ordenar o agrupar datos en el explorador, puede Agregar una barra de herramientas a la vista según se describe más adelante en este artículo.

Parte superior de la página

Filtro

Puede aplicar un filtro a la vista para que solo los datos que cumplan determinados criterios aparezcan en la lista o en la vista de datos. Esto es útil cuando tiene una vista que contiene cientos o miles de registros y desea facilitar la lectura de los datos. Al crear un filtro, se compilan una o más expresiones que se aplican a los datos. Hay tres partes básicas: el nombre del campo (el nombre del campo en el que desea filtrar), el operador (la regla que desea aplicar al valor) y el valor (los datos que está buscando).

Realice los siguientes pasos para filtrar una lista o vista de datos.

1. Con la vista abierta en SharePoint Designer 2010, haga clic en la pestaña Opciones y, a continuación, haga clic en filtrar .

2. Se abrirá el cuadro de diálogo criterios de filtro .
   

3. En nombre del campo, haga clic en el campo que contiene los valores que desea.

4. Haga clic en el cuadro comparación y, a continuación, haga clic en el operador que desee.

5. Haga clic en el cuadro valor y, a continuación, seleccione o escriba los criterios que desee.

6. Para agregar otra cláusula al filtro, haga clic en el cuadro y/o al final de la cláusula existente y, a continuación:

   1. Haga clic en y para crear un filtro en el que los datos deben coincidir con los criterios de ambas cláusulas.

   2. Haga clic en o para crear un filtro en el que los datos deben coincidir con los criterios de una sola cláusula.

7. Haga clic en el mensaje, haga clic aquí para agregar una nueva cláusula.

8. Repita los pasos 3-6 para crear una cláusula adicional para este filtro.

9. Si está trabajando con vistas de datos y desea usar condiciones más avanzadas, active la casilla Agregar filtrado XSLT y, a continuación, haga clic en Editar.
   De este modo, se abre el cuadro de diálogo condición avanzada , donde puede personalizar el criterio de ordenación mediante expresiones XPath.

10. Haga clic en Aceptar.

Para permitir que los visitantes del sitio ordenen y agrupen datos a través del explorador, puede Agregar una barra de herramientas a la vista según se describe más adelante en este artículo. Tenga en cuenta que el filtrado en el explorador solo afecta a la presentación de los datos; no limita la cantidad de datos que están disponibles en la vista.

Parte superior de la página

Formato condicional

Con el formato condicional, puede aplicar texto con formato, colores de fondo, iconos personalizados y mucho más a una etiqueta HTML o valor de datos seleccionado cuando los datos cumplen un determinado criterio. También puede establecer condiciones que determinen si se muestra u oculta una etiqueta HTML o un valor de datos. El formato condicional es una forma eficaz de resaltar los elementos de una vista de datos que requieren una acción por parte del usuario. Puede, por ejemplo, resaltar las tareas vencidas, los proyectos que se están ejecutando con presupuesto o los suministros de empresa que se están agotando.

Realice los siguientes pasos para aplicar formato condicional a una lista o vista de datos.

Con la vista abierta en SharePoint Designer 2010, haga clic en la fila o columna donde quiera aplicar formato condicional.

1. Haga clic en la pestaña Opciones , haga clic en filtrar y elija una de las opciones siguientes:

2. Mostrar contenido para mostrar los datos de la vista que cumplen los criterios especificados.

3. Oculte el contenido para ocultar los datos de la vista que cumplen los criterios especificados.

4. Formato de fila para aplicar formato a una fila que cumpla los criterios especificados.

5. Formato de columna para aplicar formato a una columna que cumpla los criterios especificados.

6. Aplicar formato a la selección para aplicar formato a una selección que cumpla los criterios especificados. (Primero debe resaltar una parte de la vista de datos antes de usar esta opción).

   Las opciones Mostrar y ocultar contenido cambian la visibilidad de las etiquetas HTML o los valores de datos seleccionados. Las opciones de formato aplican un estilo a las etiquetas HTML seleccionadas o a los valores de los datos.

7. Se abrirá el cuadro de diálogo criterios de condiciones .
   

8. En nombre del campo, haga clic en el campo que contiene los valores que desea.

9. Haga clic en el cuadro comparación y, a continuación, haga clic en el operador que desee.

10. Haga clic en el cuadro valor y, a continuación, seleccione o escriba los criterios que desee.

11. Para usar condiciones más avanzadas en la vista, haga clic en avanzadas.
    De este modo, se abre el cuadro de diálogo condición avanzada , donde puede personalizar el criterio de ordenación mediante expresiones XPath.

12. Para agregar otra cláusula a los criterios de condición, haga clic en el cuadro y/o al final de la cláusula existente y, a continuación:

    • Haga clic en y para crear un criterio de condición en el que los datos deben coincidir con los criterios de ambas cláusulas.

    • Haga clic en o para crear un criterio de condición en el que los datos deben coincidir con los criterios de una sola cláusula

13. Debajo de la cláusula existente, haga clic en el mensaje haga clic aquí para agregar una nueva cláusula.

14. Repita los pasos 4-7 para crear una cláusula adicional para los criterios de condición.

15. Si va a mostrar u ocultar datos con la condición, haga clic en Aceptar para cerrar el cuadro de diálogo. Para aplicar formato especial a la condición, haga clic en establecer estilo.

16. Se abrirá el cuadro de diálogo Modificar estilo .
    

17. Elija las opciones de formato que desea aplicar a la vista de datos.
    Por ejemplo, para poner el texto en negrita con un fondo amarillo, tendría que elegir negrita en el menú grosor de fuente . Después, haga clic en la categoría fondo y en el menú color de fondo , escriba amarillo o elija una variación de amarillo.

18. Haga clic en Aceptar.

Como las vistas de lista y datos muestran datos activos, verá el formato condicional aplicado inmediatamente en la vista Diseño.

Parte superior de la página

Situado

Con la paginación, puede cambiar el número de registros que se muestran en cada página de una lista o vista de datos. Puede configurar la vista para que muestre los elementos en conjuntos de 5, 10 o cualquier valor dado. Los visitantes del sitio verán los vínculos anterior y siguiente en el explorador, que usan para navegar por la vista. También puede especificar un límite para el número máximo de elementos que se van a mostrar en la vista, que pueden ser de 5, 10 o cualquier valor dado.

Realice los siguientes pasos para agregar un valor de paginación a una lista o vista de datos.

Con la vista abierta en SharePoint Designer 2010, haga clic en la pestaña Opciones y, a continuación, haga clic en paginación .

1. Elija una de las opciones de paginación:

   1. Mostrar conjuntos de elementos: elija si desea mostrar los elementos en conjuntos de 1, 5, 10 o 30.

      Si selecciona esta opción, se mostrarán los vínculos de navegación en la vista cuando el número total de registros supere el número especificado en esta opción.

   2. Límite de elementos: elija un número máximo de elementos para mostrar en la vista, 1, 5, 10 o 30.

2. Elija más opciones de paginación para especificar un valor personalizado para la paginación de la vista de datos.

3. Se abrirá el cuadro de diálogo Propiedades de la vista de datos .
   

4. En la pestaña paginación, seleccione una de las siguientes opciones:

   • Elija Mostrar elementos en conjuntos de este tamaño y, a continuación, especifique un número en el cuadro correspondiente.
     El valor predeterminado de esta opción es 10 si hay más de 25 registros en la vista y 6 Si la vista tiene menos de 25 registros.

   • Elija limitar el número total de elementos mostrados a y, a continuación, especifique un número en el cuadro correspondiente.
     El valor predeterminado de este campo se establece en 100.

5. Haga clic en Aceptar.

Además de cambiar el número de registros que se muestran en la vista de una página web, puede cambiar el número de registros que aparecen en la vista Diseño de SharePoint Designer 2010. Puede hacerlo cuando desee ver cómo se representará una vista con un determinado número de registros. Para cambiar el número de registros en la vista Diseño, haga clic en la pestaña diseño y, en el grupo vista previa , elija una de las opciones de vista previa de vista de datos disponibles.

Parte superior de la página

Habilitar la edición en línea

Cuando la edición en línea está habilitada, los visitantes del sitio pueden modificar fácilmente cada registro en el contexto de la vista sin tener que salir de la página o abrir una ventana nueva. Simplemente haga clic en el botón de edición que está junto a la columna o fila en la vista de datos y cada campo se puede editar. Los cuadros de texto, menús y controles de campo están disponibles para cada registro, de la misma forma en que están disponibles en los formularios de nuevo elemento y edición. La edición en línea combina lo mejor de una vista y un formulario en un solo lugar.

Realice los siguientes pasos para habilitar la edición en línea para una vista de lista o datos.

Con la vista abierta en SharePoint Designer 2010, haga clic en la pestaña Opciones y, a continuación, haga clic en de edición en línea.
En las vistas de lista, se habilitan los vínculos nuevos y de edición, los que los visitantes del sitio usan para crear y editar registros.

1. Para las vistas de datos, elija una o todas las opciones de edición en línea siguientes:

   1. Mostrar vínculos de edición de elementos: habilita un vínculo de edición en el que los usuarios hacen clic para editar el registro insertado.

   2. Mostrar vínculos insertar elemento: habilita un vínculo de inserción en el que los usuarios hacen clic para crear nuevos registros alineados.

   3. Mostrar vínculos para eliminar elementos: habilita un vínculo de eliminación en el que los usuarios hacen clic para eliminar registros insertados.

2. Guarde los cambios en la lista o vista de datos.

Para las vistas de lista, la próxima vez que abra la vista en un explorador y pase el puntero sobre una fila o columna, verá un botón Editar . Para las vistas de datos, verá un vínculo Editar junto a cada fila o columna.

Haga clic en el vínculo para empezar a editar la fila o la columna de registros alineados como se muestra a continuación.

Parte superior de la página

Habilitar actualizaciones asincrónicas

Las actualizaciones asincrónicas son un componente básico de la plataforma AJAX de ASP.NET y puede habilitarlas para las vistas de lista y datos en su sitio. Cuando se habilitan las actualizaciones asincrónicas, la lista o la vista de datos recupera los datos del servidor en tiempo real y los procesa en un explorador sin que el usuario tenga que actualizar la página. Las vistas de lista y datos con actualizaciones asincrónicas son ideales para los datos enriquecidos, las páginas web dinámicas y los paneles.

.

Realice los siguientes pasos para habilitar actualizaciones asincrónicas para una vista de lista o datos.

Con la vista abierta en SharePoint Designer 2010, haga clic en la pestaña Opciones y, a continuación, active la casilla actualización asincrónica .

1. Para agregar un botón actualizar a la página, active la casilla Actualizar .
   Esto permite a los visitantes del sitio hacer clic en el botón actualizar actualizar la página de forma manual.

2. Elija un intervalo de actualización: 15 segundos, 30 segundos o 60 segundos.

3. Guarde los cambios en la lista o vista de datos.

Parte superior de la página

Agregar opciones de barra de herramientas

Si la vista usa una lista o una biblioteca como origen de datos, puede Agregar una barra de herramientas de lista de SharePoint a la vista para que los usuarios puedan trabajar de manera más eficaz con la lista o biblioteca subyacente. La barra de herramientas de lista de SharePoint es la barra de menús de la parte superior de una lista o biblioteca que proporciona varias opciones para trabajar con esa lista o biblioteca. Existen dos tipos de barras de herramientas que puede Agregar:

• La barra de herramientas de SharePoint ofrece opciones de edición de listas, como agregar nuevos elementos, crear vistas y columnas, y editar las propiedades de la lista.

• La barra de herramientas de agrupación ofrece opciones de visualización de listas como cambiar el filtrado, la ordenación y la agrupación.

Realice los siguientes pasos para agregar la barra de herramientas a una lista o vista de datos.

Con la vista abierta en SharePoint Designer 2010, haga clic en la pestaña diseño y, a continuación, haga clic en Opciones .

1. Para agregar una barra de herramientas completa con opciones de edición, haga clic en barra de herramientas de SharePoint.

2. Para agregar una barra de herramientas con opciones de visualización de lista, haga clic en barra de herramientas agrupada.

   Nota:  La barra de herramientas aplica el filtrado en la presentación de la vista y no en el nivel de consulta. Como tal, debe confiar en ello ya que es el medio principal para filtrar la vista. Para ello, debe usar el filtrado según se describe anteriormente en este artículo.

3. Para quitar la barra de herramientas, haga clic en ninguna.

4. Guarde los cambios en la lista o vista de datos.

Cuando abra la vista en el explorador, verá la barra de herramientas en la parte superior de la página. Si habilita la barra de herramientas de SharePoint y la barra de herramientas agrupada, verá estas opciones en la parte superior de la vista.

Parte superior de la página

Aplicar estilos de vista

Al crear una vista de lista o datos, los datos suelen mostrarse de forma predeterminada en un diseño de tabla básica. Puede cambiar el diseño de la vista rápida y fácilmente aplicando un estilo de vista diferente. Por ejemplo, puede cambiar el diseño de tabla básica de la vista por otro que presente la vista con bordes, columnas o listas con viñetas.

Antes de aplicar un estilo de vista a una lista o vista de datos, es importante tener en cuenta que se eliminarán todas las personalizaciones y conexiones de elementos Web anteriores.

Realice los siguientes pasos para aplicar un estilo de vista a una lista o vista de datos.

Con la vista abierta en SharePoint Designer 2010, haga clic en la pestaña diseño y, a continuación, haga clic en uno de los estilos de vista basados en la descripción de la vista previa y el texto emergente.

1. Para ver más estilo, haga clic en más en la esquina inferior derecha del grupo estilos de vista .

2. Un mensaje de advertencia le muestra información que indica que el formato personalizado y las conexiones de elementos Web se eliminarán si cambia el estilo de vista. Haga clic en Sí para continuar.

   Nota:  Si elige un estilo que muestra menos campos que la vista original, esos campos se quitan de la vista.

3. Guarde los cambios en la lista o vista de datos.

Parte superior de la página

Más opciones de personalización

Además de las personalizaciones anteriores, puede personalizar una vista de lista o datos de las siguientes maneras:

• Crear una columna de fórmula     que muestre el resultado de un cálculo de otras columnas en la vista. Es similar a la forma de usar fórmulas en un programa de hoja de cálculo. Puede, por ejemplo, multiplicar el precio unitario de un producto por el número de unidades en existencias para mostrar el valor total de los elementos en una columna independiente.

• Mostrar datos de varios orígenes     en una sola vista. Esta es una forma eficaz de combinar orígenes de datos en un solo lugar. Puede, por ejemplo, mostrar las categorías de producto de una lista y la información del producto de otra lista en la misma vista.

• Agregue parámetros     a una lista o vista de datos. Puede, por ejemplo, desea pasar un parámetro de otro menú a la vista de datos y filtrar los datos por ese valor de parámetro.

• Agregar controles de servidor     a la vista de lista o de datos. Puede enlazar controles de SharePoint, controles de ASP.NET y mucho más a un origen de datos y agregarlos a una vista para crear interfaces de datos interactivas enriquecidas para los usuarios.

• Cambiar la fuente y el formato     de la vista de lista o de datos. Puede cambiar el tamaño de fuente, el color de fuente, la familia de fuentes y más los encabezados y campos de las columnas. Puede hacerlo manualmente con las herramientas WYSIWYG de SharePoint Designer 2010 o aplicar estilos CSS a estos elementos de la página.

• Personalizar el diseño de tabla     de la vista de lista o de datos. Puede Agregar y quitar celdas de tabla, cambiar el ancho o el alto de una fila o columna, mostrar u ocultar los bordes o el sombreado, y mucho más con las opciones de edición de tabla de SharePoint Designer 2010.

Parte superior de la página