Widget Html Script


Apps - Widget - Html icon.png  Ce type de widget appartient à la catégorie Basic de la bibliothèque des widgets. Il permet d'insérer du code Html dans l'application, afin d'afficher :

  • des pages Html et/ou des pages de l'application et/ou d'une autre application via des liens hypertextes ;
  • des informations (cadres, tableaux, images, …) mises en page par le biais de balises Html ;
  • des composants proposés par un site Internet, en recopiant le code Html associé : gadget, calendrier, application météo, diaporama, flux RSS, agendas Google... - Open url.png  voir Procédures et Exemples d'intégration ;
  • des scripts, rendant le contenu dynamique et interactif ;
  • des données publiques diffusées sur Internet, en utilisant des fonctions JavaScript retournant des objets JSON -  Open url.png  voir exemple Affichage d'un graphe à bulles 

Remarques

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

  • Le site accédé doit être sécurisé via une URL commençant par https://.
  • Encapsulez toujours le code Html fourni par le site Internet dans des balises <frame>.

Attention

  • Par leur côté interactif, les scripts peuvent être sources de malveillances intrusives et/ou destructives. Assurez vous que les sites que vous utilisez sont dignes de confiance.
  • Il se peut que des composants proposés par les sites Internet embarquent du code incompatible avec certains navigateurs et créent des problèmes d'affichage. Testez-les sur chaque plate-forme que vous déployez, en faisant notamment attention aux widget flash non compatibles avec les systèmes d'exploitation tablettes ou smartphones.

Best Practice big icon.pngBonnes pratiques

Liste des propriétés

Content

Html Code : Code Html de l'information ou du composant Internet à afficher. Saisissez directement le code dans la zone ou cliquez sur Apps - Edit Html icon.png pour ouvrir l'éditeur de texte

Best Practice icon.png  Pour éviter toute erreur lors de l'insertion d'un composant, faîtes un copier-coller du code Html disponible sur le site Internet qui le propose.

Theme

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

Fonctions JavaScript retournant des objets JSON

Ces fonctions permettent de lire des données publiques de widgets diffusés sur Internet, et de les récupérer au format JSON.

Syntaxe Valeur retournée

EVServicesApps.getWidgetById(‘string WIDGET_ID ‘);

  • Retourne null si rien trouvé.
  • Sinon, retourne un objet JSON contenant les informations relatives au widget.

{ guid : ‘WIDGET_ID’, name : ‘WIDGET_NAME’, fqdn : ‘WIDGET_FQDN’}

EVServicesApps.getWidgetsByName(‘string WIDGET_NAME’);

  • Retourne null si rien trouvé.
  • Sinon retourne un objet JSON contenant des objets JSON indexés sous la forme ci-dessous, avec les informations relatives aux widgets trouvés par leur nom dans le même format JSON que pour la première fonction.

    Object : {0 : Object, 1 : Object}

Si le widget est de type datasource, 2 autres fonctions s’ajoutent à l’objet JSON Widget obtenu.

Syntaxe Valeur retournée

EVServicesApps.getData(start, length, callback);

Retourne dans le paramètre callback toutes les données du widget (commençant par start et de taille length).

EVServicesApps.getColumns(callback);

Retourne dans le paramètre callback toutes les colonnes des données du widget (et les informations associées).

Procédures

Comment récupérer l'URL de lancement d'une application

1. Sur la galerie, cliquez sur Apps - Application properties icon.png en regard de l'application souhaitée.

2. Dans la barre d'outils de l'éditeur graphique, cliquez sur EVApps - GUI - Share icon.png.
                   EVApps - GUI - Share Apps.png

3. Copiez l'URL de lancement de l'application.

4. Revenez sur votre application et collez l'URL :

  • soit dans la propriété URL d'un lien hypertexte inséré sur une propriété Label, Header/Footer, Html Code d'un widget (via Apps - Text Editor - Hyperlink icon.png sur l'éditeur de texte) ;
  • soit dans la propriété URL to Load du widget Button ;
  • soit dans la propriété Data > Select Link Type du widget Menu.

Comment afficher un widget Date/Heure

1. Allez sur un site dédié diffusant des widgets Date/Heure et copiez le code Html affichant le widget souhaité.

2. Retournez sur votre application Product name - ev sas.png et collez le code dans la zone Html Code du widget Html Script.

3. Passez en mode Visualisation via EVApps - GUI - Execute icon.png pour tester le bon affichage du widget Calendrier.

  Example documentation icon FR.png

Affichage d'un widget Date/Heure provenant du site timeanddate.com

Attention : Le widget Html Script ne fonctionnant qu'avec des adresses URL sécurisées, sélectionnez l'option Secure Web Page (HTTPS / SSL Server).

Html Script - Clock Example.png

  Html Code  :

<iframe src="https://freesecure.timeanddate.com/clock/i57cb5xh/n195/szw110/szh110/hoc9b8578/hbw10/hfc754c29/cf100/hnc432f30/fav0/fiv0/mqcfff/mqs4/mql25/mqw12/mqd78/mhcfff/mhs2/mhl5/mhw2/mhd78/mmv0/hhcfff/hhs2/hhl50/hhw8/hmcfff/hms2/hml70/hmw8/hmr4/hscfff/hss3/hsl70/hsw3" frameborder="0" width="110" height="110"></iframe>

Comment afficher le contenu d’un flux RSS

  Notes :

  • Avant d'être intégré dans votre application Product name - ev sas.png, le flux RSS doit être formaté pour définir son apparence générale : Largeur et hauteur du widget, Choix de la taille et de la police d’affichage du texte du widget, Bordure, Défilement automatique, Choix de la couleur du titre / du fond, Choix d’une image de fond...
  • Pour faciliter cette opération, utilisez un site dédié disponible en ligne. La procédure ci-dessous décrit l'utilisation du site FeedWind, qui est gratuit.
           Html Script - FeedWind site.png

1. Recherchez l'adresse URL du flux RSS (fil d'actualité) que vous souhaitez intégrer.

2. Allez sur le site FeedWind pour formater l'affichage du flux RSS :

  • Dans la section Feed URL / Google Calendar ID, collez l'URL du flux RSS puis cliquez sur [ ADD FEED ].
  • Renseignez les autres sections pour définir la mise en forme du widget devant afficher le flux ; dans chaque section, cliquez sur Advanced Settings pour accéder aux fonctionnalités avancées : automatiquement, les modifications sont représentées dans la partie Preview.
  • Une fois la mise en page terminée, copiez le code Html affiché dans la zone Add this code to your webpage to display the widget.

3. Retournez sur votre application Product name - ev sas.png et collez le code Html dans la zone Html Code du widget Html Script.

4. Passez en mode Visualisation via EVApps - GUI - Execute icon.png pour tester le bon affichage du flux RSS.

         Example documentation icon FR.png  Affichage du flux RSS ABC News: Politics
         Html Script - ABCNews RSS Feed Example.png

         Html Code  :

<!-- start feedwind code -->
<script type="text/javascript">document.write('\x3Cscript type="text/javascript" src="' + ('https:' == document.location.protocol ? 'https://' : 'http://') + 'feed.mikle.com/js/rssmikle.js">\x3C/script>');</script>
<script type="text/javascript">(function() {var params = {rssmikle_url: "http://feeds.abcnews.com/abcnews/politicsheadlines",rssmikle_frame_width: "300",rssmikle_frame_height: "400",frame_height_by_article: "0",rssmikle_target: "_blank",rssmikle_font: "Arial, Helvetica, sans-serif",rssmikle_font_size: "12",rssmikle_border: "off",responsive: "off",rssmikle_css_url: "",text_align: "left",text_align2: "left",corner: "off",scrollbar: "on",autoscroll: "on",scrolldirection: "up",scrollstep: "3",mcspeed: "20",sort: "Off",rssmikle_title: "on",rssmikle_title_sentence: "",rssmikle_title_link: "",rssmikle_title_bgcolor: "#0066FF",rssmikle_title_color: "#FFFFFF",rssmikle_title_bgimage: "",rssmikle_item_bgcolor: "#FFFFFF",rssmikle_item_bgimage: "",rssmikle_item_title_length: "55",rssmikle_item_title_color: "#0066FF",rssmikle_item_border_bottom: "on",rssmikle_item_description: "on",item_link: "off",rssmikle_item_description_length: "150",rssmikle_item_description_color: "#666666",rssmikle_item_date: "gl1",rssmikle_timezone: "Etc/GMT",datetime_format: "%b %e, %Y %l:%M %p",item_description_style: "text+tn",item_thumbnail: "full",item_thumbnail_selection: "auto",article_num: "15",rssmikle_item_podcast: "off",keyword_inc: "",keyword_exc: ""};feedwind_show_widget_iframe(params);})();</script>
<div style="font-size:10px; text-align:center; width:300px;"><a href="http://feed.mikle.com/" target="_blank" style="color:#CCCCCC;">RSS Feed Widget</a><!--Please display the above link in your web page according to Terms of Service.--></div>
<!--  end  feedwind code -->

Exemples d'intégration

Outils de Live Chat Logo - Live Chat Tools.png 

Google Agenda Logo - Google Agenda.png 

Qlik Sense Logo - Qlik Sense.png 

Skype Logo - Skype.png 

Yammer Logo - Yammer.png 

Horloge 

         See Video icon.png  Comment intégrer une horloge

News CNN 

         See Video icon.png  Comment intégrer un flux de données CNN

Afficher un graphe à bulles 

         Example documentation icon FR.png  Extrait du site d3js.org, accessible via la page http://bl.ocks.org/mbostock/4063269
         Html Script - Integration example - Bubble chart.png

1. Récupérez les données au format JSON sur le site d3js.org : copiez le contenu et collez-le dans un fichier texte nommé flare.json.
         Html Script - Integration example - Bubble chart - json data.png

2. Ajoutez un datasource JSON :

  • renommez-le pour l'identifier facilement ;
             Example documentation icon FR.png  flare
  • dans la propriété Choose a File, téléchargez le fichier flare.json récupéré à l'étape 1.

3. Ajoutez un widget Html Script :

  • cliquez sur Apps - Edit Html icon.png en regard du champ Html Code ;
  • dans l'éditeur de texte, cliquez sur Apps - Text Editor - Html Editor icon.png pour passer en mode Source ;
  • collez le script disponible sur le site d3js.org.
Open url.png   voir Script
<style>
text {
 font: 10px sans-serif;
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>

<script>
var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20c();
var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);
var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.json("flare.json", function(error, root) {
 if (error) throw error;
 var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d) { return !d.children; }))
      .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  node.append("title")
      .text(function(d) { return d.className + ": " + format(d.value); });
  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return color(d.packageName); });
  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); });
});
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
 var classes = [];
 function recurse(name, node) {
   if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
   else classes.push({packageName: name, className: node.name, value: node.size});
  }
  recurse(null, root);
 return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
  • supprimez les lignes ci-dessous :
d3.json("flare.json", function(error, root) {
  if (error) throw error;
  • ajoutez en haut du script les lignes ci-dessous :
window.parent.EVServiceApps.getWidgetsByName('flare')[0].getData(0, -1,
    function(data)
    {
    root = data[0];

Notes :

  • window.parent permet d'accéder à la fonction.
  • Indiquez dans l'instruction getWidgetsByName le nom du datasource JSON créé à l'étape 2 (entre des caractères ' ').
             Example documentation icon FR.png getWidgetsByName('flare')
Open url.png   voir Script corrigé
<style>
text {
 font: 10px sans-serif;
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>

<script>
window.parent.EVServiceApps.getWidgetsByName('flare')[0].getData(0, -1,
 function (data) {
    root = data[0];

   var diameter = 960,
        format = d3.format(",d"),
        color = d3.scale.category20c();

   var bubble = d3.layout.pack()
        .sort(null)
        .size([diameter, diameter])
        .padding(1.5);

   var svg = d3.select("body").append("svg")
        .attr("width", diameter)
        .attr("height", diameter)
        .attr("class", "bubble");

     var node = svg.selectAll(".node")
          .data(bubble.nodes(classes(root))
          .filter(function(d) { return !d.children; }))
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

      node.append("title")
          .text(function(d) { return d.className + ": " + format(d.value); });

      node.append("circle")
          .attr("r", function(d) { return d.r; })
          .style("fill", function(d) { return color(d.packageName); });

      node.append("text")
          .attr("dy", ".3em")
          .style("text-anchor", "middle")
          .text(function(d) { return d.className.substring(0, d.r / 3); });

   // Returns a flattened hierarchy containing all leaf nodes under the root.
   function classes(root) {
     var classes = [];

     function recurse(name, node) {
       if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
       else classes.push({packageName: name, className: node.name, value: node.size});
      }

      recurse(null, root);
     return {children: classes};
    }
    d3.select(self.frameElement).style("height", diameter + "px");
  }
);    
</script>

4. Passez en mode Exécution EVApps - GUI - Execute icon.png pour afficher le diagramme à bulles.

Tags:
Modifié par Utilisateur inconnu le 2017/09/06 15:37
Créé par Administrator XWiki le 2014/11/12 22:10

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help

Glossaire

Powered by XWiki ©, EasyVista 2020