Widgets

Extensibility
Extensibility covers the mechanisms by which you, as the user or developer, can extend the functionality of the Teradata Database, for example with the use of User Defined Functions, or UDFs.
Teradata Employee

Widgets

Teradata Javascript Widgets provide the advanced GUI features that application developers want in data presentation without burdening the developer with the need to write a lot of tedious javascript code and CSS.

Most widgets are located on the source page by creating a DIV element having the desired size in the desired location. In most cases, this id is passed in as a parameter to the widget, which then populates the containing element with the necessary HTML for the widget. Most widgets require height and width parameters to be passed in as well because the portlet may be opened in minimized mode, preventing these values from being read from the HTML elements on the page.

Widgets typically can invoke callback functions for processing of data from the server. Custom callback functions are also used to process user input, so some Javascript knowledge will be needed for writing for these handler functions.

Widget source code files are found in /CommonsWeb/js. The required CSS file for the widgets is /CommonsWeb/css/global.css.

Data Presentation Widgets

TjsChart

This widget uses vector graphic capabilities built into the browsers to render charts from data sets.

XY chart types include: point, line, area, step, bar.

  • Multi-series bar charts are supported
  • Two-color gradients can be used to fill area and bar charts
  • Area charts supports a line border
  • Bar charts support fillfactor
  • Line and step charts support multiple color capabilities, so that the color can change when the data crosses a specified threshold.
  • Custom functions allow rendering data value-based text notes on the chart
  • Custom functions allow rendering a variety of marker styles on the chart: circle, square, triangle, dagger, arrow, flag
  • Mouse Maps and event callback handlers can be provided for user interaction
  • Legend rendering capabilities are available
  • Axis titles support CSS styling
  • Axis labels support CSS styling
  • Configurable Gridlines with CSS styling
  • Axis minimum and maximum values are supported
  • Capable of both auto scale or fixed scale sizes

Negative values are not supported.

Multiple y-axis series are supported.

The general format of the result set is:

[
{ minimum:VALUE, maximum:VALUE, data:[[x0,y0,y'0],...[xn,yn,y'n]] },
{ minimum:VALUE, maximum:VALUE, data:[[X0,Y0,Y'0],...[Xn,Yn,Y'n]] }
]


If the x-axis minimum and maximum values are not needed, then a simplified format is allowed wherein only the data component of the dataset must be sent:

[[X0,Y0,Y'0],...[XN,YN,Y'N]]


TjsDataGrid

A full-featured tabular display.

  • Fixed top header as data scrolls
  • Sortable columns
  • Filterable columns
  • User-configurable column widths
  • User-configurable column ordering
  • User-configurable column hiding
  • Columns can be fixed on the left
  • Built-in support for row menus
  • Built-in support for a checkbox column
  • Supports row drilldown
  • Supports large datasets with paging controls
  • Built-in support for column threshold value highlighting
  • Custom column sorting functions can be specified
  • Custom column display functions can be specified
  • Extensible widget menu options

This is the Viewpoint workhorse, found in many portlets.

The data result is in JSON format. For best performance, the table data is in array form.

This is the general format of the response:

{
"fixedColumns":1,
"count":250,
"status":"OK",
"requestId":0,
"data":[[2162893,1,263,null,"ACTIVE","DBC"],[2162894,2,273,null,"ACTIVE","DBD"]],
"first":1,
"rows":2
}

TjsFilter

Concurrent with the development of the datagrid widget, the filter widget was created. It is included in several Viewpoint portlets. This widget parses the user's input and generates corresponding regular expression for highlighting. In addition to single and multiple character matching, equality comparators and the NOT operator (!) are supported. Text, Numeric, and Date types can be filtered.

The interface is a JSON representation of a filter object currently used in the DataGrid, initially

{
"operator":"ILIKE",
"inverted":false,
"value":"",
"secondValue":""
}

Alternate operator: "LIKE"

NOTE: secondValue is used for date range filtering

The filter pattern match symbols are:

  • '*' to match 0-N characters
  • '?' to match 1 character

NOTE: '\' is used to escape the above pattern match symbols or to escape the escape character '\' itself.

The filter operators and user input comparator symbols are:

  • EQ: '=' or '' to exactly match values
  • LT: '<' to match values less than the specified number
  • LE: '<=' to match values less or equal to the specified number (available in 13.11)
  • GT: '>' to match values greater than the specified number
  • GE: '>=' to match values greater or equal to the specified number (available in 13.11)

TjsBalloon

This widget is used by other widgets (TjsSparkline, TjsHeatmap, TjsMetrics) to display additional information about a data point. The developer creates HTML elements to display the fields of interest. The containing HTML element object is passed to the balloon widget, which then wraps the HTML element with elements that are necessary to construct the balloon. The target element that the balloon is describing is also passed as a parameter. Callback handlers update the contents of the balloon and can adjust the balloon position and suppress showing the balloon. By default, the balloon will disappear after 5 seconds of inactivity, but the timeout value can be modified.

Data Manipulation Widgets

TjsSlider

Used only by the TjsHeatmap widget to allow the user to set the threshold value for percentage-based measurements and to invert the threshold.

TjsTimeSlider

This helper widget is used by the TjsHeatmap and TjsMetrics widgets to set the date range of the main display. A custom mousemove callback function is used with this widget to translate the slider position to the current date range and to update the GUI and cookie with this information. A custom mouseup callback function causes the main display to be re-rendered.

Complex Widgets

TjsHeatmap

Shows aggregated data of fixed intervals in a unique display. A time slider is incorporated at the top to allow investigation of various data sets. Additionally, a threshold slider widget is used for percentage based data. A balloon is used to provide detailed information for each cell as the mouse moves across the display.

The result set consists of one dataset. Each record contains a date and a value:

set = [
[1183705200000, 5],
[1183708800000, 6],
[1183712400000, 7],
[1183716000000, 5],
[1183719600000, 8],
[1183723200000, 5]
];


TjsMetrics

Graphs aggregated data of fixed intervals. This is accomplished by rendering a tall version of TjsSparkline. A time slider is incorporated at the top to allow investigation of various data sets. A balloon is used to provide detailed information for each point on the graph. Additionally, the y-axis scale can be dynamically altered by the user.

The result set consists of one dataset. Each record contains a date and a value:

set = [
[1183791600000, 0],
[1183795200000, 0],
[1183798800000, 0],
[1204866000000, null],
[1204869600000, null],
[1204873200000, null]
];


TjsSparkline

Generally, a graph that plots the current trend with historical values underlaid. A balloon widget is also created to display information about each data point. A variant type is used in TjsMetrics to plot a single series. An unrelated type is used to display the System Health sparkline.

In the general case, the result set consists of two datasets of variable interval data with minimum and maximum dates specified. Each data record contains a date and a value:

set = [
{minimum:1204677000000,maximum:1204763400000,data:[
[1204677000000,18.283],
[1204678800000,34.333],
[1204761600000,15.733]
]},
{minimum:1204677000000,maximum:1204763400000,data:[
[1204677876177,45],
[1204688836215,10],
[1204690636191,10],
[1204709716190,17],
[1204723316169,11],
[1204764216169,null]
]}
];


In the System Health case, the second series contains information about the status during that time period. The second series value is not used for charting, but is displayed by the balloon.

set = [
{minimum:1204762500000,maximum:1204848900000,data:[
[1204762500000,1,"HEALTHY ~15/15"],
[1204773400000,2,"DEGRADED ~3/15"],
[1204784300000,1,"HEALTHY ~15/15"],
[1204805200000,1,"HEALTHY ~15/15"],
[1204826100000,2,"DEGRADED ~1/15"],
[1204847000000,1,"HEALTHY ~15/15"]
]}
];


TjsHealthline

A bar graph with 2 warning levels plus a small trend chart, all on one line. A title appears to the left of the bar graph.

The result set consists of one dataset. Each record contains a date and a value:

set = [
[1204826264939,45.148],
[1204826864971,55.416],
[1204826264995,38.714],
[1204826865027,52.043],
[1204827465059,27.272]
];


TjsChooser

This widget allows choosing targets from one list ("source", on the left) and adding them to another ("destination", on the right). The selection behavior imitates that of browser selection boxes, allowing the use of control key and shift key operations. However, this widget is not limited to a single input element. Often it is used with a table with a fixed header. This widget has two modes. In "shuttle" mode the targets are moved from one list to the other. In "chooser" mode the targets in the left list are rendered inactive and the selected targets are copied into the right list. Additionally, there are functions for moving selected targets up or down within the right list. This widget does not create any HTML elements.

Layout Widgets

vpmenu

The vpmenu widget is designed to have the correct look and feel for Viewpoint portlet menus.  Nested levels are available and the menu can be launched from a variety of standard button styles.  This widget is a jQuery ui component, so an options object is passed in during the creation of the widget.

The menu can be invoked on an existing UL list containing anchors:

    <div id=menucontainer>
<button id=menubutton class=adminbutton>Admin</button>
<ul id=menu class=menuDemo>
<li><a href=javascript&colon;void(0)>TextA</a></li>
<li><a href=javascript&colon;void(0)>TextB</a></li>
</ul>
</div>

Typically, the menu contents are generated dynamically. Additionally, a more robust set of features can be created by supplying the data in this manner:

    var children0 = [];
children0.push({ text:"childAAA" });
children0.push({ text:"childAAB" });

var children1 = [];
children1.push({ text:"childAA", disabled:false, data:children0 });
children1.push({ text:"childAB", disabled:false });

var rowMenuItems = [];
rowMenuItems.push({ text:"A Very Wide ParentA", data:children1 });
rowMenuItems.push({ text:"textB" });
rowMenuItems.push({ text:"disC", disabled:true });
rowMenuItems.push({ text:"parentG", status:"green" });
rowMenuItems.push({ text:"parentH", status:"red" });

The widget will position the menu relative to the launching button depending on the available space. The designer can further limit the bounding rectangle used for this calculation if the layout is unusual.

    var obj = jQuery("#menu").vpmenu({
data: rowMenuItems
});
jQuery("#menubutton").vpmenuButton({
buttonType: 2,
boundingRect: element("vpmenuDemoContainer"),
vpmenuObj: obj
});

The widget generates events that the application can listen for. The select event will return the vpmenu index of the item selected:

       obj.bind("vpmenu.open", function() {
jQuery("#menucontainer").css({zIndex:60});
TjsInformation("menu: OPEN EVENT WAS TRIGGERED");
});
obj.bind("vpmenu.close", function() {
jQuery("#menucontainer").css({zIndex:0});
TjsInformation("menu: CLOSE EVENT WAS TRIGGERED");
});
obj.bind("vpmenu.select", function($event, index) {
TjsInformation("menu: SELECT EVENT WAS TRIGGERED ON " + index);
});
obj.bind("vpmenu.scroll", function($event) {
TjsInformation("menu: SCROLL EVENT WAS TRIGGERED");
});

vpselect

The vpselect widget is a stylized widget that is intended to be used in place of a SELECT element. Correspondingly, a selectedIndex property is available. The currently selected text will appear when the widget is collapsed. Data rows with NULL text will appear as a dashed line separator.

var selectItems = [];
selectItems.push({ value:'THIS', text:'something', disabled:false });
selectItems.push({ value:'THAT', text:'something else', disabled:false });
selectItems.push({ value:'OTHER', text:'another thing', disabled:false });

This widget is a jQuery ui component, so an options object is passed in during the creation of the widget.

    var obj = jQuery("#select").vpselect({
name: "things",
context: this.options.context,
selectedIndex: 1,
width: 180,
data: { "nodes": selectItems }
});

The widget generates events that the application can listen for.

    $("#select").bind("vpselectchange", function(event, ui) {
TjsInformation("select: CHANGE EVENT WAS TRIGGERED");
});
$("#select").bind("vpselectopen", function(event, ui) {
TjsInformation("select: OPEN EVENT WAS TRIGGERED");
});
$("#select").bind("vpselectclose", function(event, ui) {
TjsInformation("select: CLOSE EVENT WAS TRIGGERED");
});
$("#select").bind("vpselectclick", function(event, ui) {
TjsInformation("select: CLICK EVENT WAS TRIGGERED");
});

Debugging

You can type "tjsdebug" anyplace in the Viewpoint Portal to bring up the debug console. Click the log tab to see any errors that have been logged. The default logging level is 2 (INFO). Click the config tab to change the default logging level to 0. After that point, all log messages will be sent to the log tab. The debug console can be turned on as soon as the document load state becomes "complete" or "ready". Alternately, your code can call TjsDebug.launch(0) to turn on logging at level 0. In Internet Explorer for Windows, TjsDebug can write log output to c:\temp\log.txt if you add http://localhost to Internet Options/Security/Trusted sites/sites. This is useful for debugging cleanup routines.

Caveats

Chart rendering is about 5 times faster in the Firefox browser than in Internet Explorer.

Tags (2)