This topic contains the following sections.

How To Embed Widgets Development Guide

In Focus widget

The In Focus widget displays entities related to a search. The entities are grouped into types which can be selected depending on your interests or needs. Below is and example showing Persons, Cities, Keyphrases, Companies and Organizations related to the search "Barack Obama".

Example showing how to include a In Focus widget on a html page.

CopyXML
<html xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">
  <head>
    <script type="text/javascript" src="http://api.silobreaker.com/Widget/Silobreaker-1.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
          Silobreaker.apiKey = "replaceWithYourApiKey";
        var widget = new Silobreaker.InFocus({query: "Barack Obama [Person]"});
        Silobreaker.injectWidget("myDiv", widget);
      });
  </script>
  </head>
  <body>
    <div style="width:350px;" id="myDiv">
    </div>
  </body>
</html>

The html snippet starts with a script inclusion of the Silobreaker library which contains all required functionality to create Widgets.

Next is a few lines of javascipt code which sets the Api key (replace with your own key) and then creates the In Focus widget and injects it into an element on the page. When creating the widget you can use a couple of parameters to customize it's layout. Parameters are specified as a JSon object string on the following format: { parameter1: value1, parameter2: value2, parameter3: value3 }.

The In Focus widget supports the following parameters:

  • query - Search string to use. Can be changed at any time by setting widget.query to any desired search string.
  • count - Number of entities to show for each type. Default is 10. Can be changed at any time by setting widget.count to any desired value.
  • moreCount - Number of entities to show when clicking the "more" button. Default is 20. Can be changed at any time by setting widget.moreCount to any desired value.
  • showPoups - If popups should be shown when hovering an entity. Default is true.
  • types - What entity types to show in the widget. Default is Person, Company, Organization, City and Keyphrase. Specify custom types in the following format: ["Person", "Company", "Organization"].

For more advanced users these fields in the widget object might be of interest:

  • searchCompleteCallback - A function which will be called when search is complete and the html has been populated with the result.
  • dataSource - The data source the widget should use to retrieve data for a query. Can be replaced with a custom made data source.

Top Story Widget

The Top Story widget displays the newest and most reported stories related to a search. Each story is displayed with a headline, a short summary and a list of related entities. The widget below shows the top stories for "Barack Obama" at a certain time.

Example showing how to include a Top Story widget on a html page.

CopyXML
<html xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">
  <head>
    <script type="text/javascript" src="http://api.silobreaker.com/Widget/Silobreaker-1.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
          Silobreaker.apiKey = "replaceWithYourApiKey";
        var widget = new Silobreaker.TopStory({query: "Barack Obama [Person]"});
        Silobreaker.injectWidget("myDiv", widget);
      });
  </script>
  </head>
  <body>
    <div style="width:350px;" id="myDiv">
    </div>
  </body>
</html>

As always the Silobreaker library is included containing functionality for Widgets. Then the Api key is set (replace it with your key) and finally the TopStory widget is created.

The Top Story widget supports the following parameters:

  • query - The query to use in the initial search. Can be changed at any time by setting widget.query to any desired search phrase.
  • count - Number of stories to be include in the search result. Can be changed at any time by setting widget.count.
  • showPoups - If popups should be shown when hovering a node. Default is true.

For more advanced users these fields might be of interest:

  • searchCompleteCallback - A function which will be called when search is complete and the html has been populated with the result.
  • dataSource - The data source the widget should use to retrieve data for a query. Can be replaced with a custom made data source.

Tab Documents Widget

The Tab Documents-widget shows a list of documents related to a search, the list is separated in tabs where each tab shows a different view of the search result. The widget can be configured to show for instance documents of a certain type in a separate tab (Articles in one tab, Blog entries in another). Other configurations are also possible, for instances: When searching for Barack Obama one tab can show results related to Hillary Clinton and Barack Obama and one tab can show results from Barack Obama + Afghanistan. The widget below shows the search result for Blogs related to "Political Meetings" at a certain time. Other tabs are also visible.

CopyXML
<html xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">
  <head>
    <script type="text/javascript" src="http://api.silobreaker.com/Widget/Silobreaker-1.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
      Silobreaker.apiKey = "replaceWithYourApiKey";

      var widget = new Silobreaker.TabDocuments({ query: "Barack Obama [Person]", count: 10, tabs: [{ title: "Articles", types: ["Article"] },
      { title: "Blogs", types: ["Blog"], selected: true },
      { title: "Hillary Clinton", query: "Hillary Clinton [Person]", cssClass: "green"}]});
      Silobreaker.injectWidget("myDiv", myWidget);
      });
    </script>
  </head>
  <body>
    <div style="width:350px;" id="myDiv">
    </div>
  </body>
</html>

As always the Silobreaker library is included containing functionality for Widgets. Then the Api key is set (replace it with your key) and finally the TabDocuments widget is created.

The Tab Documents widget supports the following parameters

  • query - The query to use in the initial search. Can be changed at any time by setting widget.query to any desired search phrase.
  • count - Number of stories to be include in the search result. Can be changed at any time by setting widget.count.
  • tabs - This is an array of parameter sets, one set for each tab as shown in the example above.
    • title - The title of this tab.
    • query - This is an optional search query which will be appended to the base search query. For instance "Hillary Clinton [Person]".
    • types - This is an optional array of document types used to filter the search for this tab.
    • cssClass - An optional css-class to use for the contents of the tab.
    • selected - Set to true if the the current tab should be selected as default.

Advanced:

  • searchCompleteCallback - A function which will be called when search is complete and the html has been populated with the result.
  • dataSource - The data source the widget should use to retrieve data for a query. Can be replaced with a custom made data source.

Network widget

The Network widget displays entities related to each other in a network graph. Note that this widget requires flash to be installed on the client computer. Below is and example showing a network for United Kingdom.

Example showing how to include the Network widget on a html page.

CopyXML
<html xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">
  <head>
    <script type="text/javascript" src="http://api.silobreaker.com/Widget/Silobreaker-1.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      Silobreaker.apiKey = "replaceWithYourApiKey";
      var widget = new Silobreaker.Network({ query: "United Kingdom [Country]", totalNodes: 10, width: 350, height: 200, showSliders: false, showTrashcan: false, showZoom: false });
      Silobreaker.injectWidget("myDiv", widget);
    });
  </script>
  </head>
  <body>
    <div id="myDiv">
    </div>
  </body>
</html>

As always the Silobreaker library is included containing functionality for Widgets. Then the Api key is set (replace it with your key) and finally the Network is created.

The Network widget supports the following parameters:

  • query - The query to use in the initial search. Can be changed at any time by setting widget.query to any desired search phrase.
  • totalNodes - Number of nodes to include in the network. Can be changed at any time by setting widget.totalNodes.
  • width - The desired width (in pixels) of the network. Default is 900 pixels. Note that sliders requires at least 890 in width. Having a smaller network should possibly disable sliders.
  • height - The desired height (in pixels) of the network. Default is 600 pixels.
  • showSliders - True or false if sliders (for each entity type count) should be visible in the network. Required at least 890 pixels in widht to render correctly. Default is true.
  • showTrashcan - True or false if trashcan should be visible in the network. Default is true.
  • showZoom - True or false if zoom slider should be visible in the network. Default is true.
  • expandEntities - An array of entity ids specifying entities that should be included and expanded in the network. Can be changed at any time by setting widget.expandEntities.
  • includeEntities - An array of entity ids specifying entities that should be included in the network. No other entities will be shown except those in the array. Can be changed at any time by setting widget.includeEntities.
  • showPoups - If popups should be shown when hovering a node. Default is true.

The Network can be regenerated with other parameters such as the query, expandEntities or the includeEntities. Simply set the parameters to some new values and execute the function widget.search().

For more advanced users these fields might be of interest:

  • searchCompleteCallback - A function which will be called when search is complete and the html has been populated with the result.
  • dataSource - The data source the widget should use to retrieve data for a query. Can be replaced with a custom made data source.
  • dataSource

Click Handlers

The default behavor when clicking an entity or a document in widgets is to be redirected to the silobreaker.com website. This behavior can be customized by providing a custom Click Handler. A Click Handler is a javascript object that has a callback that is called when a user clicks an entity or document. Note that this is restricted functionality. Please contact Silobreaker support for more information on how to enable this feature in you widgets.

The following example shows how to declare a callback function for an In Focus Widget.

CopyXML
<html xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">
  <head>
    <script type="text/javascript" src="http://api.silobreaker.com/Widget/Silobreaker-1.js"></script>
    <script type="text/javascript" src="http://api.silobreaker.com/Widget/ClickHandler.js?apiKey=replaceWithYourApiKey"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        Silobreaker.apiKey = "replaceWithYourApiKey";
        var widget = new Silobreaker.InFocus({ query: "United Nations [Country]" });
        widget.clickHandler = new Silobreaker.ClickHandler(myClickFunction);
        Silobreaker.injectWidget("myDiv", widget);
      });

      function myClickFunction(entity) {
        alert('You clicked: ' + entity.Description);
      }

    </script>
  </head>
  <body>
    <div id="myDiv">
    </div>
  </body>
</html>

Note that you must provide your Api key in the script include element for the ClickHandler functionality to be resolved.

It is also possible to declare a global click handler which will be applied for all Widgets on the page. The example below shows how to declare such a Click Handler. Whenever an entity is clicked on the page the custom click handler function will be called.

CopyXML
<html xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">
  <head>
    <script type="text/javascript" src="http://api.silobreaker.com/Widget/Silobreaker-1.js"></script>
    <script type="text/javascript" src="http://api.silobreaker.com/Widget/ClickHandler.js?apiKey=replaceWithYourApiKey"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        Silobreaker.apiKey = "replaceWithYourApiKey";
        Silobreaker.clickHandler = new Silobreaker.ClickHandler(myClickFunction);

        var widget1 = new Silobreaker.InFocus({ query: "United Nations [Organization]" });
        Silobreaker.injectWidget("myDiv1", widget1);

        var widget2 = new Silobreaker.InFocus({ query: "United States [Country]" });
        Silobreaker.injectWidget("myDiv2", widget2);

        var widget3 = new Silobreaker.InFocus({ query: "Microsoft Corporation [Company]" });
        Silobreaker.injectWidget("myDiv3", widget3);
      });

      function myClickFunction(entity) {
        alert('You clicked: ' + entity.Description);
      }

    </script>
  </head>
  <body>
    <div id="myDiv1">
    </div>
    <div id="myDiv2">
    </div>
    <div id="myDiv3">
    </div>
  </body>
</html>