HTML

Le composant HTML permet d’ajouter des éléments codés en HTML dans les tableaux de bord.

Propriétés simples #

Nom / Infobulle / Visibilité #

Pour plus d'informations voir Propriétés simples

Edition Web : [nom du composant] #

Propriétés #

Editeur HTML #

Permet d'accéder à un éditeur HTML pour créer son composant avec du code HTML.

Avancées #

Rafraichissement auto #

Permet de rafraîchir automatiquement les données du composant lorsque celui-ci est lié à un autre composant source.

Code Javascript au chargement #

Permet de coder le code Javascript supplémentaire nécessaire au chargement du composant.

Code Javascript au redimensionnement #

Permet de coder le code Javascript supplémentaire nécessaire au redimensionnement du composant.

Propriétés communes #

Positionnement #

Suivre le lien : Positionnement

Apparence #

Suivre le lien : Apparence

Comportement #

Suivre le lien : Comportement

Modèle de tableau #

Suivre le lien : Modèle de tableau

Datasource #

Source de données #

Suivre  le lien : Source de données

Sans datasource #

Texte #

Libellé du lien hypertexte.

URL #

Adresse.

Avec datasource #

Configuration du composant HTML #

Propriétés du code HTML #

Il y a trois zones facultatives à renseigner :

Entête #

Contient l'entête (header) HTML du code

Valeur affichée #

Le champ du hub contenant le code HTML

Pied #

Contient le pied (footer) HTML du code

Propriétés du code Javascript #

Il y a trois zones facultatives à renseigner :

Entête Javascript #

Contient l'entête (header) Javascript du code

Javascript #

Le champ du hub contenant le code Javascript

Pied Javascript #

Contient le pied (footer) Javascript du code

Notes #

Si « Fusionner les lignes » est coché, tout les lignes remontées par le HUB seront concaténées pour composer le code HTML et/ou Javascript
Si « Fusionner les lignes » n’est pas coché, seule la première ligne remontée par le HUB sera utilisée pour composer le code HTML et/ou Javascript (compatibilité V15)
Si le code Javascript nécessite des inclusions de fichiers de ressources, il faut renseigner la propriété Entête du tableau de bord

Exemple simple #

Dans cet exemple, nous avons un HUB qui contient 3 champs :

id : identificateur unqiue
html : contient le code HTML
js : contient le code Javascript

Propriétés du composant HTML #

Valeur de référence: id

Fusionner les lignes : true Entete: <table>

Valeur affichée: html; contient les lignes suivantes du hub :

Pied:</table>

Entête Javascript : <div id= »viz1″ style= »height:300px;width:500px; »></div><script>

Valeur affichée : js contient les lignes suivantes du hub :

var sample = [

{« value »: 100, « name »: « alpha », « group »: « group 1 »},
{« value »: 70, « name »: « beta », « group »: « group 2 »},
{« value »: 40, « name »: « gamma », « group »: « group 2 »},
{« value »: 15, « name »: « delta », « group »: « group 2 »},
{« value »: 5, « name »: « epsilon », « group »: « group 1 »},
{« value »: 1, « name »: « zeta », « group »: « group 1 »}
]
var visua= d3plus.viz().container(« #viz1 »).data(sample).type(« tree_map »).id([« group », »name »]).size(« value »).draw()

Pied Javascript : </script>

Propriétés du tableau de bord #

Entête:

On obtient alors :

Exemple piloté par un autre composant #

Dans cet exemple, nous allons piloter le composant HTML par une liste radio. Après avoir posé la liste radio dans le tableau de bord, on lui attribue le même HUB que le composant HTML et on fait afficher l’ID dans la liste.

Il reste à lier la liste et le composant HTML sur le champ ID :

Selon le choix effectué dans la liste radio, le composant HTML va changer d’apparence. En choisissant l’ID 1, voici l’affichage obtenu :

Et si on choisit l’ID 3, le code Javascript va aussi être exécuté :

Exemple #

Code HTML de l’exemple en entête de page – Onglet HTML de l’Editeur Web : [nom du composant] / Propriétés / Editeur HTML / HTML

Exemple 01 : Mise en page d'une structure XHTML sans CSS

<h1>
  Exemple 01 : Mise en page d'une structure XHTML sans CSS
</h1>

<div id="entete">
  <img alt="Logo" src="\resources\images\logo_over.png"/>
  <h2>
    Exemple de site sans CSS
  </h2>
  <p>
    Un exemple de présentation avec et sans code CSS.
  </p>
</div>

<div id="corps">
  <div id="menu">
    <h3>
      Menu
    </h3>
    <ul>
      <li>
        <a href="#">
Lien 1
	  </a>
      </li>
      <li>
        <a href="#">
Lien 2
	  </a>
      </li>
      <li>
        <a href="#">
Lien 3
	  </a>
      </li>
    </ul>
  </div>

  <div id="contenu">
    <img alt="Logo CSS" src="\resources\images\Right.png"/>

    <h3>
      Contenu
    </h3>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat quam quis dui. Proin sit amet purus ac quam interdum placerat. Aliquam a tellus eget arcu placerat pellentesque. Maecenas sed ligula. Vestibulum ante ipsum primis in faucibus orci luctus
      et ultrices posuere cubilia Curae; Mauris tincidunt libero at turpis. Suspendisse consequat rhoncus sapien. Aenean quam ipsum, adipiscing ac, interdum ut, pharetra et, est. Integer id magna in erat consectetur posuere. Nam vehicula nulla id urna.
      Aenean neque lectus, scelerisque in, condimentum sit amet, congue eu, lectus. Ut mattis. Quisque bibendum tincidunt velit. Sed laoreet. Nunc eleifend.
    </p>
    <p>
      Sed sed felis. Mauris a dui. Ut metus. Suspendisse dictum nisl et dui. Sed metus elit, vehicula at, elementum quis, tincidunt ac, sem. Aenean eleifend, ipsum sed gravida porta, ante est tincidunt velit, sed commodo sapien quam ut arcu. Curabitur eu purus.
      Phasellus vulputate mi a felis. Suspendisse potenti. Sed at nisi et felis viverra adipiscing. Morbi ac nibh. Vestibulum in risus. Nullam auctor vehicula tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      In ut metus at magna sollicitudin molestie. Nunc nec diam sit amet lectus consectetur feugiat. Curabitur varius bibendum nisl. Sed viverra justo sed eros. In tempor dolor.
    </p>
    <p>
      Suspendisse potenti. Sed vitae elit sed ligula dignissim semper. Pellentesque ligula leo, mollis quis, consequat sit amet, fringilla at, justo. Ut eros erat, fringilla vel, lobortis vel, faucibus nec, lorem. In vel felis. Sed sagittis neque lobortis nunc.
      Donec rhoncus mollis purus. Sed ac ligula non quam dictum blandit. Praesent at dui id lectus lacinia laoreet. In justo mi, congue et, convallis vitae, consectetur vitae, eros. Proin mattis est eu erat. Fusce pretium condimentum lorem. Suspendisse
      potenti. Quisque luctus mollis sem. Donec sollicitudin aliquam mauris. Sed pharetra libero vitae est. Vestibulum sagittis, tellus id suscipit semper, ligula velit pretium odio, sed pharetra magna neque a ante.
    </p>
    <p>
      Duis rhoncus cursus tellus. Donec pharetra est vitae massa. Quisque neque neque, blandit ut, ultrices ut, pulvinar sit amet, ligula. Aliquam commodo. Donec dictum eros in magna. Suspendisse pulvinar dapibus risus. Sed eu nunc. Integer posuere urna ac
      arcu dapibus tincidunt. Aenean erat lorem, pulvinar sit amet, pretium sit amet, tristique in, velit. Etiam gravida, eros sollicitudin pellentesque eleifend, nunc mi commodo nisl, eget eleifend massa erat et mauris. Suspendisse potenti. Fusce tincidunt
      lobortis lectus. Phasellus molestie accumsan dolor. Duis massa ipsum, pretium nec, dignissim sed, porttitor pretium, purus.
    </p>
    <p>
      Cras arcu ante, sagittis quis, dapibus vel, varius eu, dui. Morbi gravida nisl sit amet dui. Mauris fringilla adipiscing justo. Maecenas luctus justo sed nunc. Cras nisi nisl, euismod nec, malesuada eu, viverra quis, nulla. Cras gravida vestibulum sem.
      Etiam aliquet, quam sed convallis semper, quam quam congue sem, eget tincidunt ipsum eros vitae massa. Nunc sem. Fusce mollis lorem sed nisl elementum sollicitudin. Etiam convallis nisi in urna. Morbi lorem felis, tincidunt sit amet, tempor et,
      sollicitudin vitae, sem. Aenean ante. Morbi fermentum venenatis dui. Curabitur tincidunt lobortis ipsum. Phasellus sed erat eu mi tempor porttitor. Suspendisse potenti. Nam mollis ante nec libero. Quisque vehicula, neque non vestibulum malesuada,
      enim dolor congue leo, sit amet laoreet tellus tortor a purus. Fusce eu nibh. Duis et urna non odio dignissim gravida.
    </p>
  </div>
</div>

<div id="pied">
  <p>
    Pied de page
  </p>
</div>

Updated on 28 février 2025