bootstrap4

Simplicite.UI.View. bootstrap4

new bootstrap4(ui)

Description:

  • Bootstrap V4 Tools. These tools are used when BOOTSTRAP_VERSION system parameter's value is 4

Parameters:
Name Type Description
ui

Main UI controller

Methods

accordion(ctn)

Description:

  • Manage collapsible panels as accordion

Parameters:
Name Type Description
ctn Object

Container of panels .collapse

actionButton(a, o, rowid, onClick, minified)

Description:

  • Button of action

Parameters:
Name Type Description
a

Action { name, label, level, primary, icon, help, showLabel, toState, custom, enabled, disabled, style, background, color, size }
o

Business Object
rowid

Optional row ID
onClick

Handler
minified

Hide label?

actionIcon(p)

Description:

  • Icon button

Parameters:
Name Type Description
p Object

Optional parameters

Properties
Name Type Description
name string

Action name
title string | $

Title as HTML tooltip
subtitle string

Optional Subtitle
placement string

Tooltip placement (default 'bottom')
disabled boolean

Icon disabled?
icon string | $

Icon name
size string

Optional size (e.g. 'sm' for small)
click function

Handler

actionPlus(items, right, dropUp)

Description:

  • Create a 'plus' button

Parameters:
Name Type Description
items

Array of item (li)
right

Align popup to the right of button
dropUp

On top?

addTab(t, tab, active)

Description:

  • Add a tab

Parameters:
Name Type Description
t jQuery

Existing tabs
tab Object

Tab options { title, icon, content, hidden, click, key, data }
active boolean

Activate this tab?

alert(h, level)

Description:

  • Simple alert content

Parameters:
Name Type Description
h

HTML content
level

Optional info|success|warning|danger

button(p)

Description:

  • Create a button

Parameters:
Name Type Description
p Object

Options

Properties
Name Type Description
id string

Button optional id
name string

Button name (attribute data-action and class 'btn-')
icon string | $

Optional icon name (e.g. 'star') or icon
label string

Button label
tooltip string

Optional tooltip
click function

Optional callback
size string

Optional size (e.g. 'xs' for extra small)
level string

Optional level (e.g. 'primary', 'secondary', 'plus')
type string

Optional type (e.g. 'submit' default, 'button')
disabled string

Disabled?

buttonHelp(name, help, title, btn)

Description:

  • Return a simple help icon with a popover or a dialog when help is too long

Parameters:
Name Type Description
name string

Button name
help string

Text or html
title string

Optional title of dialog
btn jQuery

Optional button to complete

card()

Description:

  • card/panel alias

check(d)

Description:

  • Simple checkbox or radio

Parameters:
Name Type Description
d Object

Options

Properties
Name Type Description
id string

Input id
name string

Input name
value string

Hidden value
label string | jQuery

Label
inline boolean

Inlined in form?
disabled boolean

Disabled?
readonly boolean

Readonly?
checked boolean

Checked?
change function

Optional handler
type string

Type 'checkbox' (default) or 'radio'

col(size, content)

Description:

  • Simple column

Parameters:
Name Type Description
size string

Media-width: short syntax 'md-5' or long syntax 'col-lg-4 col-md-8', default 'col-12', 'xs-' is supported
content jQuery | Array.<jQuery>

Optional content or array of contents

compat(d)

Description:

  • Backward compatibility with V3: grid "xs-"

Parameters:
Name Type Description
d jQueyy

Content to fix

danger(h)

Description:

  • Simple error

Parameters:
Name Type Description
h

Content

dialog(p)

Description:

  • Dialog box

Parameters:
Name Type Description
p Object

String content or object

Properties
Name Type Description
name string

Optional name
title string

Optional dialog title (rich content)
help string

Contextual help
type string

Optional error|danger|warning|info
content string | jQuery

Dialog body
closeable boolean

True to add a close button in header
focus boolean

True to focus the primary, success or first button (default true for ENTER key)
fade boolean

False to remove fade effect (default true)
modal boolean

True to disable click outside dialog and ESC keyboard button
nav boolean

True to create a new navigation in dialog
overflow boolean

True to add scrollbars
width string

Optional width (ex: '600px' or '80%'), forced to 100% on XS device
slide string

Optional 'left|right' with swipe event
buttons Array

Optional footer actions [{ name, label, icon, style:'primary|secondary|success|info[danger', callback or click, close:true|false, disabled:true|false }]
buttonsHeader Array

Optional header actions
onload function

Optional callback when displayed
beforeunload function

Optional callback when closing (use preventDefault to cancel)
unload function

Optional callback when closed
dontAskAgain function

Optional 'dont't ask again' callback

dialogClose(dlg, cbk)

Description:

  • Close the dialog box

Parameters:
Name Type Description
dlg string | jQuery

name or modal, undefined = close the top dialog if unset, "all" = close all
cbk function

optional callback when dialog is closed

displayField()

Description:

  • Field rendering. Deprecated use $ui.view.getField(ctn, o, f, index).ui.draw()

Deprecated:
  • Yes

displayFieldSearch()

Description:

  • Field search rendering

displayLinkSearch()

Description:

  • Link search rendering (for N,N pillbox)

Description:

  • Create a dropdown button

Parameters:
Name Type Description
elt

Optional left side of button
btn

The button to convert to dropdown
items

List of $ or action { name, label, icon, cbk|callback|click }
right

Align popup on right side of button
dropUp

True to drop on the top of button
caret

Display a caret on the right side of button?

dropup(elt, btn, items, right)

Description:

  • Create a dropup button

Parameters:
Name Type Description
elt

Optional left side of button
btn

Toggle button
items

List of $ or action { name, label, icon, cbk }
right

Align popup on right side of button

focus(el)

Description:

  • Focus one element and active/expand tabs/collapsed parents

Parameters:
Name Type Description
el jQuery

Element to focus

form(p)

Description:

  • Simple form

Parameters:
Name Type Description
p

Parameters { name, inline, content, autocomplete, onsubmit }

formGroup(name, label, inp, msg, suggestCallback)

Description:

  • Form group of input

Parameters:
Name Type Description
name string

Group name
label string

Optional label or text
inp string | jQuery

Input group
msg Object

Optional backend message
suggestCallback function

a suggestion callback, sets new value, returns old value

formGroupSearch(cls, label, input)

Description:

  • Form group for search form

Parameters:
Name Type Description
cls

Class
label

Text
input

Input

getDialog(dlg)

Description:

  • Find a visible dialog

Parameters:
Name Type Description
dlg string

optional dialog, name or "all", or returns the top level dialog if unset

getTabActive(t)

Description:

  • Get the active tab anchor with data

Parameters:
Name Type Description
t jQuery

Tabs

getTabPane(t, index)

Description:

  • Get a tab container

Parameters:
Name Type Description
t jQuery

Tabs
index number | string

Tab index or tab data-key

getTabs(t, s)

Description:

  • Get the tab anchors with data

Parameters:
Name Type Description
t jQuery

Tabs
s string

Optional anchor selector

getTemplate()

Description:

  • Get template for BSv4

getVersion()

Description:

  • Bootstrap full version (e.g. 4.3.1)

help(h)

Description:

  • Simple help

Parameters:
Name Type Description
h

Content as safe HTML (any script is ignored)

hideTooltips()

Description:

  • Hide all (remaining) tooltips and popovers

icon(name, cls)

Description:

  • Simple icon (deprecated: use view.icon directly)

Deprecated:
  • Yes
Parameters:
Name Type Description
name string

Icon name or prefixed by fas/ far/
cls string

Optional class name

image(src)

Description:

  • Get responsive image (.img-fluid)

Parameters:
Name Type Description
src string

Source

input(a)

Description:

  • Input with attributes

Parameters:
Name Type Description
a

Object with attributes

inputGroup(inp, addons, prefix)

Description:

  • Create an input group with addons actions

Parameters:
Name Type Description
inp jQuery

Input element
addons Array

Optional array of $ or actions { name, label, icon, plus, cbk }
prefix string | jQuery

Optional prefix

isDialogModal(dlg)

Description:

  • Is the dialog modal (no keyboard ESC and no close button) ?

Parameters:
Name Type Description
dlg string

optional name or top level dialog if unset

load()

Description:

  • Load bootstrap libs

message(m)

Description:

  • Inlined message alert

Parameters:
Name Type Description
m

String or { level, label }

panel(params)

Description:

  • Simple panel (implemented with card)

Parameters:
Name Type Description
params Object

Parameters { id, title, icon, content, hidden, collapsed, onCollapsed, footer }

Properties
Name Type Description
id string

Panel ID
title string | jQuery

Optional title or header
icon string

Optional icon name
content string | jQuery

Body
hidden boolean

Hidden?
collapsed boolean

Collapsed?
onCollapsed function

Optional collapse handler
footer string | jQuery

Optional footer

progressBar(id, p)

Description:

  • Progress bar

Parameters:
Name Type Description
id string | $

Progress div or id
p number

value in percent [0..100]

radio(d)

Description:

  • Simple radio

Parameters:
Name Type Description
d Object

Options

Properties
Name Type Description
id string

Input id
name string

Input name
value string

Hidden value
label string

Label
disabled boolean

Disabled?
readonly boolean

Readonly?
checked boolean

Checked?
change function

Optional handler

ready()

Description:

  • Home is displayed

removeTab(t, index, prev)

Description:

  • Remove a tab

Parameters:
Name Type Description
t jQuery

Tabs
index number | string

Tab index or tab data-key
prev boolean

Click on previous (or next) tab if exists

row(cols)

Description:

  • Create a row with columns

Parameters:
Name Type Description
cols

Array of columns

select(a, o)

Description:

  • Select with options

Parameters:
Name Type Description
a

Object with attributes
o

Array of { value, label, data }

setTabActive(t)

Description:

  • Set the active tab anchor

Parameters:
Name Type Description
t jQuery

Tabs

setTabContent(t, index, content)

Description:

  • Set a tab content

Parameters:
Name Type Description
t jQuery

Tabs
index number | string

Tab index or tab data-key
content string

HTML content

showTab(t, id, show)

Description:

  • Show/hide a tab in a tabs and ensure to activate a visible tab

Parameters:
Name Type Description
t jQuery

Tabs
id string

Tab ID
show boolean

False to hide the tab

showTabs(t, fn, cls)

Description:

  • Show/Hide empty tabs and ensure to activate a non-empty tab

Parameters:
Name Type Description
t jQuery

Tabs
fn function

Optional function to test if a tab is visible
cls string

Class 'hidden' or 'empty' to hide the tab
Returns:

True if the tabs is visible = contains something visible

spanIcon(p)

Description:

  • Icon button

Parameters:
Name Type Description
p Object

Optional parameters

Properties
Name Type Description
name string

Action name
title string

Title as tooltip
placement string

Tooltip placement (default 'bottom')
icon string

Icon name (default 'star')
click function

Handler
right boolean

True to pull on right side

success(h)

Description:

  • Simple info

Parameters:
Name Type Description
h

Content

tabBadge(tab, val)

Description:

  • Add/Replace a badge counter to tab

Parameters:
Name Type Description
tab

Tab href or any tab content element
val

Badge value (no badge if null)

tabs(params)

Description:

  • Simple tabs

Parameters:
Name Type Description
params Object

Parameters { id, selected, vertical, cls, ondrop, tabs }

Properties
Name Type Description
id string

Tab ID
selected number

Selected tab index (default 0)
vertical boolean

Vertical tabs?
underline boolean

Underlined tab style
cls string

Optional class to add
ondrag function

Optional handler function(li,cbk) to allow drag
ondrop function

Optional handler function({li, from, to\ }, cbk) to allow drop
tabs Array

Tabs options { title, icon, content, hidden, click, key, data }
overflow Object

no wrap tabs, overflow hidden tabs in a dropdown

Properties
Name Type Description
show string

bring hidden tab visible at 'first' or 'last' position (always triggers a ui.tab.click)
icon string

dropdown icon (default simple caret)

tooltip(e, title, placement, html)

Description:

  • Add a tooltip to element

Parameters:
Name Type Description
e

Element
title

Text or html
placement

Optional, default 'bottom'
html

HTML Title?

warning(h)

Description:

  • Simple warning

Parameters:
Name Type Description
h

Content