Renderers and Helpers

This documentation is still a work in progress. We will continue to update it frequently, so check back often.

JavaScript Renderers ¶

Templates are rendered using renderers.

In most cases, you will not need to change the defaults set up for your website. This information is provided to give a greater understanding into the inner workings of the User Registration Widget.

There are three kinds of renderers:

HTML Element Renderers ¶

• Input
• Div
• Form

Capture Element Renderers ¶

• Collection (tabber)
• Photo Manager
• Date Picker
• Form Progress Bar

Widget Renderers ¶

• Login

You can add custom renderers through the Capture Widget API.

Renderer Helpers ¶

We created several renderer helpers to help you make your own renderers. To use the renderer helpers when creating a custom renderer, just call this.helpers.helperName() inside the custom renderer function. For example to create a new Div, you can call this.helpers.createDiv(options);. The helpers that are HTML Element helpers all accept an object with the possible parameters shown in Code Example 1.

Code Example 1

var options = {
    'classes': ['array', 'of', 'classes', 'added', 'to', 'element'],
    'name': 'elementName',
    // used to for id attribute and name attribute if is a form element
    'elementId': 'elementId',
    // sets an id for form elements, is generated from name if not supplied
    'rows': 5,
    // sets row attribute in createTextarea
    'value': 'prefilled value for element',
    // sets value for elements
    'tip': 'helpful tip',
    // a tip that appears with element
    'disabled': true,
    // used in createSelect to disable an option in a select element
    'options': [{text:'option text 1', value: 'ot1'}, {text:'option text 2', value: 'ot2'}],
    // array of objects to create options for createSelect
    'type': 'hidden',
    // type of input to create when using createInput
}

The options are different for createListOfLinks, as shown in Code Example 2.

Code Example 2

var options =[ //array of objects for each list item in an unordered list
{
    'listItemId': 'idForListItem',
    'listItemClasses': ['array', 'of', 'classes'],
    'anchorText': 'text of link in li',
    'anchorHref': 'http://www.janrain.com', // href for anchor
    'anchorClasses': ['array', 'of', 'classes'],
    'anchorId': 'idForAnchor'
},
{
    'listItemId': 'idForListItem',
    'listItemClasses': ['array', 'of', 'classes'],
    'anchorText': 'text of link in li',
    'anchorHref': 'http://www.janrain.com', // href for anchor
    'anchorClasses': ['array', 'of', 'classes'],
    'anchorId': 'idForAnchor'
}]

HTML Helpers Example

createSelect(options)
createTextarea(options)
createInput(options)
createLabel(options)
createDiv(options)
createImage(options)
createListOfLinks(options, ulClasses)

Other Helpers Example

togglePasswordInput(event)
clearDefault(event)
restoreDefault(event)
getElementByEventAttribute(event, attributeName)

See also: Capture Widget API.