Html Script Widget

Last modified on 2023/07/03 17:27
Contents

Apps - Widget - Html icon.png  This type of widget belongs to the Basic category in the widget library. It enables you to insert HTML code in the app in order to display:

  • HTML pages, a page from the app or from another app using links.
  • Information on formatting via HTML tags, e.g. frames, tables, images, etc.
  • Components proposed by a website by copying the associated HTML code, e.g. gadgets, calendars, weather apps, slideshows, RSS feed, Google Calendars, etc.  - Open url.png  see Procedures and Integration examples 
  • Scripts that enable dynamic and interactive content.
  • Public data accessible on the Internet, by using JavaScript functions that return JSON objects -  Open url.png  see example Display a bubble chart 

Notes

     Open url.png  See General remarks on widgets

  • Access to the website must be secured using a URL that starts with https://.
  • You should always encapsulate the HTML code provided by the website within tags <frame>.

Caution

  • Because of their interactive nature, scripts can be misappropriated to introduce hacking attempts and/or malicious software. You must ensure that the websites you use can be trusted.
  • Certain components provided by websites may contain code that is incompatible with some Web browsers. This may lead to display problems. You should test them on each platform before deployment. You should pay special attention to flash widgets that are incompatible with the operating systems of tablets or smartphones.

Best Practice

List of properties

Content

HTML Code: HTML code of the Web information or component to be displayed. Enter the code directly in the field or click Apps - Edit Html icon.png to open the text editor. 

Best Practice icon.png  To avoid errors when inserting a component, you should copy and paste the HTML code available on the website.

Theme

    Open url.png See the description of properties 

JavaScript functions that return JSON objects

These functions allow to read public data on widgets accessible on the Internet and to retrieve the data in JSON format.

Syntaxe Returned value

EVServicesApps.getWidgetById(‘string WIDGET_ID ‘);
  • This returns null if there are no results.
  • Otherwise, it returns a JSON object containing information on the widget.

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

EVServicesApps.getWidgetsByName(‘string WIDGET_NAME’);
  • This returns null if there are no results.
  • Otherwise, it returns a JSON object containing JSON objects indexed as shown below. You can see information on widgets found by name in the same JSON format as for the first function.

    Object : {0 : Object, 1 : Object}

For data source widgets, two other functions can be used in the JSON widget object found.

Syntaxe Returned value

EVServicesApps.getData(start, length, callback);

 This returns all widget data (starting with start, whose size corresponds to length) in the callback function parameter.

EVServicesApps.getColumns(callback);

 This returns all columns with widget data (including relevant information) in the callback function parameter.

Procedures

How to retrieve the launch URL of an app

1. In the App Gallery, click Apps - Application properties icon.png next to the app you want to run.

2. In the graphic editor, click EVApps - GUI - Share icon.png in the toolbar.

            EVApps - GUI - Share Apps.png

3. Copy the app launch URL.

4. Return on your app and paste the URL:

  • either in the URL property of a hyperlink inserted on a Label, Header/Footer or HTML Code properties of a widget (via Apps - Text Editor - Hyperlink icon.png in the text editor);
  • or in the URL to Load property of the Button widget ;
  • or in the Data > Select Link Type property of the Menu widget.

How to display a Date/Time widget

1. Go to the dedicated website providing Date/Time widgets and copy the HTML code of the widget you want.

2. Open your Service Apps app and paste the code in the HTML Code field of the HTML Script widget.

3. Click EVApps - GUI - Execute icon.png to switch to preview mode and check that the Calendar widget is correctly displayed.

example  Display a Date/Time widget from the website, timeanddate.com

   Caution: The HTML Script widget only works with secure URLs. You should therefore select the Secure Web Page (HTTPS/SSL Server) option.
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>

How to display an RSS feed

     Notes:

  • Prior to embedding the feed within your Service Apps app, you must define the formatting of the RSS feed, e.g. width and height of the widget, widget text size and font, borders, auto advance, title color, background color, background image, etc.
  • To simplify this operation, you can use a dedicated website. The procedure below describes how you can use the FeedWind website which is free of charge.
             Html Script - FeedWind site.png

1. Find the URL of the RSS feed (news feed) that you want to embed.

2. Go to the FeedWind website to format the display of the RSS feed.

  • In Feed URL/Google Calendar ID, paste the URL of the RSS feed and click [ ADD FEED ].
  • Specify the fields in the other sections to define the formatting of the widget that will display the feed. In each section, click Advanced Settings to access advanced functionalities. Any modification made will automatically be reflected in the Preview pane.
  • Once you have finished the formatting, copy the HTML code displayed in the field called Add this code to your webpage to display the widget.

3. Open your Service Apps app and paste the HTML code in the HTML Code field of the HTML Script widget.

4. Click EVApps - GUI - Execute icon.png to switch to preview mode and check that the RSS feed is correctly displayed.

example  Display 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 -->

Integration examples

  • Display a bubble chart

example  Extract from the d3js.org website, accessible by clicking http://bl.ocks.org/mbostock/4063269
         Html Script - Integration example - Bubble chart.png

1. Retrieve the data in JSON format from the d3js.org website. Copy and paste the content in a text file named flare.json.
         Html Script - Integration example - Bubble chart - json data.png

2. Add a JSON data source :

  • Rename the data source to identify it easily.

example   flare

  • Download the file flare.json retrieved at the step 1 in the Choose a File property.

3. Add a Html Script widget :

  • Click Apps - Edit Html icon.png next to the Html Code field.
  • In the text editor, click Apps - Text Editor - Html Editor icon.png to switch to source mode.
  • Paste the script available on d3js.org.

<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>
  • Delete the lines below.
d3.json("flare.json", function(error, root) {
  if (error) throw error;
  • Add the lines below to the top of the script.
window.parent.EVServiceApps.getWidgetsByName('flare')[0].getData(0, -1,
    function(data)
    {
    root = data[0];

Notes:

  • window.parent enables you to access the function.
  • Indicate the name of the JSON data source created at the step 2 in the instruction getWidgetsByName (between ' ' characters).

example  getWidgetsByName('flare')

<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. Switch to execute mode EVApps - GUI - Execute icon.png to display the bubble chart.

Tags:
Powered by XWiki © EasyVista 2022