Application de la mise en forme HTML

Vous pouvez appliquer des éléments de style inline (intraligne) CSS lorsque vous créez des modèles dans l'éditeur de modèle HTML.

Test

Vous pouvez utiliser les exemples de fichiers pour créer une application. Pour télécharger ces fichiers, voir : Fichiers exemples (uniquement en anglais).

Application d'éléments de style CSS intégrés à un graphique entier

Après avoir ajouté un objet en tant que table :

Procédez comme suit :

1. Si la boîte de dialogue Propriétés est visible, passez à l'étape 3. Sinon, cliquez sur le nœud Tables avec le bouton droit de la souris.
2. Sélectionnez Propriétés.
3. Désélectionnez l'option Keep Source Formats.

Le contenu des cellules de toutes les colonnes de la table est alors exporté depuis QlikView sans mise en forme. Les éléments de style CSS intégrés définis dans le modèle HTML seront appliqués. Comparez la sortie obtenue avec et sans l'option Keep Source Formats sélectionnée.

Application d'éléments de style CSS intégrés à des colonnes précises

Vérifiez que l'objet table est un tableau simple dans QlikView. Il est nécessaire de convertir les tableaux croisés dynamiques QlikView en tableaux simples avant de les sélectionner pour les inclure sous le nœud Tables Qlik NPrinting, sans quoi vous n'aurez pas accès aux différents champs et colonnes. Si vous souhaitez conserver la mise en forme d'origine pour la majorité des colonnes, laissez la case Keep Source Formats cochée pour la table dans son ensemble et procédez comme suit :

1. Développez le nœud de la table.
2. Cliquez sur la ou les colonnes auxquelles vous souhaitez appliquer les éléments de style CSS intégrés.
3. Désélectionnez l'option Keep Source Formats.

4. Lorsque la case à cocher HTML Encode est sélectionnée, tous les caractères non alphanumériques (tels que < et />) qui pourraient être interprétés comme des éléments de balises HTML sont convertis en entités HTML.

   Lorsque la case HTML Encode est désactivée, tous les caractères non alphanumériques qui pourraient être interprétés comme des éléments de balise HTML sont convertis par le code HTML sous-jacent utilisé dans l'éditeur de modèle Qlik NPrinting HTML.

Cette action a pour effet d'exporter le contenu de toutes les cellules de la colonne sélectionnée de la table depuis QlikView sans mise en forme, mais en appliquant les éléments de style CSS intégrés définis dans le modèle HTML. Vous pouvez réaliser cette opération pour autant de colonnes individuelles qu'il est nécessaire.

Application d'un format à une colonne

Procédez comme suit :

1. Dans HTML Report (Sales), sélectionnez Gross Profit.
2. Saisissez $#.##,00 dans le champ de recherche Format.

Élaboration d'une table

Procédez comme suit :

1. Construisez une table HTML avec une seule ligne de cellules de données. Le code source devrait avoir l'aspect suivant :

   <table>
    	<tr>
   	<td></td> <td></td> <td></td>
   	</tr>
   </table>

2. Faites glisser les icônes des nœuds de colonne de la table entre les balises des cellules de données de la table.

   Vous pouvez sélectionner plusieurs valeurs en appuyant sur la touche Ctrl ou Maj pendant la sélection des colonnes. Ensuite, faites-les glisser et déposez-les dans le modèle. Cette action a pour effet de créer toutes les balises et de les insérer dans une série de cellules horizontale.

   La case à cocher Keep Source Formats a été désélectionnée pour la colonne Gross Profit.

3. Insérez une nouvelle ligne au-dessus de la première.
4. Insérez des cellules d'en-tête de table dans la nouvelle ligne.
5. Saisissez les en-têtes souhaités.
6. Rouvrez la boîte de dialogue Propriétés pour chaque colonne ajoutée au modèle (une à la fois).

7. Cliquez dans la colonne Value de la ligne Show Header. La cellule inclura la valeur Afficher.

8. Cliquez sur le bouton de menu déroulant qui s'affiche, puis sélectionnez Masquer.

Il s'agit de la table d'origine, avec la case Keep Source Formats désactivée pour deux colonnes, une ligne d'en-tête ajoutée et les en-têtes de la table d'origine masqués pour chaque colonne.

Application d'éléments de style intégrés

Dans ce cas, l'échantillon de résultat est simple mais vous donne une idée des possibilités.

Voici le code dans son intégralité :

<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>