Widget Html Composer


Note : Ce type de widget n'est plus disponible depuis Service Apps 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.

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.

    exemple  

    • 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>.

    exemple  

    • 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).

exemple   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.

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

5. Sauvegardez vos modifications en cliquant sur OK.

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

Tags :
Powered by XWiki © EasyVista 2022