PubChem Widgets

What are Widgets?back to top

PubChem Widgets are tools that provide a rapid way to display some commonly requested PubChem data views, such as tabular summaries of:

There are several different ways you can use widgets: A subsequent section of this document describes the types of widgets available, and provides examples of widgets that display bioactivity outcomes, patents, and literature (PubMed). (A separate document describes an autocomplete widget, which differs from those described here in the ways noted at the end of this document.)

How to use the widgets: back to top

insert widget directly in your own HTML page  |  open as a modal pop-up window  |  link to PubChem page that displays desired widget  |  embed widget as an iframe

Insert a PubChem Widget directly in your own HTML page by following 3 easy steps: back to top

  1. Include the PubChem javascript libaries and cascading style sheets in the <head> of your html page:
    2.       <script type='text/javascript'>Ext = {buildSettings:{"scopeResetCSS":true }};</script>
      <script type='text/javascript' src='//pubchem.ncbi.nlm.nih.gov/widget/extjs-4.1.1/ext-all.js'></script>
      <script type='text/javascript' src='//pubchem.ncbi.nlm.nih.gov/widget/1.0.1b/pubchem.widgets.js'></script>
      <link rel="stylesheet" type="text/css" href="//pubchem.ncbi.nlm.nih.gov/widget/extjs-4.1.1/resources/css/ext-all-gray-scoped.css">
  2. Initialize the widget, setting desired parameters such as the height, width and title of the widget:
    3.       <script type='text/javascript'>
        Ext.onReady(function() {
          var grid = PubChem.widget.CreateGridTable({
            gridtabletype: 'patent',
            cid: 2244,
            renderTo: 'mydiv',
            width: 500,
            height: 300,
            title: 'CID=2244 patent Grid Table',
            helpurl: 'http://pubchem.ncbi.nlm.nih.gov/widget/docs/widget_help.html'
          });
        });
      </script>
    Additional parameters that are specific to each widget are discussed below. Note that we are initializing the widget when the page is ready to be rendered by using the Ext JS function onReady(). If you are using another javascript library, you may use that library's equivalent function.

     

    Alternatively, if you wish to display the widget in a modal popup window, use the function PubChem.widget.CreateGridModalWindow instead of PubChem.widget.CreateGridTable. Modal examples for the various types of widgets are provided below (e.g., modal bioactivity widget, modal patent widget, modal PubMed widget).

     

    For widgets that display data as a table ("table-based widgets"), you can use an optional  filter:true  parameter to display graphical filters, which enable you to subset the data. Currently, the graphical filters appear only in the bioactivity widget. For example: 
          <script type='text/javascript'>
        Ext.onReady(function() {
          var grid = PubChem.widget.CreateGridTable({
            gridtabletype: 'pcassay',
            cid: 2244,
            renderTo: 'mydiv',
            filter:true,
            width: 500,
            height: 300,
            title: 'CID=2244 BioActivity Grid Table',
            helpurl: 'http://pubchem.ncbi.nlm.nih.gov/widget/docs/widget_help.html'
          });
        });
      </script>
    (Note: If you include the  filter:true  parameter in table-based widgets other than the bioactivity widget, the parameter will be ignored at this time and the widget will simply appear in its default format.)

     

  3. Position the widget with an html div that has a unique id:
    4.       <div id="mydiv"></div>
    The widget will be rendered inside of the div. Note that the id of the div must be specified by the renderTo argument in step #2.

Use the share button Share button that appears in upper right corner of a table-based widget back to top


Widgets are used in PubChem Compound and Substance summary pages. For example, they are used to display information about a small molecule's bioactivity, patents, and literature (PubMed). Anytime you see a widget that displays data as a table, you can use the share button  Share button that appears in upper right corner of a table-based widget  to either link to that widget in its own PubChem web page, or to embed the widget in your page as an iframe.

The share button  Share button that appears in upper right corner of a table-based widget  appears in the upper right corner of every table-based widget. It also appears as a more prominent link  Share button that appears in lower right corner of a table-based widget  in the lower right corner of the table, where you will see the icon beside the word "share." (The share option does not appear in other types of widgets, such as autocomplete, which do not display data as a table.)

Click on the share button Share button that appears in upper right corner of a table-based widget to open a "Bookmark or share" pop-up box, which provides two pieces of information:
  1. Link (URL) that can be used to open a PubChem page that displays the widget. back to top

    For example, the following URL will open a PubChem page displaying the widget that lists the patents associated with PubChem CID 2244 (aspirin):

    http://pubchem.ncbi.nlm.nih.gov/widget/widget.cgi?id=2244&idtype=cid&gridtabletype=patent


  2. HTML code that can be used to embed the widget in your page as an iframe. back to top

    For example, the following HTML code will embed an iframe diplaying the widget that lists the patents associated with PubChem CID 2244 (aspirin):

    <iframe src="http://pubchem.ncbi.nlm.nih.gov/widget/widget.cgi?id=2244&idtype=cid&gridtabletype=patent" frameBorder="0" style="width: 90%; height: 400px" ></iframe>

    The resulting iframe will look like the following (click on the share button  Share button that appears in upper right corner of a table-based widget  to try it out!):

Types of widgetsback to top

The following types widgets are currently available: the BioActivity concise summary, the Patent widget, and the PubMed widget. Each can display data several types of NCBI records as detailed below. All widgets share similar functionality: columns in the widget can be sorted by clicking on the column headers, data is paginated, and data can be downloaded in Excel compatible csv form by clicking on the icon of a disk in the upper right of the widget. (A separate document describes an autocomplete widget, which differs from those described here in the ways noted at the end of this document.)

BioActivity Concise Summary Widgetback to top

This widget contains information about BioAssay outcomes. It is selected by setting the gridtabletype parameter in step #2 to 'pcassay'.

The following example shows BioAssay outcomes for aspirin (CID 2244):
In this example, the cid parameter from step #2 is used to select the record type (cid) and record (2244) used to retrieve the data.

For the bioactivity widget, the following record types are supported as parameters in step #2:

 

A modal example:

Open the bioactivity widget as a modal popup window by using the function PubChem.widget.CreateGridModalWindow instead of PubChem.widget.CreateGridTable in step #2.

 

Patent Widgetback to top

This widget contains information about patents. It is selected by setting the gridtabletype parameter in step #2 to 'patent'. The following example shows patents for aspirin (CID 2244):
In this example, the cid parameter from step #2 is used to select the record type (cid) and record (2244) used to retrieve the data.

For the patent widget, the following record types are supported as parameters in step #2:

 

A modal example:

Open the patent widget as a modal popup window by using the function PubChem.widget.CreateGridModalWindow instead of PubChem.widget.CreateGridTable in step #2.

 

PubMed Widgetback to top

This widget contains information about PubMed articles. It is selected by setting the gridtabletype parameter in step #2 to 'pubmed'.

The following example shows pubmed articles for aspirin (CID 2244):
In this example, the cid parameter from step #2 is used to select the record type (cid) and record (2244) used to retrieve the data.

For the PubMed widget, the following record types are supported as parameters in step #2:

 

A modal example:

Open the PubMed widget as a modal popup window by using the function PubChem.widget.CreateGridModalWindow instead of PubChem.widget.CreateGridTable in step #2.

 

Autocomplete Widgetback to top

An Autocomplete widget is also available. It is a tool that suggests a list of terms when you type input into a search field. It is documented in a separate Autocomplete Widget Help file because it can be implemented with either ExtJS or with jQuery, whereas the widgets documented above are implemented only with ExtJS. The Autocomplete Widget therefore uses a slightly different set of steps and options from those noted above. In addition, the Autocomplete widget can only be embedded into your web page; there is no option to open it as a layer on top of your web page.

 

Log of Changes to Widgetsback to top

10 DEC 2012 A new share button  Share button that appears in upper right corner of a table-based widget  now appears in widgets that display data as a table. It displays code that you can use to either link to that widget in its own PubChem web page, or to embed the widget in your page as an iframe.

As a result, there are now four ways you can use widgets:
  1. insert a widget directly in your page
  2. open a widget from your web page as a modal pop-up window
  3. link to a PubChem web page that displays the widget
  4. embed the widget in your page as an iframe
In addition, a new parameter is now available to display graphical filters, which enable you to subset the data. Currently, those filters appear only in the bioactivity widget.
08 NOV 2012 An Autocomplete Widget is now available. A brief description is above, and a separate Autocomplete Widget Help file provides details about its scope and use.
25 OCT 2012 Modal option added, which allows you to open widget on top of your web page (as a modal popup window) by using the function PubChem.widget.CreateGridModalWindow instead of PubChem.widget.CreateGridTable in step 2). This provides an alternative to opening a widget within your web page. See examples of: bioactivity modal widget, patent modal widget, PubMed modal widget.
01 OCT 2012 Initial release of PubChem Widgets

Revised 10 December 2012