UNIBASE

ub_layout: A guide to the Javascript framework

ub_layout – Javascript (ECMA6) framework for dynamic page layout and table manipulation

DOM ELEMENTS

ub_layout defines functionality for several dom elements by adding attributes to the element.

  • ckeditor This element specifies a text area to be wrapped in the ckeditor framework for html style editing
    Attributes
    • edit – value is id of textarea to edit with ckeditor
    EXAMPLE In a prompt definition: P … notes, 60 M10 … > … … >

RESERVED SPACE

The layout engine can reserve space. This is important when creating scrollable tables, divs, etc.

Reserve space by adding a data element to the html.

<data name=”reserve” {height=”y”} {width=”x”}></data>

x and y are numbers but interpreted as pixels.

The reserved space is at the bottom of the screen (height) or right hand side (width).

To put an element in the reserved area simply set its position to absolute and the set bottom or right. eg

<div style=”position: absolute; bottom: 0;”>…</div>

ATTRIBUTES

Much of ub_layout is driven by simply adding attributes to html elements.

  • collapseLevel
    • Sets up multi level collapsible rows. Higher collapseLevels being contained within lower ones. An extra cell with a ‘+’ or ‘-‘ is added to the start of the row to indicate it can be collpased or expanded.
    • Related attributes:
      • collapseState
        • open/hide. Indicates if the collapsed rows should be displayed or hidden at startup.
      • collapseDirection
        • before/after. Collapse rows before or after the collapseLevel row.
  • fixedHeight
    • The height of the table is fixed to the value in ubScrollHeight. Normally ubScrollHeight is the maximum height for a table. Using this will make it always the same height.
    • eg If a table has totals, sometimes you want the totals under the data and no empty space. Other times you want the table to always be the same height with the totals in the same place.
  • followed
    • Highlight (with cyan) the element if it is clicked.
  • scrollable
    • This option tells ub_layout that this element contains scrollable content and triggers it to size the element to a percentage of the viewport. By default, ub_layout sizes it to 100% height and 100% width, measured from the element’s top left corner.
    • If the element is a table then the default is to manage the height, but not the width of the table.
    • ub_layout particularly focuses on tables. For a scrollable table, it fixes the thead and the foot sections and constrains the the body to the nominated percentage height.
  • ubResult
    • Number of items matching the current search
  • ubScrollHeight=”%”
    • ubScrollHeight is used to define a different percentage of the remaining viewport to be used. eg ubScrollHeigh=”50″ will size the element to be 50% of the height from its top left corner to the bottom of the viewport.
  • ubScrollWidth=”%”
    • ubScrollWidth works the same as ubScrollHeight but refers to a percentage of the remaining viewport width.
  • ubSearch
    • Add this to an input element to use the content of the input to search for matching rows.
    • The value for ubSearch is element of the ubValue object to match against. eg ubSearch=”thing”
    • Rows that don’t match will be hidden
    • Rows to be matched have the attribute ubValue
  • ubSearchFrom
    • Like ubSearch except it is the minimum value for the search
    • Use with ubSearchTo to search a range
  • ubSearchTo
    • Like ubSearch except it is the maximum value for the search
    • Use with ubSearchFrom to search a range
  • ubSort
    • Sort elements with specified attribute as part of the page initiation (after loading).
    • eg <table ubSort=”sales”>…<tr sales=”123″>….</table>
    • Add :reverse to the attribute name to do a reverse (descending) sort. eg <table ubSort=”sales:reverse”>
  • ubSortBy
    • Sort elements or columns based on an attribute
    • Adds up and down arrows (only one visible at at time) to the master element. eg the master element might be a th in the table thead.
    • eg. <table><thead><tr><th ubSortBy=”price”>… and then on rows to be sorted <tbody><tr price=”100.00″>…
    • Add the specified attribute to each tr or other element
  • ubSum
    • JSON attribute

IYou can use this function to place sums in an HTML document wherever you want them. It does not replace the Unibase reporting; instead, it performs live updates when you edit a document. You typically use it with ub_keyinput.js, but you can use it with any other editor.

Usage:

You add an extra identifying attribute to elements you want ubSum to sum. These elements are not unique. In its basic form, ubSum will add together all the elements with the identifying attribute.

An element can have more than 1 sum attribute and elements that hold totals can also have sum attributes so that they can in turn be included in other sums.

eg <td column1 row1>some value</td>

The ubSum object consists of the sum attribute as an identifier and an options object, which can be empty.

eg <td ubSum='{“column1”: {}}’>sum of column1</td>

Changing an element with an attribute that is a ubSum identifier will trigger a recalculation.

Options:

“value”: “function name”

This option will pass the attribute name and the value of the current cell being summed as arguments to “function name”. The function can return any value it likes, and the summing process will use this value instead of the raw value.

eg. To subtract rather than add a value

let subtract (attribute, value) => -value;

or function subtract (attribute, value) {return -value}

and

<td column1 less1 ubSum='{“less1”: {“value”: “subtract”}}’>some value</td>

Note that this function operates on the element being summed, not the element displaying the sum. Also, the sum function requires its identifying attribute.

A complete example is available in the twc application: otb.rep

Please note:

This is not the first time I have tried to do this. However it is still a work in progress and you should report any problems, limitations, or request further clarification as required.

Also, it works with data in tables rather than acting as a full online spreadsheet. Nevertheless, it could provide similar capabilities..

IWe haven’t yet optimised its calculations, but that will come. However, it seems fast enough.

Because ubSum does not run during page load, the initial page load must provide a fully populated page. We may change this.

  • ubValue
    • Value to use in search. This is a json object of values to match against. Each element in the json object is a ubSearch identifier and value pair. Add this to a tr and the search function will test it when deciding to display or hide the row (tr) it belongs to.
    • eg ubValue='{“thing”: “some value”}’

METHODS

ub_layout methods can be used to manipulate tables and elements.

  • elementSort sorts and redisplays elements within a surrounding container, such as table rows, list elements, or divs. It can sort elements in ascending or descending sequence based on the value of an attribute stored in the element.
  • Syntax: ub_layout.elementSort('attribute', 'reverse');
  • The attribute parameter specifies the name of an attribute whose value determines the sort order. You provide any value for the second argument to sort in reverse order; leave it out for an ascending sort.
  • You normally call elementSort as part of the page initialization (but see the ubSort attribute) or attach it to a click event on a direction image.
Verified by MonsterInsights