Personnalisation des pages / widgets

Le mode design est accessible depuis :

• Le menu principal (initialement dans la catégorie Paramétrages).
  
  
• Un raccourcis d'une navigation personnalisée , s'il a été paramétré.
  
  
• Un clic sur le bouton Designer le type de page du Page Manager .

La modification des paramètres du mode design permet de créer des design différents pour les pages et les widgets.

Sélection du type de page

Dans la fenêtre de design , la sélection du type de page permet de choisir la page à personnaliser.

Lorsque cette valeur est modifiée, la fenêtre de design se recharge avec le nouveau type de page sélectionné.

Sélection de la langue

Dans la fenêtre de design , la sélection de la langue permet de choisir la langue pour laquelle la page sera personnalisée.

Lorsque cette valeur est modifiée, la fenêtre de design se recharge avec la page de la langue sélectionnée.

Sélection du thème

Dans la fenêtre de design , la sélection du thème permet de choisir le type de périphérique pour lequel la page est personnalisée.

Lorsque cette valeur est modifiée, la fenêtre de design se recharge avec la page du thème sélectionné.

Le mode design permet de personnaliser des éléments comme les pages , les widgets , les templates … Lorsqu'un élément, par exemple une page, contient d'autres éléments personnalisables, il est possible de rentrer en design sur ces éléments.

Pour entrer en design et modifier un élément contenu dans l'élément actuellement en cours de design, il existe plusieurs solutions :

• Effectuer un double clic sur l'élément visé dans la zone de visualisation du design .
• Effectuer un double clic sur l'élément visé dans l'arborescence de l'élément .
• Sélectionner l'élément visé dans l'arborescence de l'élément , puis cliquer sur le bouton Modifier de la zone d'actions .

L'environnement se recharge et reflète alors les informations du nouvel élément designé. Ce mécanisme peut être appliqué à nouveau sur le nouvel élément designé, s'il contient lui même des éléments personnalisables.

Pour revenir à l'élément précédent, il suffit de cliquer sur le bouton Retour de la zone d'actions .

Revenir à un élément

Pour revenir à un élément en particulier, cliquer sur le nom de l'élément dans la zone contenant le chemin d'accès de l'élément, située sous la zone d'actions .

Que ce soit pour les pages ou pour les widgets, l'ajout, la suppression ou la modification des éléments suit le même procédé.

Il est possible d'ajouter des contrôles dans les pages et dans les widgets :

• Pour les pages, les contrôles disponibles sont les zones et les widgets . Suivant le type de page sélectionné, les contrôles disponibles seront plus ou moins nombreux.
  
  
• Pour les widgets, les contrôles disponibles sont les champs supplémentaires (AddFields). Les champs supplémentaires correspondent à tous les éléments visuels de l'application (grilles, boutons, cases à cocher, champs texte…).

Pour ajouter un contrôle à l'élément en cours de design (page ou widget), cliquer sur le bouton ajouter présent dans la zone des contrôles instantiables .

Saisir le nom du nouveau contrôle

Une fenêtre apparait à l'écran dans laquelle le nom du nouveau contrôle doit être renseigné. Valider le nouveau nom, le contrôle nouvellement instantié apparaît dans la liste des contrôles disponibles . Cette liste regroupe tous les contrôles de tous les design de l'élément en cours, peu importe le thème ou la langue sélectionné, ce qui signifie qu'un contrôle créé dans un thème A se retrouvera dans la liste des contrôles disponibles du thème B.

Pour ajouter le nouveau contrôle à la page / widget en cours de design, depuis la liste des contrôles disponibles, réaliser un glisser-déposer dans l'arborescence ou dans la zone de visualisation du design . Relâcher le bouton de la souris à l'endroit désiré. Le contrôle apparaît alors dans la zone de visualisation et dans l'arborescence.

Positionner le contrôle dans la page / widget

Il est possible de supprimer les contrôles présents dans la page / widget. Après avoir sélectionné le contrôle, la suppression se fait en deux temps :

• Pour retirer un élément de la page / widget, cliquer sur le bouton retirer un élément. Le contrôle se retrouve alors dans la liste des contrôles disponibles et peut être replacé à tout moment dans la page / widget.
  
  
• Lorsque le contrôle se trouve dans la liste des contrôles disponibles , il est possible de le supprimer définitivement en cliquant sur le bouton supprimer le contrôle. Une fenêtre de confirmation apparaît demandant la confirmation de la suppression.

Les propriétés du contrôle sélectionné sont visibles dans la zone propriétés , suivant l'élément sélectionné, les propriétés modifiables seront différentes.

La modification des propriétés d'un élément permet de changer le comportement et le rendu de l'élément dans la page. Les propriétés sont enregistrées en fonction des différents paramètres sélectionnés dans la fenêtre de design, mais il existe un mécanisme de surcharge en fonction des groupes et des utilisateurs de l'application.

Si la propriété d'un élément est modifiée au niveau du groupe et que la même propriété du même élément n'a pas été modifiée au niveau de l'utilisateur , alors la propriété du groupe sera appliquée.

L'intérêt de ce mécanisme est de pouvoir personnaliser un rendu et un comportement pour un groupe, ainsi tous les utilisateurs du groupe concerné bénéficieront des modifications.

Outre les contrôles, il est possible d'ajouter des éléments secondaires à partir de l'arborescence de l'élément designé :

Groupes

Les groupes permettent de créer des catégories pour les contrôles contenus dans la page / widget. Ils peuvent être imbriqués les uns dans les autres, afficher des légendes, un bouton plier/déplier… L'ajout d'un groupe se fait via le bouton ajouter un groupe situé dans l'arborescence de l'élément designé.

Groupe appro dans la fiche tiers

Espace vide - Légende - Séparateur - Splitter

Ajouter un espace vide

Eléménts secondaires dans l'arborescence

L'espace vide permet de modifier l'espace entre deux éléments. Il est accessible via le sous-menu du bouton ajouter un élément secondaire présent au niveau de l'arborescence de l'élément designé.

La légende est un texte simple que l'on peut disposer à l'intérieur d'une page / widget. Elle peut être ajoutée via le sous-menu du bouton ajouter un élément secondaire présent au niveau de l'arborescence de l'élément designé.

Le séparateur représente une barre fixe horizontale ou verticale permettant de créer une séparation entre les éléments d'une page / widget. Il peut être ajouté via le sous-menu du bouton ajouter un élément secondaire présent au niveau de l'arborescence de l'élément designé.

Le splitter est une barre horizontale ou verticale, séparant les éléments d'une page / widget, et qui donne la possibilité de réduire / agrandir les zones qu'il délimite. Il peut être ajouté via le sous-menu du bouton ajouter un élément secondaire présent au niveau de l'arborescence de l'élément designé.

Modifier les alignements

Il est possible de modifier le positionnement des contrôles dans la page / widget. Pour déplacer un contrôle, réaliser un glisser-déposer depuis l'arborescence ou la zone de visualisation du design jusqu'à l'endroit désiré.

Les contrôles peuvent également être réalignés à l'intérieur de l'élément designé. Pour réaliser cette action, faire un clic droit sur le contrôle dans l'arborescence ou la zone de visualisation du design . Dans le sous-menu, positionner la souris sur Alignement Horizontal ou Alignement Vertical puis choisir l'alignement désiré.

Insérer un template

A l'intérieur des pages et des widgets, des templates peuvent être insérés. Les templates ne peuvent être ajoutés que sur des groupes existants.

Pour ajouter un template, faire un clic droit sur le groupe, puis dans le sous-menu sélectionner l'élément Insérer un template.

Dans la nouvelle fenêtre, sélectionner le template à ajouter et valider. Le template est alors visible dans l'arborescence de l'élément désigné.

Choix du template à insérer

Cloner à partir d'un thème

Cloner à partir d'un thème revient à appliquer les contrôles, les alignements et les propriétés, contenus dans le design du thème choisi, dans le thème actuellement défini dans la fenêtre de design.

Pour cloner à partir d'un thème, cliquer sur le bouton Cloner à partir d'un thème situé dans la zone d'actions de la fenêtre de design. Dans la liste déroulante, sélectionner le thème à partir duquel les éléments et leurs propriétés seront copiés. La fenêtre de design se recharge après application des modifications.

Références

A voir