UNIBASE

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-auto-complete – look up address using Google places

Usage: <ub-auto-complete></ub-auto-complete>

Attributes

  • label
    • Label for the marker that will drop on the address when completed
  • location
    • name of the input field to use. Default is “location”. If you choose a location then you also need set up address fields with “location” as the prefix.

Turn a text input field into a Google address lookup. It also indicates the address on a map using a dropper.

First it needs a div with id=”map” to display the map and droppers.

When it starts a geo-location inquiry is made to get the position of the person doing data entry. If that can’t be determined then an error message is displayed. If the local address can be determined a dropper is placed on the map with the label “U” for “us”.

The address is entered into a text input field with id=”INPUT_location”. After the address is entered another dropper is added to the map at the address location and labelled “T” for “them”.

If you have the attribute “label” then the input text field will have id=”INPUT_something else”. eg id=”INPUT_home”

Google is specific about the data returned and these rules must be followed.

Number and street are combined and put into a text input field called “INPUT_street”.

The town or suburb goes to “INPUT_locality”.

State goes to “INPUT_administrative_area_level_1”

Country goes to “INPUT_country”

ZIP or Postcode goes to “INPUT_postal_code”

If you have specified a different “location” , eg “home” then the fields will be call, eg, “homestreet” and the input field will be “INPUT_homestreet”

Apartment numbers are not handled well by Google – by their own admission. If you need to store a unit or apartment number you should check INPUT_location and extract it to add to the address if needed.

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: <element is=ub-expand-element target="..." pre="..." {click="..."} {clicks='[{"option": "value"}, {...},...]'}></element>

ub-expand was added to replace the onclick which is reported to be a security concern by some standards.

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

Options:

  • target: Optional.
    • If omitted click is called as unibase.windowCGI.
    • If target is “dialog” then a dialog box is opened and the option “prompt” msut be included with the name of a ubprompt form. “ubcgi” is the rest of the ubcgi command.
    • Otherwise either frameCGI or idCGI is called based on the tagName of the target element.
  • pre: name of a function to call before executing ubcgi program. This is called with the clicked on element as its only argument.
  • ubcgi: ubcgi URL to run
  • script: javascript to run
  • clicks: JSON array of targets and click actions
    • the attributes are “target”, “ubcgi”, and “script”. Note that the attributes mast be surrounded by “, not ‘.
    • example
    • clicks=’\[{“target”: “report”, “ubcgi”: “REPORT_NAME=stock”}, …]’
    • clicks was introduced so that a single click can populate multiple id’s
    • If target is not specified a new window is opened
    • target = dialog. Open a modal dialog window.
    • clicks has a JSON attribute “event” that defines the event that will fire the option.
    • ubcgi is required.
    • event is optional. Default is click but can be any event such as “mouseover”.
    • Using this option can trigger a complex range of events based on target, events, etc.
eg <ub-expand target="report" click="REPORT_NAME=invoice&MATCH=000123"></ub-expand>
eg <ub-expand target="report" pre="clearDivs" click="REPORT_NAME=products&MATCH=000010"></ub-expand>

Modal Dialogs

In the “clicks” attribute, simply set the target to “dialog” and then provide the extra attribute prompt and the modified ubcgi value.

eg:

<td is=”ub-expand-td” title=”Edit schedule event” clicks=’\[{“target”: “dialog”, “prompt”: “quoteActionEdit”, “ubcgi”: “QUOTEACTIONID=[quoteActionId]&SEARCH=N”}]’>[actions.action:T]</td>

  • target: must be dialog for a modal dialog. Only works for prompts
  • prompt: name of the prompt to use
  • ubcgi: extra parameters for the prompt

Sub-types

  • ub-expand-button
  • ub-expand-div
  • ub-expand-fieldset
  • ub-expand-img
  • ub-expand-legend
  • ub-expand-li
  • ub-expand-td
  • ub-expand-th
  • ub-expand-tr

As expected these work the same as ub-expand but are extensions of the elements. This is necessary at the moment as Chrome does not support wild card element extensions.

ub-live-edit – switch to live edit of input fields

Usage: <img is="ub-live-edit" element="...">
eg: <img is="ub-live-edit" element="details">

This is one of the more complex widgets. There are 3 “components”.

First there is the “img” element that declares a live edit group of elements.

Then there is the surrounding live edit element such as a table or list. It will have an attribute “liveEdit” and there will be on of these for each “ub-live-edit”.

eg <table liveEdit="details"> ... </table>

Inside this container there can be whatever you would normally do, but you also need to add the modifier “:LIVE” to any element that is to be live edited.

When the html the img icon is an edit icon (eg pencil).

When the edit icon is clicked the elements are replaced with appropriate edit elements (mostly “input”). The img is replaced with a tick or something else to indicate click here when done.

When the ‘done” icon is clicked the display returns to its original and the img icon is also changed.

An example code snippet:

<fieldset class="heading">
     <legend>DETAILS <img is="ub-live-edit" title="EDIT" element="detailEdit"></legend>
     <table liveEdit="detailEdit">
             <tr>    <td class="field-title">Product</td>
                     <td>[product:LIVE]</td>
                     </tr>
...

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-trip: Optional. Add this address a waypoint on a trip route. It’s value is it’s position in the trip starting from “0”

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" search="any name" message="..."></ub-search>

Attributes

  • display
  • found
    • display style for elements that are found. This normally just displays the element if it was hidden. This overrides that behaviour.
  • imageClass
    • css class to use for image
  • inputClass
    • css class to use for input box
  • placeHolder
    • place holder text for input box
  • message
    • Message to display before the input box
  • search
    • name of searchable elements. All elements to be searched will have name=”<search>” . eg <tr name=”search”> (search is ok as a name)
  • searchImage
    • Image to use for search instead of standard magnifier
  • searchHeading
    • Specify elements to hide if text not found. This will be elements with the attribute heading=”…” The heading does not have to be an ancestor in the DOM. Compare with selector where the selector specifies child elements of the search element
  • selector
    • css selector to specify elements to be searched relative to each “search” element. If specified the entire element won’t be searched, only those that match the selector
  • size
    • size in characters of the input box

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.

ub-search works in conjunction with ubSum. The value of a ubSum element will be recalculated from the displayed elements only.

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-change – display a form to change current record

Usage: <img is="ub-change" click="..." {target="..."} {dialog} {img="..."}>

ub-change is used to call a Unibase form (ubprompt).

ub-done – next URL when this page is complete

Use this to specify the next URL when the user has finished with the current page. eg this can be used to build an onboarding sequence.

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.