Comment concevoir une page de Diveport “Print-Ready” ?

Souvent, les concepteurs de tableaux de bord créent une page pertinente pour les utilisateurs qui, inévitablement, veulent la partager au format PDF. Lorsque cela se produit, il est important que la page soit "prête à imprimer". La page doit avoir été préalablement définie de manière à ce que le format de mise en page corresponde au format couramment utilisé (par exemple lettre US ou A4 en mode paysage ou portrait)

Dans notre exemple nous avons utilisé le format Lettre US en mode paysage.

Avant de commencer, vérifiez que votre navigateur web ne bloque pas les fenêtres popup.

Étape 1 : commencez avec une disposition "manuelle"

Dans une page de DivePort vide, cliquez sur "Modifier" dans le coin supérieur droit de la page pour passer en mode Édition. Les liens dans le coin supérieur droit de la page sont modifiés, un chevron pointant vers le bas et le mot "Annuler" apparaissent alors.

Cliquez sur le chevron et naviguez ensuite dans le menu déroulant pour sélectionner "Paramètres". Ceci active la boîte de dialogue "Paramètres de la page" comme ci-dessous. Sélectionnez "Manuelle" dans la liste déroulante des options "Mise en page". Cliquez sur le bouton "Paramètres d'impression" et assurez-vous que "Imprimer vers PDF" est défini sur "Oui". Cliquez sur "OK" pour approuver les "Paramètres d'impression", puis cliquez sur "OK" pour approuver les "Paramètres de la page".

print-ready-design1

Une fois que vous avez cliqué sur "OK", les liens supplémentaires "Annuler" et "Enregistrer" apparaissent dans le coin supérieur droit de la page. Vous pouvez cliquer sur "Enregistrer" pour enregistrer les modifications périodiquement après chaque étape, ou attendre que toutes les modifications apportées à la page soient effectuées. Si vous enregistrez périodiquement, vous devrez cliquer sur "Modifier" après chaque "Enregistrer" pour revenir en mode édition.

Étape 2 : ajoutez un Background Portlet

En mode d'édition, cliquez sur le chevron vers le bas et faites défiler pour sélectionner "Ajouter un portlet". Ceci active la boite de dialogue "Ajout d'un portlet" comme illustré ci-dessous. Sélectionnez "Background Portlet", puis cliquez sur "OK".

print-ready-design2

Ceci active la boîte de dialogue appelé "Sélection d'un type d'arrière-plan" comme ci-dessous.

print-ready-design3

Vous devez sélectionner l'arrière-plan de type "Rectangle". Après avoir cliqué sur "OK", vous vous retrouverez avec la boîte de dialogue appelé "Édition de Background Portlet".

Un certain nombre de variables peuvent être modifiées ici. Nous sommes principalement intéressés par la taille et la couleur du rectangle. Modifiez la couleur de remplissage du rectangle à la valeur #00FFFF ou choisissez une autre couleur qui va bien se démarquer de vos tableaux et graphiques.

print-ready-design4

print-ready-design5

Cliquez sur "OK" pour approuver vos modifications.

Étape 3 : Modifiez les paramètres de l'instance

Vous devez également définir 1280 x 960 pixels dans les paramètres de l'instance de portlet - si vous ne le faites pas, il peut être difficile de choisir l'arrière-plan une fois qu'il est couvert de tableaux et de graphiques. La taille par défaut de l'instance de portlet est de 200 x 200 pixels.

Pour accéder aux paramètres d'instance de portlet, survolez le coin supérieur droit du contour de l'instance de portlet jusqu'à ce qu'un chevron vers le bas apparaisse.

Cliquez sur le chevron et faites défiler le menu déroulant "Paramètres". Sélectionnez "Paramètres" et la boîte de dialogue "Paramètres de l'instance de portlet" apparaît comme illustré ci-dessous.

Définissez la taille du rectangle à 1280 x 960.

print-ready-design7

Une fois la taille saisie, cliquez sur "OK" pour approuver vos modifications.

Maintenant, il suffit de cliquer et faire glisser le rectangle dans le coin supérieur gauche de l'espace de mise en page. Vous pouvez également déplacer le portlet en modifiant la "Position" à "0 0" à l'étape précédente.

print-ready-design6

Étape 4 : Sauvegardez votre travail

Vous pouvez maintenant cliquer sur "Enregistrer" dans le coin supérieur droit de DivePort pour enregistrer toutes vos modifications apportées à la page. Cela entraînera une sortie du mode Édition. Les liens dans le coin supérieur droit de la page deviennent "Imprimer" et "Modifier".
Étape 5 : testez la page

Pour tester ce que vous avez fait jusqu'à présent, cliquez sur "Imprimer> Imprimer vers PDF". Le PDF doit apparaître dans une fenêtre pop-up comme illustré ci-dessous. Comme vous pouvez le voir dans le PDF que nous venons de faire, le rectangle bleu correspond parfaitement à l'espace disponible.

print-ready-design9

Vous pouvez maintenant utiliser cet espace comme un modèle dans lequel d'autres portlets peuvent être placés. Une fois que tous les portlets pour votre tableau de bord ont été placés et bien organisés dans cet espace, vous pouvez changer la couleur de remplissage du rectangle du Background portlet pour la définir à blanc. Pour ce faire, cliquez sur le chevron dans le coin supérieur droit de l'instance du Background portlet et sélectionnez "Modifier". Modifiez la couleur de remplissage du rectangle avec la valeur #FFFFFF.

print-ready-design8

Assurez-vous que vous laissez ce rectangle blanc en arrière-plan afin que l'impression de PDF se produise correctement.

En résumé, nous pouvons voir que le partage de fichiers PDF est assez facile. La chose la plus importante à faire est d'ajuster l'ensemble des portlets au sein d'un Background Portlet rectangle de taille 1280 x 960 et de laisser ce portlet en arrière-plan. Le Background portlet doit être présent afin de s'assurer que l'impression au format PDF conviendra parfaitement à une mise en page de format Lettre US en mode paysage.

Voici ci-dessous les tailles de Background Portlets à définir en fonction du format de mise en page choisi :

Format Taille du Background portlet
Lettre US paysage 1280 x 960
Lettre US portrait 960 x 1280
A4 paysage 1325 x 925
A4 portrait 925 x 1325