Aplicar formato de HTML
Puede aplicar elementos de estilo CSS inline a la vez que va creando plantillas en el editor de plantillas HTML.
Pruebas
Puede utilizar nuestros archivos de muestra para crear su app. Para descargar estos archivos, vea: Archivos de muestra (solo en inglés).
Permitir la aplicación de elementos de estilo CSS inline a todo un gráfico
Tras haber añadido un objeto como una tabla:
Haga lo siguiente:
- Si las Propiedades están visibles, salte al paso 3, si no, haga clic con el botón derecho en el nodo Tablas.
- Seleccione Propiedades.
- Desmarque la casilla Keep Source Formats.
Esto hará que los contenidos de todas las celdas de todas las columnas de la tabla se exporten desde QlikView sin formato. La aplicación de los elementos de estilo CSS inline que defina en la plantilla HTML se aplicarán. Compare el resultado con y sin Keep Source Formats seleccionado.
Permitir la aplicación de elementos de estilo CSS inline a determinadas columnas
Asegúrese de que su objeto de tabla es una tabla simple en QlikView. Las tablas pivotantes de QlikView deben convertirse a tablas simples antes de seleccionarlas para incluirlas en el nodo Tablas de Qlik NPrinting, o no tendrá acceso a campos/columnas individuales. Si desea mantener el formato de origen para la mayoría de columnas, deje seleccionada la opción Keep Source Formats/Keep Source Formats para la tabla en su conjunto y haga lo siguiente:
- Amplíe el nodo de tabla.
- Haga clic en la columna o columnas a las que desee aplicar elementos CSS de estilo inline.
- Desmarque la casilla Keep Source Formats.
-
Si se marca la casilla HTML Encode, cualquier símbolo no alfanumérico (como < y />) que pudiera interpretarse como elementos de etiqueta HTML será convertido a entidades de HTML.
Si la casilla HTML Encode se deja sin marcar, cualquier símbolo no alfanumérico que pudiera interpretarse como un elemento de etiquetas HTML será reproducido por el código HTML subyacente utilizado en el editor de plantillas Qlik NPrinting HTML.
Esto hará que el contenido de todas las celdas de la columna seleccionada de la tabla se exporte desde QlikView sin formato, pero contendrán la aplicación de cualquier elemento CSS de estilo inline que hayamos aplicado dentro de la plantilla de HTML. Podemos hacer esto para todas las columnas individuales que necesitemos.
Aplicar formato a una columna
Haga lo siguiente:
- En HTML Report (Sales), seleccione Gross Profit.
- Introduzca $#.##,00 en el campo Format.
Construir su tabla
Haga lo siguiente:
-
Construya una tabla HTML con una fila de celdas de datos. El código fuente tendrá el siguiente aspecto:
<table> <tr> <td></td> <td></td> <td></td> </tr> </table> -
Arrastre los iconos de nodos de columna de tabla a entre las etiquetas de celda de datos de tabla.
Puede seleccionar múltiples valores manteniendo pulsado Ctrl o Mayús durante la selección de columnas y después arrastre y suéltelas en la plantilla. Esto creará todas las etiquetas y las insertará en una serie horizontal de celdas.
La casilla Keep Source Formats se ha desmarcado para la columna Gross Profit.
- Inserte otra fila encima de la primera.
- Inserte celdas de cabecera de tabla en la nueva fila.
- Introduzca los encabezamientos que desee.
- Abra de nuevo la ventana del cuadro de diálogo Propiedades para cada columna que haya añadido a la plantilla, uno por vez.
-
Haga clic en la columna Value de la fila Show Header. La celda tendrá el valor Mostrar.
- Haga clic en el botón de menú desplegable que aparece, y seleccione Ocultar.
Esta es la tabla original con la casilla Keep Source Formats sin marcar para dos columnas, una fila de encabezamiento añadida y los encabezamientos de la tabla original ocultos para todas y cada una de las columnas.
Aplicar elementos de estilo inline
En este caso, el resultado a modo de ejemplo es muy sencillo pero le puede dar una idea acerca de las posibilidades.
Aquí tiene el código completo:
<html>
<body>
<table cellspacing=0 style="border-collapse:collapse;">
<tr style="width:0*; font-family:Verdana; font-size:small; font-variant:small-caps;">
<th style="border:grey dashed 1px;"> Product Name </th>
<th style="border:grey dashed 1px;"> Total Sales </th>
<th style="border:grey dashed 1px;"> Gross Profit </th>
<th style="border:grey dashed 1px;"> GP% </th>
<th style="border:grey dashed 1px;"> Quantity </th>
</tr>
<tr>
<td style="width:0*; font-family:Verdana; font-size:small; font-weight:bold; font-variant:small-caps;"> %%ProductName%% </td>
<td> %%Total Sales%% </td>
<td> %%Gross Profit%% </td>
<td> %%GP%_1%% </td>
<td style="width:0*; color:red; font-family:Georgia; font-size-adjust:0.40; background-color:Yellow; border:green solid 2px; text-align:right;"> %%Quantity_1%% </td>
</tr>
</table>
</body>
</html>