bootstrap4

Simplicite.UI.View. bootstrap4

new bootstrap4(app, engine, view)

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

Parameters:
Name Type Description
app

Business application

engine

Main UI controller

view

View engine

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, 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

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

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, 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

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

fieldDatePicker(elt, type, lang, dateformat, startDate, rdg)

Description:
  • Datetime picker

Parameters:
Name Type Description
elt

Button to attach with picker

type

Field type TYPE_DATE|DATETIME|TIME

lang

User language

dateformat

Date format

startDate

Optional start date

rdg

Optional rendering limit Y|M|D|H|I|S

fieldDatePickerSearch(f, filter, id, options)

Description:
  • Datetime picker for search

Parameters:
Name Type Description
f

Object field

filter

Field filter YYYY-MM-DD HH:MI:SS or YYYY-MM-DD

id

input id

options

Options { searchby:(on list column), position:(default "bottom-left") }

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)

Description:
  • Create an input group with addons actions

Parameters:
Name Type Description
inp

Input

addons

Array of $ or actions { name, label, icon, plus, cbk }

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

readSearch(ctn, o, noRemove)

Description:
  • Read the search form into object filters

Parameters:
Name Type Description
ctn jQuery

Form container

o Simplicite.Ajax.BusinessObject

Object

noRemove boolean

True to keep filter with default '%'

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 }

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 }

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