Webanizr Logo
Open / sluit menu
Module multiItemForm

Last change: July 6, 2020

Current version: 1.10.9

The multiItemForm is almost more a tool then a module. It enables users to add, edit and remove multiple items in a list.

syntax

webanizr.collect('multiItemForm', parameters, callback)

parameters

The multiItemForm module accepts the following parameters:

id__list (required)

The id of this specific list. You cannot add two mulitItemForms to a page with the same ids.

id__listwrapper (required)

The id of the DOM element in which the list should be shown.

id__elementtemplate (required)

The id of the html template in which the design of a single element is defined. In this design there should be a wrapper element to which the form fields can be added.

id__addbutton (optional)

The id of the DOM element that will function as the add button. If this parameter points to a DOM element, a click on this element will result in a new element in the list.

id__savebutton (optional)

The id of the DOM element that will function as the save button. If this parameter points to a DOM element, a click on this element will call the module to gather all details on the cerated elements and send the data to the next module using the callback.

params__form (required)

Parameters for creating the form in each list element. It is a JSON object containing the folling parameters:

params__form.url__model (required when params__form.model__form not is set)

The url to the model in which the form for a single element is defined.

params__form.model__form (required when params__form.url__model not is set)

The form model for a single element. The configuration part of the model may be ommitted.

params__form.class__dom (required)

The classname of the DOM element within the template where the form should be build in. It has the same function as the id__dom parameter in the buildForm module. Since the template is used multiple times an id cannot be used since it would create multiple equal ids. Hence a classname is used.

class__deletebutton (optional)

The classname of the DOM element within the template that should be used as a delete button. A click on this element will result in directly removing the element it is in. Since the template is used multiple times an id cannot be used since it would create multiple equal ids. Hence a classname is used.

class__copybutton (optional)

The classname of the DOM element within the tempate that should be used as a copy button. A click on this element will copy the item and add the copied item below the item that is being copied. Since the template is used multiple times an id cannot be used since it would create multiple equal ids. Hence a classname is used.

max__nritems (optional)

The maximum number of elements allowed in the list.

values__list (optional)

A list of inital elements to show. This should be an arrray which key-value lists in it. Each key-value list represents the values for that given element.

type__placement (optional)

Tells the modue how to add the form to the dom element. There are two options:

  • add: adds the form add the bottom to the exists content (default)
  • replace: replaces the current content with the form

If this parameter is ommitted, the default option is used.

callback__finishedbuild (optional)

The callback function that is called when the form is competly build.

The regular callback function is called when the form is saved.

newitem__callback (optional)

The callback function that is called every time a new item is added. As data the id of the new element is given.

deleteitem__callback (optional)

The callback function that is called every time an item is deleted. As data the id and values of the deleted item are given.

copyitem__callback (optional)

The callback function that is called every time an item is copied. As data the id and values of the new item are given.

Since the copy function creates a new item, the newitem__callback is also called.

labels__values (optional)

See the documentation of labels__values in the formValues plugin.

callback

The callback function where the information is send to. The data is a list of JSON objects where each object contains the form values of a element from the list.

variables

The multiItemForm creates and updates the following variables:

nritems__listid (where list id is the value of the parameter id__list)

In this variable the current number of element is stored. It is updated every time the number of items in the list changes.

demo

https://cdn.cpmodules.webanizr.com/demo/call-api/index.html

Changelog

  • July 6 2020, 1.10.9 - Updated dependencies on buildForm and formActions
  • December 2, 2019: 1.10.8 - removed a console log
  • November 21, 2019: 1.10.7 - counter for items works again
  • November 18, 2019: 1.10.5 - replaced all element.querySelectors with document.querySelectors
  • November 18, 2019: 1.10.3 - critical bugfix
  • November 18, 2019: 1.10.2 - check function in showTemplate is used before adding forms to the template
  • November 15, 2019: 1.10.1 - fixed bug with date fields splitting up value sets
  • November 13, 2019: 1.10.0 - support for labels__values
  • September 27, 2019: 1.9.2 - callback for new item is now called after the form of the new item has been build
  • August 21, 2019: 1.9.1 - formvalues for new items are now also available as mustache variables