Widget

Simplicite.UI.View. Widget

new Widget(app, ui, view)

Description:

  • Common widgets

Parameters:
Name Type Description
app Simplicite.Ajax

Ajax service
ui Simplicite.UI.Engine

Main UI controller
view Simplicite.UI.View.Main

View services

Members

PALETTES

Description:

  • Predefined palettes

    • Base
    • Pastel
    • Strong
    • Light
    • Bright
    • Mars
    • Sea
    • Berry
    • Fire
    • Choco

Predefined palettes

  • Base
  • Pastel
  • Strong
  • Light
  • Bright
  • Mars
  • Sea
  • Berry
  • Fire
  • Choco

Methods

actionBar(list, alignRight)

Description:

  • Action bar

Parameters:
Name Type Description
list Array.<jQuery>

Array of buttons (plain or plus)
alignRight boolean

pull on the right side of container ?
Returns:

div.actions

actionItems(o, rowId, list, plus, options)

Description:

  • Convert actions to buttons array

Parameters:
Name Type Description
o Simplicite.Ajax.BusinessObject

Business object
rowId string

Optional rowId on form/row
list Array.<Object>

List of actions as plain buttons
plus Array.<Object>

List of actions as 'plus' button
options Object

Options

Properties
Name Type Description
alignRight boolean

true for right side
minified boolean

true to move labels in tooltips
dropUp boolean

true to drop up the 'plus' popup
plusFirst boolean

true to put the plus button on first position
grouped boolean

true to group plain buttons per type (print, crosstab, treeview, placemap, associate)
Returns:

jQuery items

animate(ctn, div, type, cbk)

Description:

  • Replace the current content with another one

Parameters:
Name Type Description
ctn jQuery

container
div jQuery

new content to load in container
type string

optional animation: slide 'left, slide 'right' or 'opacity'
cbk function

optional callback when the animation is terminated

avatar(data)

Description:

  • Build an avatar image

Parameters:
Name Type Description
data Object

{ userId, image (usr_image_id) } or { login, firstname, lastname, picture (full usr_image_id document) }
Returns:

.avatar

badge(p)

Description:

  • Create a badge

Parameters:
Name Type Description
p string | Object

value or { name, value }
Returns:

div.badge

barOverflow(ctn, options)

Description:

  • Transform a bar with overflow button for invisible items in a dropdown

Parameters:
Name Type Description
ctn jQuery

horizontal bar container (ul or div, with a limited height) with items (li/a, button or div)
options Object

Overflow options

Properties
Name Type Description
show string

bring hidden item visible at 'first' or 'last' position when clicked (always trigger a 'ui.bar.click' on bar)
icon string

icon button (default fas/caret-square-down)
count boolean

count hidden items in icon (dafault false)
Returns:

.bar-overflow + caller must trigger 'ui.resize' when displayed to fit size

breadcrump(items, size, cbk)

Description:

  • Build a breadcrump 'first / ... / last ones'

Parameters:
Name Type Description
items Array.<string> | Array.<Object>

list of items : string or { label }
size number

size limit
cbk function

click handler on item
Returns:

ol.breadcrumb

calculator(input, cbk)

Description:

  • Launch a simple calculator on input

Parameters:
Name Type Description
input Object

form input
cbk function

callback(result)
Returns:

input

changePwd()

Description:

  • Simple dialog to change the user's password

charCounter(inp, options)

Description:

  • Create a characters counter on input field

Parameters:
Name Type Description
inp string | jQuery

input or textarea
options Object

Options

Properties
Name Type Description
max number

Max length of input (default 100)
position string

top or bottom (default bottom)
align string

left or right (default left)
toggle boolean

true to show/hide on focus/blur

circularProgressBar(options)

Description:

  • Circular progress bar

Parameters:
Name Type Description
options Object

{ background, color, percent, duration, radius, width }

Properties
Name Type Description
percent string

percent value 0..100
background string

center background color
color string

center text color
color1 string

circle color
color2 string

circle active color
duration number

animation duration in ms (default 2000)
radius number

circle radius in px
width number

circle line width in px
text string | $

optional center content (""=empty, default='n%')
bar string

optional bar selector to update value

completion(inp, limit, search, select, disp, options)

Description:

  • Bind a completion to input

Parameters:
Name Type Description
inp jQuery

input or null
limit number

max size of results (0 = no limit)
search function

search service(cbk)
select function

optional callback(data) on picking (click or enter)
disp function

optional callback to display a result
options Object

options

Properties
Name Type Description
autoselect boolean

auto-select the single result on blur or enter (default false)
Returns:

input

completionSocial(textarea)

Description:

  • Bind a completion to textarea (substitute @login)

Parameters:
Name Type Description
textarea jQuery

social textarea

docUploader(ctn, list, options)

Description:

  • Multi-files rendering + upload

Parameters:
Name Type Description
ctn jQuery

container
list Array

list of documents { id, name }
options Object

options

Properties
Name Type Description
name boolean

component name
object Object

business object
field Object

doc field with fileAccept: string or array of permitted extensions and MIME types
upload boolean

upload files allowed?
download boolean

download documents?
preview boolean

preview documents?
remove boolean

remove documents?
show boolean

'list' default or 'boxes'
toggle boolean

true to toggle list|boxes
min boolean

minimum files (0 = not required)
max boolean

total of permitted files (0 = no limit)

editMarkdown(md, cbk)

Description:

  • Edit a markdown text in a dialog with a preview area

Parameters:
Name Type Description
md string

Initial value
cbk function

Callback with new value

getBase64Image(img, mime)

Description:

  • Convert image to base64 (using a canvas)

Parameters:
Name Type Description
img Object

DOM image
mime string

mime type (ex: image/jpeg)
Returns:

string = image BASE64 encoded

iconPicker(input, embedded, selected, onSelect)

Description:

  • Icon picker

Parameters:
Name Type Description
input jquery

input to set with selected icon
embedded boolean

only content or full dialog
selected string

optional selected icon
onSelect function

optional callback(icon)

news(ctn, list, options)

Description:

  • Display the news

Parameters:
Name Type Description
ctn jQuery

container to display articles (null to display a popup or a ticker bar)
list Array.<Object>

news list from WebNews object or or { title, description, date, image }
options Object

optional parameters

Properties
Name Type Description
template string

HTML template with classes to fill .news-title .news-date .news-desc .news-img (default Simplicite.UI.Globals.news.template)
popup boolean

true to get only news to display (on logon) in a modal dialog
ticker boolean

true to get only news to display on a footer ticker

notepad(options)

Description:

  • Advanced notepad with activities

Parameters:
Name Type Description
options Object

options

Properties
Name Type Description
id string

widget id
data Object

Content { checks:[{ title, list:[check,text]}], activities:[{ date, author, text }] }
readonly boolean

Read only or editable by authors
popup boolean

Allows to open a popup to enlarge contents
split boolean

split checklists and comments in 2 columns
autosplit number

minimal width of container to auto-split
height number

Optional max height
change function

optional callback({act,event}) when data has changed

palettePicker(params)

Description:

  • Palette of colors picker

Parameters:
Name Type Description
params Object

Parameters

Properties
Name Type Description
palette string

optional selected palette
pick function

optional pick handler(palette)
dropup boolean

true to dropup (default dropdown)
inline boolean

true to inline the palettes (default display a dropdown button)
label string

optional label dropdown button (default: selected palette name)
icon string

optional icon of dropdown button

pillbox(div, data, limit, search, disp, lookup, onAdd, onRemove, onCreate, onOpen)

Description:

  • Pillbox control with completion

Parameters:
Name Type Description
div Object

container
data Object

pre-selected data [{id,label,del,open}]
limit number

max size of search results (0 = read only)
search function

optional service(value, cbk) to search data with the input value
disp function

to display completion row and add pillbox data {id,label}
lookup function

optional service(cbk(id,label)) to display a lookup to add an item
onAdd function

optional callback(id,cbk) when item is added, set to null to disable adding
onRemove function

optional callback(id,cbk) when item is removed, set to null to disable deletion
onCreate function

optional callback(val,cbk(id,label)) when item is created, set to null to disable creation
onOpen function

optional callback(id) to open the object form
Returns:

pillbox

postProgress(ctn, e, params)

Description:

  • POST/UPLOAD dialog

Parameters:
Name Type Description
ctn $

container
e Object

progress event from xhr
params Object

{ id, label, after, background }

scanCode(options)

Description:

  • Scan a QRCode/barcode

Parameters:
Name Type Description
options Object
Properties
Name Type Description
width number

scanner width (default 350)
height number

scanner height (default 0)
scanWidth number

scan zone width (default 250)
scanHeight number

scan zone height (default 250)
aspectRatio number

scanner aspect ratio height (default 1.0)
title string

dialog title
applyLabel string

apply label
retryLabel string

retry button title
title string

dialog title
container jQuery

container to inline in (no dialog in this case)
id jQuery

DOM id (got from container if a container is set, defaults to 'scanner')
onload function

callback(scanner) when loaded
onapply function

callback(text) when scan is done
onretry function

callback() when scan is resumed
oncancel function

callback() when scan is cancelled
onclose function

callback() after closing

scratchPad(options)

Description:

  • Simple scratch pad

Parameters:
Name Type Description
options Object
Properties
Name Type Description
width number

result image width (default 800)
height number

result image height (default 600)
title string

dialog title
inline boolean

inline pad
image Image | jQuery

source image
onload function

callback(pad) when loaded
update function

callback(dataURL) when signature has changed

slider(p)

Description:

  • Build a slider

Parameters:
Name Type Description
p Object

slider parameters

Properties
Name Type Description
id string

input id
name string

input name
min number

min value
max number

max value
step number

slider step
value number

slider value
width string

optional input width
height string

optional input height
showValue boolean

insert the value?
onchange function

optional 'change' handler (on slider release)
oninput function

optional 'input' handler (on slider move)
disabled boolean

false to disable the slider
round boolean

round or square?
thin boolean

thin input?
Returns:

div.slider

starSlider(p, disabled)

Description:

  • Build a star slider (rate rendering)

Parameters:
Name Type Description
p Object

slider parameters

Properties
Name Type Description
name string

input name
size number

nb of stars, server values goes from 1 to size (0 = no star checked)
value number

slider value
disabled boolean

false to disable the slider
Returns:

div.star-slider

switchButton(p, checked, disabled, round)

Description:

  • Build a switch button on/off

Parameters:
Name Type Description
p Object

button parameters

Properties
Name Type Description
id string

optional input id
name string

input name
value string

input initial value (default "1")
onchange function

optional 'change' handler
checked boolean

on/off ?
disabled boolean

false to disable the switch
round boolean

round or square?
Returns:

label with a checkbox and a slider

takePicture(options)

Description:

  • Open a dialog to take a picture

Parameters:
Name Type Description
options Object
Properties
Name Type Description
title string

Dialog title
facingMode string

video facing mode suggestion (selfie = 'user' or back camera = 'environment', not applicable if device has only one camera)
videoWidth number

video width (use the media width by default without zoom)
imageWidth number

result image width (use the media width if unspecified)
imageHeight number

result image height (same video aspect ratio if unspecified)
Returns:

Promise with data URL 'data:image/png;base64,...'

takeSignature(options)

Description:

  • Take a signature on pad

Parameters:
Name Type Description
options Object
Properties
Name Type Description
width number

result image width (default 400)
height number

result image height (default 200)
title string

dialog title
inline boolean

inline pad
image Image | jQuery

source image
onload function

callback(pad) when loaded
update function

callback(dataURL) when signature has changed

tickerBar(params)

Description:

  • Display a ticker bar

Parameters:
Name Type Description
params Object

Optional parameters

Properties
Name Type Description
position string

position selector (default 'body')
list Array

list of news or { title, description }

toast(options)

Description:

  • Toast dialog

Parameters:
Name Type Description
options Object

text or { level, content, position, align, duration }

Properties
Name Type Description
level string

'info' (default), 'success', 'warning', 'error'='danger'
content string

content message
position string

'top' (default) or 'bottom'
align string

'left' 'center' (default) or 'right'
duration number

animation duration in ms (default 3000), -1 = infinity
undo boolean

add a UNDO button ?
pinable boolean

add a push-pin button ?

toastLoading(title, filename, url, p)

Description:

  • Toast during the export loading

Parameters:
Name Type Description
title string

toast title
filename string

file name to download
url string

url to load
p Object

Options

Properties
Name Type Description
abort string

optional URL to call when the user abort the loading
async string

optional async URL which launch the export on server side and poll to get the response

waitdlg()

Description:

  • Wait dialog box

Returns:

div.waitdlg

(inner) actionItem(a, o, rowId, click, minified)

Description:

  • Build an action control

Parameters:
Name Type Description
a Object

action metadata
o Simplicite.Ajax.BusinessObject

object
rowId string

optional rowId for form/row action
click function

click handler
minified boolean

true to move the label in a tooltip
Returns:

button or li for 'Plus' button