Name
_instance
Type
_instance
Synopsis
Add or remove defined instances to a form
Description
With _instance you can define a part of a form as an instance that can be added or removed by the user (in a way add more rows to submit more information).
How it works
_instance holds a list of parameters that define the usage of the instance.
First you define what template on a page it needs to edit (template-parent) and what parameter of that template needs to be edited (name).
The idea is that the name attribute will hold multiple templates. That template is defined with the template parameter.
If you leave out anything else, FlexForm will render the instance based on the default Wikibase Solutions setup. (default settings listed with the parameters).
All the other parameters are described below.
Parameters
template-parent
Main template to edit on a page
name
Name of the parameter to edit with the template-parent. Fields inside the instance cannot have the same name as this parameter.
template
Name of the template to put inside parameter name.
default-content
Allows to fill the instanced textarea with default content. Note: When a page contains text default content will always be overwritten.
button-add
Main class for the button add instance. This is a class name that triggers the add instance. default WSmultipleTemplateAddAbove You can set this to none to not add this option at all
button-add-extra
Extra class that can be added to the button for styling default wsform-instance-add-btn If you want no extra class then use button-add-extra="none"
button-remove
Main class for the button remove instance. This is the class name that triggers the remove instance.
default WSmultipleTemplateDel
You can set this to none to not add this option at all
button-remove-extra
Extra class that can be added to the button for styling
default wsform-instance-remove-btn
If you want no extra class then use button-remove-extra="none"
button-move
Main class for the move instance button. This is the class name that trigger a move instance.
default ws-sortable-handles
You can set this to none to not add this option at all
button-move-extra
Extra class that can be add to the button for styling
default wsform-instance-move-handle
If you want no extra class then use button-move-extra="none"
add-button-on-bottom
Button below instance to add an add button. Value is text in the button
Use a value of "none" to disable this button
default empty
button-on-bottom-class
Class for the button below the instance. Defaults to WSmultipleTemplateAddAbove
wrapper-instance
div wrapper for the defined instance.
default WSmultipleTemplateMain
wrapper-main
main div wrapper for all instances
default WSmultipleTemplateMain
wrapper-main-extra
Extra class to add styling to the instances.
default wsform-instance-record
instance-storage
class for the textarea to store instance information
default WSmultipleTemplateField
instance-list
Class name for the wrapper for the list of instances
default WSmultipleTemplateList
format
Since version 2.1. format will default to "wikitext", but it also support JSON. When set to JSON, the default-content option should not be wikitext template variables, but a json object. Also, when submitting a form, it will not be submitting template variables, but a JSON object. You can use this together with the JSON options in _create and _edit.
Example (wikitext format)
<form action="get" restrictions="lifted">
<_edit target="{{PAGEID}}" template="Log" formfield="Hours spent today" />
<_instance
template-parent="Log"
template="Hours spent"
name="Hours spent today"
>
<div class="test">
<input type="text" name="Task" placeholder="Task" />
</div>
</_instance>
<input type="submit" />
</form>
Example (json format)
<form action="get">
<_edit target="{{PAGEID:{{FULLPAGENAME}}/Target }}" format="json" template="jsonk|Awards" formfield="Items" />
<_instance
name="Items"
format="json"
>
<div>
<input type="number" name="rank" placeholder="rank" />
<input type="text" name="winner" placeholder="winner" />
</div>
</_instance>
<input type="submit" />
</form>
Note:
Using instances default content together with Tokens and a SMW query
When using this combination, usually the value of a token has been saved and is put inside the default content. When rendering the instances, FlexForm will try to do a query to look-up the label that is attached to the value of the token.
Example : Say the Token-field is used to find certain pages with certain Semantic properties. In most cases the token visually shows the Display title of a query while the value of the token is the exact page Title and that is also the value that will be stored.
When rendering instances with previous saved page titles, FlexForm Tokens does not have the appropriate label to show for the token, in this case the Displaytitle. FlexForm will then analyze the SMW query attached to the token and try to get the SMW property as a label. In this case, the Displaytitle.
Styling
The instances can be styled using CSS. All classes defined are described on this [page] You can also do other things with styling and instances. As of FlexForm version 2.2.8 a class ff-instance-edit is included an can be applied. Let's take Example 1 and add a label to the text input box :
Example (wikitext format) add a label
<form action="get" restrictions="lifted">
<_edit target="{{PAGEID}}" template="Log" formfield="Hours spent today" />
<_instance
template-parent="Log"
template="Hours spent"
name="Hours spent today"
>
<div class="ff-instance-edit">
<label for="Task">Task</label>
<input type="text" name="Task" placeholder="Task" />
</div>
</_instance>
<input type="submit" />
</form>
Links
Tutorial on Instances : https://wikibase-solutions.com/developer-logs/flexform-instances?WSLanguage=en
