Q4Widgets API Documentation

q4.lookupList

Get lookup items from Lookup List and render as needed.
Script link
q4.lookuplist.1.0.1.min.js
Source file
q4.lookuplist.js, line 2
Requires

Options

url string
The base URL to use for API calls. By default, calls go to the current domain, so this option is usually unnecessary.
languageId string
A number representing which language to pull data from. By default it auto detects language.
useJSONP boolean
When true, the API is changed to a JSONP format and can be called from an external source outside of a Q4 environment (ie. local machine, client's internal server)
Default value
false
lookupType string
Specify the lookup type to use from Lookup List
template string
The template option determines the layout of the widget once it is rendered on the page. The mustache.js plugin is used to render the template strings into full HTML, based on the data available from the API call. Using the template option is not required, as long as the yearTemplate and/or itemTemplate are used instead. The desired structure should be listed as strings containing html elements, with mustache variables to indicate where data should be used.

Important Notes:
  • HTML elements should be listed as strings and combined with plus sign at the end of each string. For example: '<span>Content text</span>' +
  • The last string in the template should not include a plus sign at the end as it will return an error
  • Mustache variables are shown in curly brackets, ex. {{title}} this content will be replaced with the value it represents in the API.
  • Variables with two curly brackets are rendered as text. Variables with three curly brackets (ex. {{{body}}} ) are rendered as HTML.
  • Arrays of data can be accessed with # and closed with /. For example using {{#docs}} in a widget template will allow you to access an array of documents inside of a single content item.
  • The value of the variable is specific to the array in which it is contained. For example, {{title}} inside of {{#docs}} will refer to the document title, but if it is listed outside of the array it would refer to the title of the content item (ex. event title).
  • If/Else logic can be applied using # and ^ before a variable. See the example code at the bottom of this section.
    • {{#items}} If items exist, access them and do something.
    • {{^items}} If items do not exist, do something else

The following tags are available:

  • {{text}} The text value of the lookup.
  • {{type}} The lookup type.
  • {{value}} The value of the lookup

Example: (
template: (
'<select class="form-control security" size="1" id="keyFndg" style="display: block;">' +
   '{{#items}}' +
       '<option data-type="{{type}}" value="{{value}}">{{text}}</option>' +
   '{{/items}}' +
'</select>'
)
beforeRender function
A callback that fires before the full widget is rendered. It is generally used to restructure/manipulate data before being passed into the template option.
  • This function runs only once, when widget is first loaded on the page
  • Can be used with any of the widget template options (template, yearTemplate and itemTemplate)
  • This callback is not triggered by yearSelect/yearTrigger or tagSelect/tagTrigger actions.
  • Can be used in conjunction with itemsComplete callback, but it will run after itemsComplete is finished.
Parameters
event Event
The event object.
templateData Object
The complete template data. Example: { items: [{...}, {...}] }
complete function
A callback that fires after the entire widget is rendered. Often used to trigger additional global scripts or plugins to run.
  • This function runs only once, when widget is first loaded on the page
Parameters
event Event
The event object.