MEG - Intégration d’un « générateur / assistant » de templates #160

Gaetanbrl · 2023-02-03T15:29:52Z

Issue développée dans le cadre d'une prestation JDev / Megalis Bretagne / GeoBretagne

Histoire

En tant que utilisateur,
Je souhaite utiliser une interface simple et intuitive de génération des templates (fiche info)
Pour reprendre ou réaliser facilement des templates Mustache pour chacune des couches de mon application

Description complémentaire

Exemple avec la version 3.1, il est possible de générer un template Mustache en cochant l'option "Utiliser un template"

Ce qui produit une template intégré dans le config.xml :

<template>
    <![CDATA[
        {{#features}} 
             <li class="item" style="width:238px;"> 
                 <h3 class="title-feature">{{nom}}</h3> 
                 <p class="text-feature"></p> 
                 <img src="{{photo}}" class="img-responsive" style="margin-top:5%;" /> 
              </li> 
        {{/features}}]]>
</template>

En s’appuyant sur l’existant, il faut revoir la génération de templates pour :

Choisir un modèle de template (en s’appuyant si possible sur les patrons de templates déjà créés : Intégration du travail réalisé sur mviewer template #100)
Réadapter les templates pour un affichage « responsive » sur mobile ou tablette
Modifier les éléments et leur disposition (ex : affichage de type texte devient affichage de type hyperlien)
Visualiser le rendu
Ajouter un nouvel affichage de type iframe avec paramétrage du pattern de l’URL (ex : https ://monsite.com/{{mon_champ}})
Ajouter des conditions d’affichage si non nul par exemple
Enregistrer le template dans un fichier plutôt que dans le contenu du nœud <template>

RAF au 15/05/2023 :

Doc utilisateur (rebase branche userdoc-198)
Interface proposée par @Agath21
Rebase entre branches : develop-meg -> issue-160
Gestion entre URL Externe / template créé par le générateur / template par défaut
test avec backend PHP
Correction de la prévisualisation (+ adaptation URL)
Syntax conditionnelle pour les type field uniquement (vu cotech du 16/05)
tests utilisateurs

The text was updated successfully, but these errors were encountered:

spelhate · 2023-03-27T11:50:38Z

En complément de ce qui est décrit plus haut je décris le parcours utilisateur souhaité.

je souhaite mettre en forme la fiche d'information d'une couche
Pour cela je créée un template qui s'applique à ma couche à partir d'un modèle que je choisis via l'IHM
L'assistant Template me propose alors les champs disponibles de la couche et les "affichages" possibles pour chaque champ : ( Titre, texte, lien hyper texte, image, iframe )
Pour chaque champ utilisé dans le template, je peux lui affecter un alias qui remplacera le nom du champ dans la fiche d'information.
En mode avancé, l'IHM affiche le code source du template. Ce code source de template est modifiable à la main par l'utilisateur, avec affichage du rendu en live.
L'enregistrement définitif du template se fait au moment de l'enregistrement de l'application. L'enregistrement consiste en un fichier mst créé sur le serveur dans le dossier de l'application versionnée.

Gaetanbrl · 2023-03-27T13:32:09Z

En mode avancé, l'IHM affiche le code source du template. Ce code source de template est modifiable à la main par l'utilisateur, avec affichage du rendu en live.

@spelhate tu détails dans l'étape 5 du WYSIWYG ?

spelhate · 2023-03-27T15:10:53Z

Non. Juste donner la possibilité à l'utilisateur de modifier quelques éléments à la main. Exemple Passée d'un h1 à un h3, mettre des sauts de ligne...

Gaetanbrl · 2023-03-27T15:35:22Z

Mais via un éditeur intégré qui prend le code à chaud c'est ca ?

spelhate · 2023-03-27T17:03:12Z

Oui c'est un peu ça.

lecault · 2023-03-28T10:12:53Z

Avec un peu de retard, voici mes commentaires :

Pour le point 3

Est ce qu'il faut décrire tous les cas possibles ?

J'ajouterai sous-titre, description (police plus fine italique) et le lien doit apparaître sous la forme d'un bouton (avec le nom de l'alias). Un plus serait l'ajout possible de texte libre.

Pour le point 4

Ajout pour chaque champ utilisé d'une option permettant de masquer le champ si pas de valeur ({{#secteurs}} {{/secteurs}}) et de la possibilité de mettre plusieurs champ dans un alias.
Exemple pour une adresse :
<b>Adresse :</b> {{adresse}} {{code_postal}} {{ville}}

Le point 5 sera apprécié avec le rendu en live
Pour le point 6
nom du mst = nom de l'id de la couche

Gaetanbrl · 2023-03-28T12:07:15Z

Est ce qu'il faut décrire tous les cas possibles ?

Oui. Il faut garder le fonctionnement classique.

Tous les cas spécifiés et prévus dans le CCTP seront couverts. Plus c'est précis, moins il y a d'erreurs ou de surprises possibles.
C'est pour cela qu'on a besoin d'un maximum de détails à partir de votre besoin (besoin = élément connu dans le CCTP qu'on a su estimer).

spelhate · 2023-03-31T15:40:31Z

En complément de ce qui est décrit plus haut je décris le parcours utilisateur souhaité.

1. je souhaite mettre en forme la fiche d'information d'une couche

2. Pour cela je créée un template qui s'applique à ma couche à partir d'un modèle que je choisis via l'IHM

3. L'**assistant Template** me propose alors les champs disponibles de la couche et les "affichages" possibles pour chaque champ : ( Titre, texte, lien hyper texte, image, iframe )

4. Pour chaque champ utilisé dans le template, je peux lui affecter un alias qui remplacera le nom du champ dans la fiche d'information.

5. En mode avancé, l'IHM affiche le code source du template. Ce code source de template est modifiable à la main par l'utilisateur, avec affichage du rendu en live.

6. L'enregistrement définitif du template se fait au moment de l'enregistrement de l'application. L'enregistrement consiste en un fichier **mst** créé sur le serveur dans le dossier de l'application versionnée.

Mise à jour Géob & Megalis

Mode simple

je souhaite mettre en forme la fiche d'information d'une couche
Pour cela je créée un template qui s'applique à ma couche à partir d'un modèle que je choisis via l'IHM
L'assistant Template me propose alors les champs dynamiques disponibles de la couche et les "affichages" possibles pour chaque champ : ( Titre, Sous-titre, texte, description, lien hyper texte (bouton), image, iframe ) avec l'option "masquer si pas de valeur"
Possibilité de création de champs virtuels qui consistent en une concaténation de plusieurs champs avec un séparateur défini par l'utilisateur
Possibilité de créer des champs statiques : texte statique ou image
Je réorganise les éléments de mon template par glisser/déplacer et suppression des éléments du modèle nom utilisé
Pour chaque champ utilisé dans le template, je peux lui affecter un alias qui remplacera le nom du champ dans la fiche d'information.
L'enregistrement définitif du template se fait au moment de l'enregistrement de l'application (identifiant de la couche .mst). L'enregistrement consiste en un fichier mst créé sur le serveur dans le dossier de l'application versionnée.

Mode avancé

Possibilité de télécharger le mst et le recharger après modification.

Gaetanbrl · 2023-04-04T14:16:04Z

Pour cette issue - voir les modèles de ce lien :

https://geobretagne.fr/mviewer/?config=/apps/tutoriel/templates/config_template.xml

ref issue #100 (comment)

Voir aussi les lib mreport pour le drag&drop et autres interactions.

Agath21 · 2023-04-11T14:22:33Z

Proposition d'interface et parcours utilisateur

Les scénarios présentés ci-dessous sont différents et seulement un seul des 2 proposés sera réalisé.
Ces maquettes permettent de faciliter le choix entre les deux scénarios.

Scénario 1 | Basé sur des modèles

Après avoir sélectionner une donnée (ici Lycées de Bretagne), l'utilisateur ouvre les options de la couche. Il se positionne dans l'onglet Interrogation et seléctionne Personnalisée pour le Format de la fiche d'information :

1 . L'utilisateur crée un nouveau template dans le bloc Configurer la fiche d'information en cliquant sur le bouton Créer

2 . Une nouvelle fenêtre s'ouvre indiquant la donnée concernée et la position de la fiche précédemment sélectionnée. L'utilisateur sélectionne un template parmi les modèles prédéfinis dans la liste

3 . La structure du template s'affiche avec les différents composants. L'utilisateur indique pour chaque composant les valeurs à utiliser :

Trois types de champs sont possibles :

Champ dynamique (données)
Champ statique (saisie par l'utilisateur en brut)
Concaténation de champs dynamiques

4 . L'utilisateur peut prévisualiser son template en cliquant sur le bouton Prévisualiser :

5 . Après avoir cliqué sur Enregistrer, l'utilisateur peut éditer ou supprimer son template généré à l'image du système des couches :

Scénario 2 | Structure libre

Après avoir sélectionner une donnée (ici Lycées de Bretagne), l'utilisateur ouvre les options de la couche. Il se positionne dans l'onglet Interrogation et seléctionne Personnalisée pour le Format de la fiche d'information :

1 . L'utilisateur crée un nouveau template dans le bloc Configurer la fiche d'information en cliquant sur le bouton Créer

2 . Une nouvelle fenêtre s'ouvre indiquant la donnée concernée et la position de la fiche précédemment sélectionnée. La structure du template est vide, l'utilisateur clique sur le bouton Ajouter un composant :

3 . Une librairie de composants prédéfinis s'ouvre, l'utilisateur sélectionne le composant qu'il souhaite ajouter :

4 . L'utilisateur configure ensuite les paramètres du composant :

Il peut :

ajouter un composant supplémentaire
supprimer un composant
modifier la position d'un composant (drag & drop)

5 . Il prévisualise son template comme dans le scénario 1 en cliquant sur Prévisualiser :

Avantages & inconvénients

	Scénario 1	Scénario 2
Avantages	Modèles prédéfinis -> Utilisation simple et facilité pour refaire un modèle	Système libre, modulaire et évolutif dans le temps \| Evolution de la librairie des composants possible et sera simple via des classes JS
Inconvénients	Peu de souplesse dans la composition des fiches \| Utilisation plus restreinte	Page blanche

Risques

Scénario 2 | Ajout de beaucoup de composants -> Template ilisible car scroll interminable (limiter le nombre de composants ?)
Scénario 2 | Gestion du responsif pour le template du bas (proposer 2 structures : 1 ou 2 colonnes ?)

Agath21 · 2023-04-11T14:26:10Z

Librairie des composants

Liste des composants disponibles avec les paramètres à indiquer pour l'utilisateur :

Composant	Paramètre(s)	dynamique	statique	concat.
Titre	texte	x	x	x
Sous-titre	texte	x	x	x
Image	url	x	x
Bouton	intitulé \| url	x	x
Texte	texte	x	x	x
Chiffre clé	valeur \| intitulé \| icône \| couleur	x	x
Iframe	url	x	x
Liste	texte	x	x

Agath21 · 2023-04-11T14:48:25Z

Cas d'usages

Template existant modifié en dehors du studio

1 . L'utilisateur a crée un template à l'aide du générateur mais l'a modifié entre deux manuellement. Il souhaite de nouveau le modifier dans le studio en cliquant sur Editer :

2 . Un alerte s'ouvre indiquant qu'il n'est pas possible de modifier de nouveau le template. L'utilisateur peut toutefois en créer un nouveau et écraser l'ancien ou conserver son template actuel :

Gaetanbrl · 2023-04-14T06:33:09Z

Modèles de template pour le panneau de droite et du bas par @Agath21 qui servent de base pour la réalisation des composants du scénario 2 validé par @spelhate @lecault :

templates_models.zip

Gaetanbrl · 2023-04-14T06:34:24Z

Travaux démarrés dans la branche :

https://github.com/jdev-org/mviewerstudio/tree/issue-160

Draft de l'IHM en avance de phase par @Agath21 :

https://github.com/jdev-org/mviewerstudio/tree/draft-issue160

Gaetanbrl · 2023-04-28T13:26:01Z

Apperçu des travaux en cours sur la branche jdev-org/issue-160 :

A noter que le champ de type "A partir de plusieurs champs" utilise une valeur statique + un champ
On voit notamment la proposition des champs commençants pas la lettre "q" pour quartier

========

Ou avec les lycées (seul l'URL de la couche de départ change) :

lecault · 2023-04-28T14:16:46Z

Super merci pour la première démo.
Il manque juste le type de composant texte. D'ailleurs celui-ci est utilisé nativement de la forme : Ville : Rennes
Dans le système proposé on utiliserait donc l'option "à partir de plusieurs champs".

Du coup l'intitulé "à partir de plusieurs champs" n'est pas très clair. J'opterai pour "formule personnalisée" à valider avec @spelhate

Concernant le type "à partir de plusieurs champs", on peut quand même ajouter plusieurs champs et plusieurs valeurs statiques ?
Enfin, je trouverai bien qu'on différencie graphiquement un champ et une valeur statique par exemple par la couleur (valeur statique en blanc, champ en coloré).

Gaetanbrl · 2023-04-28T14:23:50Z

Il manque juste le type de composant texte

En effet.

Concernant le type "à partir de plusieurs champs", on peut quand même ajouter plusieurs champs et plusieurs valeurs statiques ?

je trouverai bien qu'on différencie graphiquement un champ et une valeur statique

oui, c'est une option de la lib qui permet d'ajouter des valeurs dans la liste, je trouvais ca intéressant et ce n'est pas obligatoire.

Dans tous les cas, je ne ferai pas d'évolution sur ce point étant donné qu'une modification graphique serait une surcharge de la librairie. Sinon n'ayant pas de temps pour ce type d'évolution, j'enlèverai la possibilité de faire de la concaténation de champs + valeurs statique via ces tags, il faudra alors utiliser la syntaxe du champ "valeur statique".

Gaetanbrl · 2023-05-02T10:18:49Z

Questions (pour cotech ?) / contraintes relevées :

Lorsqu'on prévisualise, on a besoin d'avoir accès à une donnée (entité) pour disposer des attributs à previsualiser. Depuis un WMS, comment procéder (e.g via un getFeatureInfo) ? Avec quel parcours utilisateur ?
Lorsqu'on prévisualiser, nous n'avons pas souhaité ajouté de CSS dans le template de chaque composant (e.g Titre) car nous souhaitons que lorsque le template est chargé dans le mviewer de destination, ce soit le CSS du mviewer qui soit utilisé. Le chargement préalable du CSS d'un mviewer dans studio risquerait de parasiter le CSS natif du studio. Aucune solution technique reste à trouver pour avoir une zone de prévisualisation "esthétique".

Agath21 · 2023-05-04T13:00:41Z

Interface du générateur pour le `bottom-panel`

Spécifications :

Template sur 2 colonnes (col-6) par défaut
Une colonne est limitée à 3 composants. Quand on ajoute un 4e composant, il se situe sur la deuxième colonne. Il est ensuite possible de modifier l'ordre des composants pour les déplacer de colonne

Gaetanbrl added the enhancement label Feb 3, 2023

Gaetanbrl closed this as completed May 22, 2023

Gaetanbrl added a commit to jdev-org/mviewerstudio that referenced this issue May 25, 2023

mviewer#160 harmonize modal footer btn

c33f7d8

Gaetanbrl added a commit to jdev-org/mviewerstudio that referenced this issue May 25, 2023

mviewer#160 harmonize modal footer btn

b9ea669

Gaetanbrl added a commit to jdev-org/mviewerstudio that referenced this issue May 25, 2023

mviewer#160 harmonize modal footer btn

9d085de

Gaetanbrl added this to the MEGALIS - JDEV milestone Jun 16, 2023

Gaetanbrl added a commit to jdev-org/mviewerstudio that referenced this issue Jun 21, 2023

mviewer#160 harmonize modal footer btn

5f6296a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MEG - Intégration d’un « générateur / assistant » de templates #160

MEG - Intégration d’un « générateur / assistant » de templates #160

Gaetanbrl commented Feb 3, 2023 •

edited

Loading

spelhate commented Mar 27, 2023

Gaetanbrl commented Mar 27, 2023

spelhate commented Mar 27, 2023

Gaetanbrl commented Mar 27, 2023

spelhate commented Mar 27, 2023

lecault commented Mar 28, 2023 •

edited by Gaetanbrl

Loading

Gaetanbrl commented Mar 28, 2023 •

edited

Loading

spelhate commented Mar 31, 2023

Gaetanbrl commented Apr 4, 2023 •

edited

Loading

Agath21 commented Apr 11, 2023 •

edited by Gaetanbrl

Loading

Agath21 commented Apr 11, 2023 •

edited

Loading

Agath21 commented Apr 11, 2023

Gaetanbrl commented Apr 14, 2023 •

edited

Loading

Gaetanbrl commented Apr 14, 2023 •

edited

Loading

Gaetanbrl commented Apr 28, 2023 •

edited

Loading

lecault commented Apr 28, 2023

Gaetanbrl commented Apr 28, 2023

Gaetanbrl commented May 2, 2023

Agath21 commented May 4, 2023

MEG - Intégration d’un « générateur / assistant » de templates #160

MEG - Intégration d’un « générateur / assistant » de templates #160

Comments

Gaetanbrl commented Feb 3, 2023 • edited Loading

Histoire

Description complémentaire

spelhate commented Mar 27, 2023

Gaetanbrl commented Mar 27, 2023

spelhate commented Mar 27, 2023

Gaetanbrl commented Mar 27, 2023

spelhate commented Mar 27, 2023

lecault commented Mar 28, 2023 • edited by Gaetanbrl Loading

Gaetanbrl commented Mar 28, 2023 • edited Loading

spelhate commented Mar 31, 2023

Mise à jour Géob & Megalis

Gaetanbrl commented Apr 4, 2023 • edited Loading

Agath21 commented Apr 11, 2023 • edited by Gaetanbrl Loading

Proposition d'interface et parcours utilisateur

Scénario 1 | Basé sur des modèles

Scénario 2 | Structure libre

Avantages & inconvénients

Risques

Agath21 commented Apr 11, 2023 • edited Loading

Librairie des composants

Agath21 commented Apr 11, 2023

Cas d'usages

Template existant modifié en dehors du studio

Gaetanbrl commented Apr 14, 2023 • edited Loading

Gaetanbrl commented Apr 14, 2023 • edited Loading

Gaetanbrl commented Apr 28, 2023 • edited Loading

lecault commented Apr 28, 2023

Gaetanbrl commented Apr 28, 2023

Gaetanbrl commented May 2, 2023

Agath21 commented May 4, 2023

Interface du générateur pour le bottom-panel

Gaetanbrl commented Feb 3, 2023 •

edited

Loading

lecault commented Mar 28, 2023 •

edited by Gaetanbrl

Loading

Gaetanbrl commented Mar 28, 2023 •

edited

Loading

Gaetanbrl commented Apr 4, 2023 •

edited

Loading

Agath21 commented Apr 11, 2023 •

edited by Gaetanbrl

Loading

Agath21 commented Apr 11, 2023 •

edited

Loading

Gaetanbrl commented Apr 14, 2023 •

edited

Loading

Gaetanbrl commented Apr 14, 2023 •

edited

Loading

Gaetanbrl commented Apr 28, 2023 •

edited

Loading

Interface du générateur pour le `bottom-panel`