===== Web ===== {{ :web:pnotify.custom.min.zip |}} ==== KG's code ==== === Sample Code === Sample code: 'modal', 'th-title'=>'title veld voor th','col'=>'col-12 col-sm-4', 'label-extra'=>'kort label, zonder spaties', 'placeholder'=>'Vul een ID in', 'attributes'=>array('pattern'=>'^[a-zA-Z0-9_]+$'),'validation'=>array('notempty-message'=>'Je moet een ID invullen','regexp-message'=>'ID mag geen spaties of speciale tekens bevatten: gebruik enkel letters, cijfers en underscore _')); $recfields[1]['algemeen']['omschrijving*'] = array('thdata'=>array('orderable'=>'false'), 'col'=>'col-12 col-sm-8', 'label_extra'=>'langere omschrijving, mag spaties bevatten', 'placeholder'=>'Vul een omschrijving voor de reis in'); $recfields[1]['algemeen']['startdatum'] = array('type'=>'daterange_start','data'=>array('daterange_stopid'=>'reis_einddatum'), 'schrijf_datum_options'=>'dag_kort,maand_voluit', 'col'=>'col-6 col-md-4', 'placeholder'=>'Startdatum'); $recfields[1]['algemeen']['einddatum'] = array('type'=>'daterange_stop', 'col'=>'col-6 col-md-4', 'placeholder'=>'Einddatum'); $recfields[1]['munt']['munteenheid'] = array('col'=>'col-8 col-sm-4 col-lg-3', 'label_extra'=>'(lijst)', 'placeholder'=>'EUR'); $recfields[1]['munt']['muntsymbool'] = array('col'=>'col-4 col-sm-2 col-lg-2', 'label'=>'symbool'); $recfields[1]['munt']['wisselkoers'] = array('type'=>'float' ,'col'=>'col-12 col-sm-6 col-lg-4', 'placeholder'=>'1.00'); $tableoptions[1] = array('data'=>array('order'=>'[[3,"desc"]]'); $formoptions[1] = array('delete'=>true)); ?> === Table === * ''$recfields[//formnr//][//tabname//][//label//] = array(...)'' * ''//formnr//'': number of form (normally ``1``, but can be ``2``, ``3``, etc. if multiple database tables are used) * ''//tabname//'': name of group of columns to display * ''//label//'': th-field (normally this is the dbcolumnname without the name of the dbtable, e.g. ''naam_lokale_taal'' for ''hotel_naam_lokale_taal'') * ''array(...'' * ``type=>`` * ``text``: default (i.e. not needed) * ``modal``: adds link to modal (``data-target="#modalDetails-//formnr//"``) * ``date``: adds 'data-order=' to and uses ''schrijf_datum'' for value * additional options: ''schrijf_datum_options'' * ``float`` * ``th_title``: title attribatue for th-tags * ``th_data``: === Form === * ``$recfields[//formnr//][//tabname//][//label//] = array(..)`` * ``//formnr//``: number of form (normally ``1``, but could be ``2``, ``3``, etc. if multiple forms are needed) * Note: ensure ``$dbtable[//formnr//]`` and ``$record_id[//formnr//]`` is defined for all forms (typically at top of php page) * ``label``: see above (in section Table) * additional options: * ``label`` ends with *: required field (validation.io not-empty will be triggered) * ``label`` starts with [: new row in form * ``label`` starts with _: ?? * ``array(...`` * ``col=>//bootstrap grid//`` * ``label=>//label//`` (default=label as defined in $tablefields) * if ``label`` ends with ``*``, this field is required (``required`` will be added as attribute) * ``label_extra=>//extra information//`` extra info after label (in -text) (string, delimiter=space) * ``placeholder=>//placeholder//`` * ``attributes=>//attributes//`` additional attributes for input, eg. ''required'' (string, delimiter=space) * ``type=>...`` * ``text``, ``number```, ``radio``, ``radio_from_array``, ``select``, ``daterange_start``, ``daterange_stop`` * ``options=>//options//`` additional options, eg. ''no-copy'' (array) * ''data-trigger="//event//"'': will trigger //event// after updating value with ''val()'' * This allows for additional processing, e.g. updating another field using ''data-trigger="change"'', which can be captured by ''$("//element//").on('change', function() { ...'' * ``.readonly``: field will not be sent to ajax/process.php for updating * ''.hidenew'': field will not be sent to ajax/process.php for updating when #modalId == -1 (new record) * ''data-fieldformatting='//JSON-object//''': return value will be reformatted in ajax/process.php * valid options: ''strftime'', bv. ''data-fieldformatting='{"strftime":"%a %e %b %Y"}''' === Plugins === * pNotify: https://sciactive.github.io/pnotify/ * Changed code to for Bootstrap 4 (assumption: [[https://themify.me/themify-icons|Themefy Icons]] loaded): {{ :web:pnotify.custom.min.zip}} * Add ''PNotify.prototype.options.styling = "bootstrap4";'' to top of Javascript