Widget Html Composer


Note : Ce type de widget n'est plus disponible depuis Product name - ev sas.png version Phosphore. Il continue néanmoins à fonctionner sur toutes les applications qui l'utilisent.

Apps - Widget - Html Composer icon.png Ce type de widget appartient à la catégorie Basic de la bibliothèque des widgets. Il permet de construire une page de l'application à partir de composants liés à des extraits de code Html (appelés snippets) et répertoriés dans une bibliothèque. La mise en page s'effectue via une zone d'édition, à partir de laquelle il est possible de personnaliser facilement chaque composant (changement d'une image, mise en forme d'un texte, ...).

Remarques

 Open url.png  voir Remarques générales sur les widgets

  • Les composants sont placés les uns sous les autres dans la zone d'édition et prennent automatiquement toute la largeur.
  • Les composants sont numérotés. Pour les retrouver facilement, affichez la bulle d'information en les survolant dans la bibliothèque.

Attention

  • Aucune confirmation n'est demandée lorsque vous supprimez un composant.

Best Practice big icon.png Bonnes pratiques

  • Pour afficher plusieurs éléments côte à côte, utilisez un composant divisé en plusieurs colonnes.

 

La zone d'édition

Description

La zone d'édition se décompose en 2 zones :

  • la bibliothèque des composants (1) :
    • les composants sont classés par thèmes accessibles via une liste déroulante (5) ;
    • la valeur All affiche tous les composants disponibles dans l'ensemble des thèmes ;
    • le nom du thème est affiché en le survolant avec la souris (6)* la liste des composants insérés sur la page (2) :
    • chaque composant dispose d'une barre d'outils (1) affichée en cliquant sur ce dernier, permettant de le déplacer Apps - Widget - Html Composer move icon.png, afficher son code Html Apps - Widget - Html Composer show html icon.png, le dupliquer Apps - Widget - Html Composer duplicate icon.png, le supprimer Apps - Widget - Html Composer delete icon.png ;
    • chaque composant peut être constitué de texte (1), d'images (2), de boutons d'action (3), d'icônes d'accès à différents éléments (4) (réseaux sociaux, Google, messagerie, ...) ;  des barres d'outils contextuelles à chaque type d'objet permettent de les personnaliser (2), (3), (4).

        Apps - Widget - Html Composer edition zone.png

Les différents types de composants

Texte

Sélectionnez le texte pour afficher la barre d'outils en haut de la zone d'édition (2).
         Apps - Widget - Html Composer text toolbar.png

  • Mise en forme du texte : Gras / Italique / Souligné / Barré
  • Choix d'une couleur
  • Tailles de police
  • Annuler la mise en forme
  • Styles (Heading, Paragraph, Blockquote)
  • Polices
  • Justification du texte
  • Puces et numérotation
  • Ajout / Suppression d'un lien - Note : Pour modifier le lien, cliquez sur le texte puis sur Apps - Widget - Html Composer edit link icon.png
  • Lien sur une page de l'application - Note : Pour modifier le lien, cliquez sur le texte puis sur Apps - Widget - Html Composer edit link icon.png
  • Lien sur une page de l'application sous forme de popup - Note : Pour modifier le lien, cliquez sur le texte puis sur Apps - Widget - Html Composer edit link icon.png
  • Data Picker (Note : Uniquement si vous avez sélectionné un datasource dans la section Data)

Image

Survolez l'image pour afficher la barre d'outils au centre du cadre de l'image (3).

Apps - Widget - Html Composer properties image icon.png : Permet de modifier les propriétés de l'image
         Apps - Widget - Html Composer properties image.png

  • Image URL : URL de l'image qui peut se trouver sur un serveur local ou sur internet. Note : Pour ne pas afficher l'image du composant, effacez l'adresse URL.
  • Alternate Text : Texte affiché lorsque l'image n'est pas trouvée.
  • Navigate URL : URL à ouvrir lorsqu'on clique sur l'image. Note : La nouvelle page est ouverte dans la même fenêtre.

Apps - Widget - Html Composer change image icon.png : Permet de sélectionner une autre image

Objets avec liens

Survolez un objet (icônes Messagerie / Réseaux sociaux, Boutons d'action, Carte (Map), Vidéo, ...) puis cliquez sur Apps - Widget - Html Composer edit link icon.png  (4).
         Apps - Widget - Html Composer edit link.png

  • URL : URL du lien à ouvrir lorsqu'on clique sur l'objet.
        Example documentation icon FR.png
    • Messagerie  :  mailto:you@example.com
    • site Twitter  :  https://twitter.com
  • Text (Note : Sauf pour les objets Carte, Vidéo) : Libellé du bouton d'action ou icône définie via l'instruction <i class="myIcon"></i>.
        Example documentation icon FR.png
    • icône Twitter Apps - Twitter icon.png  :  <i class="icon-twitter"></i>
    • icône Facebook Apps - Facebook icon.png  :  <i class="icon-facebook"></i>
  • Target (Note : Sauf pour les objets Carte, Vidéo) : Indique si le lien s'ouvre dans une nouvelle fenêtre du navigateur (case New window cochée) ou non (case non cochée).
     

Liste des propriétés

Content

Html : Cliquez sur Apps - Edit Html icon.png pour ouvrir la zone d'édition et accéder à la bibliothèque des composants.

Data

DataSource

DataSource : Source de données externes liée au widget. 

  • La liste déroulante affiche tous les datasources disponibles dans l'application. 
  • Pour modifier le datasource ou visualiser son contenu, cliquez sur Apps - Edit icon.png. Le bouton Apps - datasources Properties - Preview button.png sous la propriété Configure Field Types affiche le nombre de lignes (maximum 15) et de colonnes extraites.
  • Pour définir un nouveau datasource, cliquez sur Apps - Add datasource icon.png Add Data Source dans le volet Objets.
DataTransformer

Data Transformer : Permet de définir la structure et le périmètre du datasource, d'appliquer des fonctions d'agrégation statistiques et de modifier l'ordre d'affichage des mesures.

  • Cliquez sur Setup / Preview Data sous la propriété Data Transformer pour ouvrir la fenêtre dédiée -  Open url.png  voir Description
EnableDrilldown

Enable Drilldown (Note : Uniquement sur un datasource EasyVista utilisant une vue avec ruptures) : Indique si les données sont agrégées (case cochée - la fonctionnalité de drill-down est activée), ou non (case non cochée).
         Example documentation icon FR.png  Widget Breadcrumbs : Répartition des matériels par localisation

Best Practice icon.png

  • Ne cochez pas la case lorsque vous souhaitez que le widget présente le détail d'un niveau de rupture.
  • Ajoutez un widget Breadcrumbs pour aider à la navigation entre les différents niveaux de rupture.

Theme

 Open url.png  voir Description des propriétés

 

Procédure : Comment utiliser le widget Html Composer

1. Dans la zone Content, cliquez sur Apps - Edit Html icon.png pour ouvrir la zone d'édition. Les composants déjà existants sont automatiquement affichés.

2. Dans la bibliothèque des composants :

  • sélectionnez le thème de composants que vous souhaitez afficher via la liste déroulante (1)
  • cliquez-glissez le composant souhaité (2) vers l'un des emplacements disponibles, affichés en gris lorsque vous survolez la zone d'édition (3).
              Apps - Widget - Html Composer drag and drop.png

3. Effectuez la mise en page du nouveau composant :

  • Pour mettre en forme un texte, sélectionnez celui-ci et appliquez les changements souhaités via la barre d'outils Apps - Widget - Html Composer text toolbar.png affichée en haut de la zone d'édition.
  • Pour afficher la barre d'outils d'un composant, cliquez sur celui-ci. Vous pouvez ensuite :
    • déplacer le composant : cliquez-glissez l'icône Apps - Widget - Html Composer move icon.png vers l'un des emplacements disponibles (affichés en gris lorsque vous survolez la zone d'édition) ;
    • afficher le code Html d'un composant : cliquez sur Apps - Widget - Html Composer show html icon.png, effectuez les changements souhaités puis cliquez sur [ OK ].
               Apps - Widget - Html Composer show html.png
      • Pour abandonner les modifications, cliquez en dehors de l'éditeur Html.
      • Pour mettre en forme facilement un texte, utilisez plutôt la barre d'outils Texte.
    • dupliquer un composant : cliquez sur Apps - Widget - Html Composer duplicate icon.png : le nouveau composant est inséré juste en dessous.
    • supprimer un composant : cliquez sur Apps - Widget - Html Composer delete icon.png. Attention : Aucune confirmation n'est demandée.
  • Pour afficher la barre d'outils d'une image, survolez celle-ci. Vous pouvez ensuite :
    • remplacer l'image : cliquez sur Apps - Widget - Html Composer change image icon.png et sélectionnez celle souhaitée ;
    • modifier les propriétés de l'image affichée : cliquez sur Apps - Widget - Html Composer properties image icon.png.
  • Pour modifier un lien sur un objet, cliquez sur celui-ci puis sur Apps - Widget - Html Composer edit link icon.png.

3. De la même façon, positionnez tous les composants souhaités puis effectuez leur mise en page.

4. Sauvegardez vos modifications en cliquant sur [ OK ].

5. Passez en mode Exécution EVApps - GUI - Execute icon.png pour visualiser le widget tel qu'il apparaîtra à l'utilisateur.

Tags:
Modifié par Utilisateur inconnu le 2017/09/08 15:02
Créé par Administrator XWiki le 2015/04/15 17:01
Powered by XWiki ©, EasyVista 2019