CustomWidgetHelper.js helper for custom widgets

Use the CustomWidgetHelper.js helper when developing new custom widgets, or migrating Business Space custom widgets to run on the dashboard.

The helper provides functions for retrieving endpoints. It also defines constants that you can use to refer to widget events, and supports the inclusion of absolute URLs to reference resources such as image files.

Include the helper in your widget definition:
define([
    "com/ibm/sr/ui/helpers/CustomWidgetHelper.js",
], function(CustomWidgetHelper)
Get an instance of the custom widget helper:
this.customWidgetHelper = CustomWidgetHelper.getInstance();
You can retrieve the following endpoints by using the supplied functions:
  • WSRR REST endpoint
  • WSRR ATOM endpoint
  • WSRR report viewer
  • WSRR BIRT report
  • Custom endpoint defined as WebSphere Application Server variable

The helper functions return the current endpoint, even if you have overridden the default endpoints as described in Configuring REST endpoints.

Call the following functions to retrieve the standard endpoints:
  • getWsrrRestEndpoint returns the WSRR REST endpoint, for example:
    this.restEndpoint = this.customWidgetHelper.getWsrrRestEndpoint();  
  • getWsrrAtomEndpoint returns the WSRR Atom endpoint, for example:
    this.atomEndpoint = this.customWidgetHelper.getWsrrAtomEndpoint();  
  • getWsrrReportViewerEndpoint returns the WSRR report viewer endpoint, for example:
    this.reportEndpoint = this.customWidgetHelper.getWsrrReportViewerEndpoint();  
  • getWsrrBIRTReportEndpoint returns the WSRR BIRT report endpoint, for example:
    this.birtReportEndpoint = this.customWidgetHelper.getWsrrBIRTReportEndpoint();  
  • getCustomEndpoint returns a custom endpoint as a Dojo Deferred object. For more information on Deferred objects, follow the related link. The custom endpoint must be defined as a WebSphere Application Server variable with the name WSRR_ENDPOINT_endpointname. The returned value resolves when the endpoint value is loaded.
    var def = this.customWidgetHelper.getCustomEndpoint("endpointname");
    
    def.then(function(value){ 
    // use value as the endpoint},
    function(error){ 
    // handle the error message
    });
You can use the following constants to refer to widget events:
  • ITEM_UPDATED com.ibm.sr.ui.iwidgets.events.itemUpdated
  • ITEM_DELETED com.ibm.sr.ui.iwidgets.events.itemDeleted
  • ITEM_SELECTED com.ibm.sr.ui.iwidgets.events.itemSelected
  • MULTIPLE_ITEMS_SELECTED com.ibm.sr.ui.iwidgets.events.multipleItemsSelected
  • ITEM_CREATED com.ibm.sr.ui.iwidgets.events.itemCreated
  • VIEW_GRAPH com.ibm.sr.ui.iwidgets.events.viewGraph
  • VIEW_CONSUMER_PROVIDER_GRAPH com.ibm.sr.ui.iwidgets.events.viewConsumerProviderGraph
  • MULTIPLE_ITEMS_CREATED com.ibm.sr.ui.iwidgets.events.multipleItemsCreated
  • PAGE_NAVIGATION com.ibm.sr.ui.iwidgets.events.pageNavigation

For example, the following code outputs the string com.ibm.sr.ui.iwidgets.events.itemUpdated to the console.

var itemUpdatedEventId = this.customWidgetHelper.events.ITEM_UPDATED;
console.log(itemUpdatedEventId);
You can reference an absolute URL by using the following function:
var myResourceUrl = this.customWidgetHelper.getResourceUrl(iContext, relativeUri);
Where iContext is the iContext class, and relativeUri is the URI for the required resource. The URI must be relative to the location of the iWidget XML file in the custom widget .zip file.

The following example references the file myImageFile.png in a directory named images. The directory is in the same location as the iWidget XML file.

var myWidgetImage = document.createElement("img");
var myWidgetImageUrl = this.customWidgetHelper.getResourceUrl(this.iContext,"./images/myImageFile.png");
myWidgetImage.setAttribute("src", myWidgetImageUrl);