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}]

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