<![CDATA[
<div gjl-id="gjl.formline" gjl-config="{{formlineConfig}}"></div>
]]>
// subscribe to swithChange event
// - show inputfield and warningbox when toggle is set "on"
// - hide inputfield and warningbox when toggle is set "off"
gj.event.subscribe('switchChange', function(val) {
if(val.id === 'switchWithInputdemo') {
$('#switchWithInputdemo_input').css('display', val.state ? 'block' : 'none' );
$('#switchWithInputdemo_postField').css('display', val.state ? 'block' : 'none' );
if(val.state){
gjl.warningbox.open('switchInputWarningbox');
}else {
gjl.warningbox.close('switchInputWarningbox');
}
}
});
<![CDATA[
<div gjl-id="gjl.formline" gjl-config="{
'id': 'formlineSelectDemo',
'label': 'Formline with Select Demo',
'fields': [
{
'fieldtype': 'select',
'fieldID': 'formlineSelectFieldDemo',
'selected': '0',
'config': {
'0': 'velg',
'1': 'Ford',
'2': 'Volvo',
'3': 'Toyota'
}
}
]
}"></div>
]]>
<![CDATA[
<div id="vdomSelect"></div>
]]>
// initialize the formline
gjl.formline.init($('#vdomSelect'), {
'id': 'vdomSelect',
'label': 'Label vdom select',
'fields': [{
'fieldtype': 'vnode',
'fieldID': 'vdomSelect_select',
'vnodeFunc': gj.vdom.createFormlineConfig(function () {
return gj.vdom.createSelect({
'id': 'vdomSelect_select',
'gj-store-key': 'testData.selected'
}, gj.store.getSelectArray('testData.selectValues'), gj.store.get('testData.selected'));
})
}]
});
// store that the example runs with
gj.store.setData({
'testData': {
'selectValues': {
'0': 'velg',
'1': 'Meat',
'2': 'Fish',
'3': 'Fruit'
},
'selected': '2'
}
});
<![CDATA[
<div gjl-id="gjl.formline" gjl-config="{
'id': 'mybuttontest',
'label': 'Demo button',
'fields': [
{
'fieldtype': 'button',
'fieldID': 'mybuttontest_field',
'buttonText': 'My demo button',
'config': {
'onclick': 'myfunction();'
}
}
]
}"></div>
]]>
<![CDATA[
<div gjl-id="gjl.formline" gjl-config="{
'id': 'mySliderFormline',
'label': 'My formline with slider',
'fields': [
{
'fieldtype': 'slider',
'fieldID': 'mySliderFormline_slider',
'config': {
'min' : '1000',
'max' : '100000',
'step' : '1000',
'value' : '1000'
}
}
]
}"></div>
]]>
<![CDATA[
<div gjl-id="gjl.formline" gjl-config="{
'id': 'mySliderFormline2',
'label': 'My formline with slider 2',
'fields': [
{
'fieldtype': 'slider',
'fieldID': 'mySliderFormline2_slider',
'config': {
'min' : '0',
'max' : '500',
'step' : '15.5',
'value' : '50',
'buttons' : true,
'sliderButtonDownAriaLabel' : 'click for move slider down',
'sliderButtonUpAriaLabel' : 'click for move slider up',
'config' : {
'onchange' : 'console.error(\'value on slider: \' + this.value);'
}
}
}
]
}"></div>
]]>