ub_widgets.js – Custom HTML elements

ub_widgets provides a (growing) number of custom HTML elements. Some are stand-alone while others provide extensions to existing elements.

Stand-alone elements

ub-carousel – add a carousel to a page

Usage: <ub-carousel><ub-slide title="..." type="iframe">"any old URL"</ub-slide>...</ub-carousel>

Carousels are common today and are a rotating collection of displays. The typical carousel is a set of pictures.

The Unibase carousel is a rotating collection of iframes at this stage. The intention is to extend it as use cases present themselves.

A carousel is made up of a number of slides. Each slide has a type (currently only ‘iframe’ is supported).

The slide titles are displayed as a tooltip on the arrows showing what the order they will be displayed.

There is no limit to the number of slides you can specify.

The display is the simple “<” and “>” on each side of the slide to progress to the next one.

ub-expand – expand or view details

Usage: <ub-expand frame="..." id="..." click="..."></ub-expand>

Further details about the current object are displayed in another window unless id or frame are specified.

  • frame: Optional. iframe to display expanded information
  • id: target id on current page to display expanded information
  • click: ubcgi program to display information
eg <ub-expand frame="report" click="REPORT_NAME=invoice&MATCH=000123"></ub-expand>

ub-map – add a Google map to a page

Usage: <ub-map address="..." height="..." width="..."></ub-map>
eg: <ub-map address="1 Main St Somewhere" height="480px" width="640px"></ub-map>

Address, height, and width are all optional. ub-map can also be styled with css.

ub-marker – add a marker to the map.

eg: <ub-marker address="1 Main St Somewhere" label="A" title="Office"></ub-marker>
  • address is required.
  • label: Optional. Label on the map marker
  • title: Optional.Tooltip popup when mouse hovers over the marker.

ub-map-center – centers the map on a marker. This is an extension element. See below.

ub-search – search for text in a set of divs or other “display: block” elements.

An input box with a search (magnifier) icon is displayed.

eg: <ub-search size="20" ub-search="any name" message="..."></ub-search>

message is optional and if given will be displayed before the message box.

The input box has its size set to “size”.

The search is done through all elements with “name=’any name'” etc.

Multiple search boxes are allowed.

Elements whose textContent matches the search term (case ignored) are displayed and others hidden.

Clearing the search box will display all previously hidden elements.

Extension elements

These elements are extensions to existing elements and are used by including is=”…” in the base element tag.

ub-add – Add a new record to a table. Extends img.

eg: <img is="ub-add" dialog alt="Add a new record" click="record_new">

Sets the image src to /images/add.png, sets up alt as the tooltip (title), and adds an event listener on click to call ubprompt using the value in click. The click value can specify extra URL values. eg click=”record_new&PARENT=000001″

If dialog is specified then the ubprompt.dialog is called instead of ubprompt.prompt. ie The prompt will be a dialog box rather than a page in its own right.

/images/add.png will only be used if src is not specified in the img element.

ub-change – Change details of a record

Usage: <img is="ub-change" src="..." alt="..." dialog click="...">

Like ub-add but uses /images/edit.png as the default img.

  • src: Optional. Image to use otherise standard edit image is used.
  • alt: Alt text for icon. Also used as title for tooltip
  • dialog: Optional. If given the ubcgi program (usually a prompt) will be displayed in a modal dialog.
  • click: ubcgi program arguments
eg <img is="ub-change" dialog alt="Edit details" click="record_edit&RECORD=000001">

ub-cancel – Cancel something

Usage: <img is="ub-cancel" src="..." alt="..." dialog click="...">
  • src: Optional. Image to use otherwise standard delete image is used
  • alt: Alt text for icon. Also used as title for tooltip
  • dialog: Optional. If given then the ubcgi program (usually a prompt) will be displayed in a modal dialog.
  • click: ubcgi program arguments
eg <img is="ub-cancel" alt="Cancel Invoice"  click="PROMPT_NAME=invoiceCancel&INVOICE=000123">

ub-done

ub-edit

ub-mail

ub-map-center

ub-menu-option

ub-replace

ub-view – view something. eg document, web page, etc.

Usage: <img is="ub-view" src="..." alt="..." id="..." frame="..." click="...">
  • src: optional. if given use the image specified instead of the default ‘eye’.
  • alt: used as alt text for image and also as tooltip (title).
  • id: optional. id of an element where the view will happen.
  • frame: optional. id of an iframe where view will happen.
  • click: ubcgi script to view item. eg REPORT_NAME=quotation&MATCH=00001234

Note that id and frame are optional and if omitted will the view will be in a new window or tab.