Html Script Widget
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. -
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 -
see example Display a bubble chart
Notes
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
- Use the HTML Script widget when you want to use scripts. If this is not possible, then you should use the Secured HTML widget.
- To display data from an external data source, you should use the Secured HTML widget.
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 to open the text editor.
Theme
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 ‘); |
|
{ guid : ‘WIDGET_ID’, name : ‘WIDGET_NAME’, fqdn : ‘WIDGET_FQDN’} EVServicesApps.getWidgetsByName(‘string WIDGET_NAME’); |
|
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 next to the app you want to run.
2. In the graphic editor, click in the toolbar.
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
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 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
HTML Code:
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.
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 to switch to preview mode and check that the RSS feed is correctly displayed.
example Display ABC News: Politics
HTML 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
- Live Chat Tools
- Google Calendar
- Display a bubble chart
example Extract from the d3js.org website, accessible by clicking http://bl.ocks.org/mbostock/4063269
1. Retrieve the data in JSON format from the d3js.org website. Copy and paste the content in a text file named flare.json.
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
next to the Html Code field.
- In the text editor, click
to switch to source mode.
- Paste the script available on d3js.org.
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.
if (error) throw error;
- Add the lines below to the top of the script.
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')
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 to display the bubble chart.