5.6 Vue
Ce chapitre va vous permettre de modifier la mise en forme des documents en modification et en consultation.
5.6.1 Objectifs
- Modifier la mise en forme des attributs via les options,
- Utiliser une zone pour modifier la présentation du document,
- Utiliser la mise en forme de tableau,
- Utiliser la mise en forme d'attribut en édition et en consultation,
- Mettre en place un style pour modifier la présentation globale de Dynacase.
5.6.2 Cadre
Lors de la phase de spécification et des premiers retours les demandes suivantes ont été émises. Certains détails pourraient être améliorés sur les formulaires :
- Formulaires : les attributs en S (statique non modifiable en édition) apparaissent en gris,
ce qui les rend difficilement lisibles :
Figure 91. Audit : Date Statique
- Audits : le mot pièces-jointes apparaît 4 fois :
Figure 92. Audit : Pièces jointes
- Audits : la date de début, la durée et la date de fin doivent être présentées sur la même ligne,
- Fiche de non-conformité : les auditeurs aimeraient que le tableau des actions soit présenté en colonnes et pas en lignes,
- Après avoir vu les possibilités offertes par les contrôles de vue, les administrateurs fonctionnels veulent un menu leur permettant d'éditer tous les attributs d'une fiche. Dans ce mode un message doit être affiché pour indiquer le mode d'édition spécial.
5.6.3 Théorie
La modification des options de génération des formulaires utilise plusieurs techniques différentes :
- le style, il permet de définir des préférences d'affichage (ensemble de couleurs, css et js à intégrer dans certains types de page, définition de layout, etc...),
- les options des attributs, une partie des options des attributs influe sur la mise en forme de ceux-ci,
- l'injection de JS et CSS par le biais des hooks,
- la création d'une zone documentaire et de son contrôleur associé pour redéfinir entièrement la vue d'un document,
- l'utilisation d'une vue de rangée de tableau pour mettre en forme la ligne d'un tableau,
- la définition d'une vue d'attribut en édition et en consultation, elle permet de modifier la présentation d'un ou plusieurs attributs.
5.6.4 Les options
Vous allez commencer par la technique la plus simple à mettre en œuvre : la modification des options de mise en forme des attributs.
Vous allez utiliser l'option vlabel
,
cette option permet d'indiquer où vous souhaitez afficher le libellé des attributs.
Ouvrez le fichier ./COGIP_AUDIT/COGIP_AUDIT_AUDIT__STRUCT.csv
et modifiez les lignes :
-
caa_f_pj
: ajoutez dans la colonneP
(options)vlabel=none
, -
caa_a_pj
: ajoutez dans la colonneP
(options)vlabel=none
.

Figure 93. Audit : Structure
Ces options indiquent à Dynacase qu'il ne faut pas mettre de label dans la génération du document pour ces attributs.
Une fois le fichier de structure importé ou le module déployé le formulaire devient semblable à :

Figure 94. Audit : Pièces jointes
Vous pouvez remarquer que les deux libellés pièces jointes surnuméraires ne sont plus présents.
Vous pouvez retrouver le fichier mis à jour dans les sources.
5.6.5 Le style
Vous allez créer votre style. Un style est composé d'un fichier de définition et de fichier d'assets (css, js, layout), et permet de définir des règles de mise en forme valables sur un contexte.
5.6.5.1 Création des fichiers
Ajoutez un répertoire COGIP_AUDIT
dans le répertoire STYLE
.
Ensuite, ajoutez un fichier COGIP_AUDIT.sty
dans le répertoire COGIP_AUDIT
.
Le fichier .sty
est un fichier php, ce fichier doit contenir le code suivant :
<?php //global $sty_desc, $sty_const; $sty_desc = array( "name" => "COGIP_AUDIT", //Name "description" => "COGIP_AUDIT", //long description ); $sty_inherit = "STYLE/MODERN/MODERN.sty";
Ce code indique le nom logique du style et son style parent. Dans votre cas, c'est le style par défaut de Dynacase.
5.6.5.2 Ajout des règles spécifiques
Vous allez ajouter des règles spécifiques à votre nouveau style.
Ajoutez un répertoire Layout
sous le répertoire STYLE/COGIP_AUDIT
et ajoutez-y un fichier style_s_attributes.css
.
Le nom du fichier est libre. ; toutefois, puisque vous pouvez être amenés à créer plusieurs fichiers, il ets important de donner des noms explicites.
Vous devez avoir la structure de fichiers suivante :
│STYLE ├── COGIP_AUDIT │ ├── COGIP_AUDIT.sty │ └── Layout │ └── style_s_attributes.css
Le fichier CSS doit contenir :
.document input[visibility="S"], .document input[visibility="S"]:hover, .document textarea[visibility="S"], input[visibility="S"], input[visibility="S"]:hover, textarea[visibility="S"], div.static { color: black; background: white; border: none; border-style: none; padding: 0; margin-bottom: 0; text-overflow: ellipsis; } select[visibility="S"] { border: none; color: black; background: white; -webkit-appearance: none; -moz-appearance: none; } input[disabled="disabled"], input[disabled] { cursor: auto; } .document input[visibility="S"], .document input[visibility="S"]:hover { background-color: white; background-image: none; padding: 3px; }
Ces règles CSS vont rendre les attributs en S
avec un fond blanc et une police noire sur les vues d'édition et
sur les navigateurs suffisamment récents (supérieurs à IE7).
Vous allez maintenant enregistrer votre fichier CSS pour que celui-ci soit ajouté aux fichiers CSS produit par Dynacase.
Ouvrez le fichier STYLE/COGIP_AUDIT/COGIP_AUDIT.sty
et modifiez le contenu pour qu'il soit semblable à :
<?php //global $sty_desc, $sty_const; $sty_desc = array( "name" => "COGIP_AUDIT", //Name "description" => "COGIP_AUDIT", //long description ); $sty_inherit = "STYLE/MODERN/MODERN.sty"; // global parameters which can be use for other css $sty_rules = array( 'css' => array( 'dcp/document-edit.css' => array( "src" => array( "ultra" => "STYLE/COGIP_AUDIT/Layout/style_s_attributes.css" ) ) ) );
Vous pouvez trouver la liste des règles de compositions applicables dans la documentation.
Vous pouvez retrouver le repertoire style initialisé dans les sources.
5.6.5.3 Import du style
Ouvrez le fichier info.xml
et ajoutez à la fin de la procédure d'installation et d'upgrade l'instruction suivante :
<process command="./wsh.php --api=setStyle --style=STYLE/COGIP_AUDIT/COGIP_AUDIT.sty"/>
Ce qui donne :
<?xml version="1.0"?> <module name="COGIP_AUDIT" disabled="no" version="1.0.0" release="0"> <description>Cogip audit application</description> <requires> <module comp='ge' version='3.2' name='dynacase-core'/> </requires> <post-install> <process command="programs/record_application COGIP_AUDIT" /> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/ROLE_INIT_DATA.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/IGROUP_INIT_DATA.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/IUSER_INIT_DATA.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_BASE__STRUCT.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_BASE__PARAM.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_REFERENTIEL__STRUCT.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_REFERENTIEL__PARAM.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_CHAPITRE__STRUCT.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_CHAPITRE__PARAM.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_AUDIT__STRUCT.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_AUDIT__PARAM.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_FNC__STRUCT.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_FNC__PARAM.csv"/> <process command="programs/update_catalog" /> <process command="./wsh.php --api=setStyle --style=STYLE/COGIP_AUDIT/COGIP_AUDIT.sty"/> </post-install> <post-upgrade> <process command="programs/pre_migration COGIP_AUDIT" /> <process command="programs/record_application COGIP_AUDIT" /> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_BASE__STRUCT.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_BASE__PARAM.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_REFERENTIEL__STRUCT.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_REFERENTIEL__PARAM.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_CHAPITRE__STRUCT.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_CHAPITRE__PARAM.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_AUDIT__STRUCT.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_AUDIT__PARAM.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_FNC__STRUCT.csv"/> <process command="./wsh.php --api=importDocuments --file=./COGIP_AUDIT/COGIP_AUDIT_FNC__PARAM.csv"/> <process command="programs/post_migration COGIP_AUDIT" /> <process command="programs/update_catalog" /> <process command="./wsh.php --api=setStyle --style=STYLE/COGIP_AUDIT/COGIP_AUDIT.sty"/> </post-upgrade> </module>
Après déploiement, cela donne pour la date évoquée ci-dessus, en édition :

Figure 95. Audit : Date Statique
5.6.6 Vue d'attribut
Vous allez utiliser la vue d'attribut. Celle-ci va vous permettre de mettre en forme les différentes dates de l'audit pour qu'elles soient présentées sur la même ligne et pas les unes en dessous des autres.
5.6.6.1 Vue d'attribut : édition
5.6.6.1.1 Création
Vous allez commencer par la vue d'édition.
Ajoutez le fichier audit_dates_edit.xml
dans le répertoire ./COGIP_AUDIT/Layout
.
Ce fichier va contenir la définition de la représentation des attributs en édition.
Veuillez le compléter comme ci-dessous :
<style> [attrid=caa_duree] { display : none; } [attrid=caa_date_fin] { display : none; } .date-label { box-sizing: border-box; display: inline-block; width: 30%; float: left; text-align: right; padding: 2px 5px 1px 1px; } .date-value { box-sizing: border-box; display: inline-block; width: 70%; float: right; padding: 1px; } .date-duree { padding-left: 10px; } </style> <div class="date-label"> <span>[L_CAA_DATE_DEBUT] :</span> </div> <div class="date-value"> <span>[V_CAA_DATE_DEBUT]</span> <span class="date-duree">[L_CAA_DUREE] : [V_CAA_DUREE]</span> </div>
De plus, vous devez créer une vue d'attribut vide pour cacher les attributs.
Ajoutez le fichier audit_void.xml
dans le répertoire ./COGIP_AUDIT/Layout
.
Ce fichier reste vide car il va servir à cacher les attributs de durée et de fin
qui sinon seraient représentés deux fois.
Vous pouvez retrouver les fichier complété dans les sources.
5.6.6.1.2 Enregistrement
Ouvrez le fichier ./COGIP_AUDIT/COGIP_AUDIT_AUDIT__STRUCT.csv
et ajoutez les options suivantes :
-
caa_date_debut
: colonneP
(options) :edittemplate=COGIP_AUDIT:AUDIT_DATES_EDIT.xml:S
, -
caa_duree
: colonneP
:edittemplate=COGIP_AUDIT:AUDIT_VOID.xml:S
, -
caa_date_fin
: colonneP
:edittemplate=COGIP_AUDIT:AUDIT_VOID.xml:S
.
Vous pouvez retrouver le fichier mis à jour dans les sources.
Une fois le paquet déployé, vous obtenez en édition sur les documents d'audit le rendu suivant :

Figure 96. Audit : Attributs alignés
Le nom du fichier du fichier doit-être en minuscule et celui dans l'options
edittemplate
et viewtemplate
n'est pas sensible à la casse.
5.6.6.2 Vue d'attribut : consultation
5.6.6.2.1 Création
Vous allez maintenant customiser la vue de consultation.
Ajoutez le fichier audit_dates_view.xml
dans le répertoire ./COGIP_AUDIT/Layout/
.
Veuillez le compléter comme ci-dessous :
<style> #Tcaa_f_desc tr:nth-child(0n+4), #Tcaa_f_desc tr:nth-child(0n+5) { display : none; } .date-label { box-sizing: border-box; display: inline-block; width: 30%; float: left; text-align: right; padding: 2px 5px 1px 1px; } .date-value { box-sizing: border-box; display: inline-block; float: left; padding: 2px; } .date-fin { padding-left: 10px; } .date-separator { float: left; padding: 2px; } .date-separator:before { content: ":"; } </style> <div class="date-label"> <span>[L_CAA_DATE_DEBUT]</span> </div> <div class="date-separator"> </div> <div class="date-value"> <span>[V_CAA_DATE_DEBUT]</span> <span class="date-fin">[L_CAA_DATE_FIN] : [V_CAA_DATE_FIN]</span> </div>
Vous pouvez retrouver les fichier complété dans les sources.
5.6.6.2.2 Enregistrement
Ouvrez le fichier ./COGIP_AUDIT/COGIP_AUDIT_AUDIT__STRUCT.csv
et ajoutez les options suivantes :
-
caa_date_debut
: colonneP
(options) :edittemplate=COGIP_AUDIT:AUDIT_DATES_EDIT.xml:S|viewtemplate=COGIP_AUDIT:AUDIT_DATES_VIEW.xml:S
, -
caa_duree
: colonneP
:edittemplate=COGIP_AUDIT:AUDIT_VOID.xml:S|viewtemplate=COGIP_AUDIT:AUDIT_VOID.xml:S
, -
caa_date_fin
: colonneP
:edittemplate=COGIP_AUDIT:AUDIT_VOID.xml:S|viewtemplate=COGIP_AUDIT:AUDIT_VOID.xml:S
.
Une fois le paquet déployé, vous obtenez en consultation sur les documents d'audit le rendu suivant :

Figure 97. Audit : Attributs alignés
Vous pouvez retrouver le fichier mis à jour dans les sources.
Le nom du fichier du fichier doit-être en minuscule et celui dans l'options
edittemplate
et viewtemplate
n'est pas sensible à la casse.
5.6.7 Vue de rangée de tableau
Vous allez maintenant créer une vue de rangée de tableau. Cette vue va vous permettre d'organiser différemment la présentation des lignes d'un tableau. Elle est souvent mise en place sur des tableaux ayant de nombreuses colonnes pour les présenter de manière plus compacte.
Ajoutez un fichier fnc_table.xml
dans le répertoire ./COGIP_AUDIT/Layout
.
Ce fichier doit contenir :
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <!DOCTYPE table [ <!ELEMENT table (table-head*,table-body*)> <!ELEMENT table-head (cell)*> <!ELEMENT table-body (cell)*> <!ELEMENT cell ANY> <!ATTLIST cell class CDATA #IMPLIED style CDATA #IMPLIED> ]> <table> <table-body> <cell> <div class="cogip-fnc-cell" data-attrid="caf_action_desc"> <div class="cogip-label">[L_CAF_ACTION_DESC] :</div> <div class="cogip-value">[V_CAF_ACTION_DESC]</div> </div> <div class="cogip-fnc-cell" data-attrid="caf_action_resp"> <div class="cogip-label">[L_CAF_ACTION_RESP] :</div> <div class="cogip-value">[V_CAF_ACTION_RESP]</div> </div> <div class="cogip-fnc-cell" data-attrid="caf_action_date"> <div class="cogip-label">[L_CAF_ACTION_DATE] :</div> <div class="cogip-value">[V_CAF_ACTION_DATE]</div> </div> </cell> </table-body> </table>
Vous pouvez retrouver le fichier mis à jour dans les sources.
Le fichier ci-dessus décrit un template de table où :
- il n'y a plus de ligne de header (absence de la balise
table-head
), - chaque ligne de la table contient trois
div
qui chacune contiennent le libellé et la valeur d'un attribut. Les classes et ledata-attrid
ne sont pas utilisées mais sont ajoutées à titre de bonne pratique pour favoriser la mise en place d'une éventuelle css.
Ensuite ouvrez le fichier ./COGIP_AUDIT/COGIP_AUDIT_FNC__STRUCT.csv
et modifiez la colonne P
(options) de la ligne caf_a_action
pour remplacer la colonne options (vide) par
vlabel=up|rowviewzone=COGIP_AUDIT:FNC_TABLE.xml|roweditzone=COGIP_AUDIT:FNC_TABLE.xml
.
Le nom du fichier du fichier doit-être en minuscule et celui dans l'options
edittemplate
et viewtemplate
n'est pas sensible à la casse.
Vous pouvez retrouver le fichier mis à jour dans les sources.
Ces nouvelles options indiquent que le template ci-dessus est utilisé en édition et en consultation.
Après le déploiement du paquet, le tableau est présenté de la manière suivante :

Figure 98. FNC : tableau mis en forme
5.6.8 Vue de document
Vous allez finir ce chapitre en mettant en place une vue de document pour l'édition.
Vous allez mettre en place une vue qui effectue plusieurs actions :
- vérifie que l'utilisateur qui la demande a bien le profil
administrateur fonctionnel
, - force toutes les visibilités à
W
, - ajoute un bandeau indiquant que ce mode d'édition est un mode administrateur et que de grands pouvoirs impliquent de grandes responsabilités.
Une vue est composée de deux éléments :
- un template : un fichier contenant la définition de la vue et son contenu,
- un contrôleur : une méthode PHP qui est exécutée avant le rendu du template.
5.6.8.1 Création de la vue
Vous allez commencer par ajouter le fichier de template.
Ajoutez un fichier edit_admin.xml
dans le répertoire ./COGIP_AUDIT/Layout/
.
Ce fichier doit contenir :
[DOCUMENT]
Vous pouvez retrouver le fichier mis à jour dans les sources.
Ouvrez le fichier ./COGIP_AUDIT/COGIP_AUDIT_BASE__CLASS.php
et ajoutez les fonctions suivantes :
/** Total edition */ /** * Controller of total admin * * @templateController */ public function edit_admin() { if ($this->userIsAdmin()) { //Choice of the default zone (FDL:EDITBODYCARD) $message = _("coa:Admin edition : beware !"); $css = <<<CSS .normal::before { display: block; width: 100%; text-align: center; content: "$message"; color: red; font-size: 2em; } CSS; global $action; /* @var \Action $action */ $action->parent->addCssCode($css); $zonebodycard = "FDL:EDITBODYCARD"; $attributes = $this->getAttributes(); foreach ($attributes as $currentAttribute) { /* @var \NormalAttribute $currentAttribute */ if (is_a($currentAttribute, "NormalAttribute") && $currentAttribute->mvisibility !== "I") { $currentAttribute->setVisibility("W"); } } $this->lay->set("DOCUMENT", $this->viewDoc($zonebodycard)); return; } $this->lay->set("DOCUMENT", "<h1>You cannot access to this page</h1>"); } /** * Compute if user have the admin role * * @return bool */ protected function userIsAdmin() { global $action; if ($action->user->id == 1) { return true; } $roles = $action->user->getAllRoles(); foreach ($roles as $currentRole) { if (strtolower($currentRole["login"]) === "role_admin_fonctionnel") { return true; } } return false; }
Vous pouvez retrouver le fichier mis à jour dans les sources.
Vous pouvez remarquer les points suivants :
- la fonction
userIsAdmin
, cette fonction récupère l'utilisateur en cours et vérifie deux conditions :- soit que son id est
1
(c'est l'id système de l'administrateur), - soit qu'il possède le rôle
role_admin_fonctionnel
,
- soit que son id est
- la fonction
edit_admin
, c'est le contrôleur de la vue :- elle doit posséder le même nom que le fichier xml de la vue,
- elle doit posséder le tag
@templateController
sinon la fonction n'est pas exécutée, - si l'utilisateur est admin :
- une CSS est ajoutée elle met en place un message d'avertissement,
- elle parcourt tous les attributs et passe ceux-ci à
W
(excepté ceux enI
car ils ne peuvent pas être modifié par l'utilisateur courant), - elle génère le contenu de la page et l'injecte dans la variable de layout
DOCUMENT
,
- l'utilisation de
$this->lay->set("DOCUMENT", "…")
dans le contrôleur de la vue : c'est lui qui va remplacer[DOCUMENT]
dans le template par le contenu généré.
5.6.8.2 Ajout du menu
Vous allez maintenant ajouter le menu.
Ouvrez le fichier COGIP_AUDIT/COGIP_AUDIT_BASE__STRUCT.csv
et ajoutez la ligne suivante :

Figure 99. Base : définition de menu
Vous pouvez retrouver le fichier mis à jour dans les sources.
Vous allez gérer les visibilités de ce menu.
Ouvrez le fichier ./COGIP_AUDIT/COGIP_AUDIT_BASE__CLASS.php
et ajoutez la fonctions suivante :
/** - Compute menu visibility * - @return int */ public function visibilityAdminMenu() { if ($this->userIsAdmin()) { return MENU_ACTIVE; } else { return MENU_INVISIBLE; } }
Vous pouvez retrouver le fichier mis à jour dans les sources.
Cette fonction va vous permettre de définir que le menu est visible uniquement pour les utilisateurs ayant le profil administrateur.
Ouvrez le fichier COGIP_AUDIT/COGIP_AUDIT_BASE__STRUCT.csv
et modifiez la colonne M
(phpfunc) pour l'attribut cab_menu_admin_edit
en la complétant avec ::visibilityAdminMenu()
.
Vous pouvez retrouver le fichier mis à jour dans les sources.
5.6.8.3 Résultat
Une fois le paquet déployé et si l'utilisateur connecté est administrateur, un menu supplémentaire est affiché.

Figure 100. Menu édition admin
Après avoir cliqué sur ce menu, la vue suivante s'ouvre :

Figure 101. Édition admin
Vous pouvez remarquer dans cette vue :
- le libellé d'avertissement,
- le champ rédacteur qui normalement est en
S
(non modifiable) et passé enW
(modifiable) et est donc modifiable par l'administrateur fonctionnel.
5.6.9 Mise en place des modifications
Vous allez maintenant déployer vos modifications :
<devtool> deploy -s . --url http://admin:anakeen@<nomDeDomaine>/dynacase-control/ --port <port> --context dynacase
5.6.10 Conclusion
Dans ce chapitre vous avez expérimenté les principales techniques de modifications d'interface. Vous avez pu constater que le formulaire est facilement modifiable, à la fois dans les détails de mise en forme et dans son fonctionnement.