Custom controls within Edit Item
Within the DataEditor xml it was already possible to include custom controls, but as of Smartsite 7.8 it is also possible to include a custom control for a specific contenttype field.
This article explains how and uses an example of a custom control for a CTSpecificVarX field which is used to store one or more primary keys for a certain table (in this case the Tasks table).
Selecting the records is achieved by clicking the select button, which opens the library action for a certain table (again, the Tasks table in this case).
cms:control
To include a custom control for a contenttype field, you first need to add the CTFP cms:control to the field and set it's value to custom.
xf:viewdata
When generating the DataEditor xml based on a ContentType, the cms:control CTFP (if present) is used to determine the control type.
If the cms:control CTFP is set to custom, the xf:viewdata CTFP must be used to specify the XForms + html definition of the control.
Within the example below, the xf:viewdata specifies a customized listinput control (the XForms + html definition is very similar to the itemlistinput control).
The select button includes a json, which specifies the actioncode of the (library) action which needs to be opened.
| XML |
Copy Code
|
|---|---|
<div class="xforms-uc xforms-cc" xmlns="http://www.w3.org/1999/xhtml">
<xf:group ref="cms:tasks" class="itemlistinput-control" id="xf_tasks" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events">
<xf:label>Tasks</xf:label>
<xf:repeat nodeset="cms:list/cms:item" class="itemlistinput-items">
<span class="listinput-content-item">
<xf:output ref="@caption" appearance="exf:none" /> (<xf:output ref="." appearance="exf:none" />)</span>
<xf:trigger class="btn icon_sys14_btn icon-sys14-delete xforms-block-ui">
<xf:label />
<xf:hint>Verwijder</xf:hint>
<xf:delete ev:event="DOMActivate" at="1" nodeset="." />
</xf:trigger>
</xf:repeat>
<div class="itemlistinput-addbox">
<xf:trigger class="btn icon_sys22 icon-sys22-contenttree">
<xf:label>Selecteer tasks</xf:label>
<xf:action ev:event="DOMActivate">
<xf:message level="sms:startaction">{ field: "tasks", action: "linklistinput_customlibrary", actioncode: "mgr-TASKS_DATAEDITOR"}</xf:message>
</xf:action>
</xf:trigger>
<xf:trigger class="small-btn icon_sys22 icon-sys22-delete">
<xf:label />
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="cms:list" value="''" />
</xf:action>
</xf:trigger>
</div>
</xf:group>
</div>
|
|
Notice that the specified XForms + html definition must be self-contained, which means you need to specify the appropriate namespace(s) and namespace prefix declarations.
cms:inheritcontroltype
Because the above example uses a customized listinput control, you need to specify the control inherits from the listinput.
To do so, add the cms:inheritcontroltype CTFP and set it's value to listinput.
(The listinput control contains OnAfterLoad and OnBeforeSave handling, which needs to be executed to be able to store and display the underlying set of primary keys.)
cms:lookupquery
The data that is stored is just a list of primary keys. To be able to display usefull information of the records that are included, you need to specify the cms:lookupquery CTFP.
This lookupquery is used to expand the list of primary keys with "titles".
This mechanism uses the fixed field names "Nr" and "Title". If the underlying table uses different column names, just use an " as Title" (and " as Nr" when needed) clause to work around that.
Example: "select Nr, Subject as Title from Tasks"