# inputEx - SerializeField Usage

## Basic SerializeField creation

var field = new inputEx.SerializeField({ parentEl: 'container1', label: 'Your name', description: 'Please enter your name', subfield: { type: 'group', fields: [ { name: 'firstname', typeInvite: 'firstname' }, { name: 'lastname', typeInvite: 'lastname' } ], required:true } }); var el = YAHOO.util.Dom.get('container1'); var button1 = inputEx.cn('button', null, null, "SetValue with '{\"firstname\":\"Jimi\",\"lastname\":\"Hendrix\"}'"); el.appendChild(button1); YAHOO.util.Event.addListener(button1, "click" ,function() { field.setValue('{"firstname":"Jimi","lastname":"Hendrix"}'); }); var logDiv = inputEx.cn('div', null, null, "Log :"); el.appendChild(logDiv); field.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv.appendChild(inputEx.cn('br')); });

## XML serialization

There is an issue because ObjTree needs only 1 root element :

var field = new inputEx.SerializeField({ parentEl: 'container2', label: 'Your name', description: 'Please enter your name', serializer: 'xml', subfield: { type: 'group', fields: [ { type: 'group', name: 'person', fields: [ { name: 'firstname', typeInvite: 'firstname' }, { name: 'lastname', typeInvite: 'lastname' } ] } ] } }); var el = YAHOO.util.Dom.get('container2'); var button2 = inputEx.cn('button', null, null, "SetValue"); el.appendChild(button2); YAHOO.util.Event.addListener(button2, "click" ,function() { var xml = String.fromCharCode(60)+'?xml version="1.0" encoding="UTF-8" ?'+String.fromCharCode(62)+String.fromCharCode(60)+'person'+String.fromCharCode(62)+String.fromCharCode(60)+'firstname'+String.fromCharCode(62)+'Jimi'+String.fromCharCode(60)+'/firstname'+String.fromCharCode(62)+String.fromCharCode(60)+'lastname'+String.fromCharCode(62)+'Hendrix'+String.fromCharCode(60)+'/lastname'+String.fromCharCode(62)+String.fromCharCode(60)+'/person'+String.fromCharCode(62); field.setValue(xml); }); var logDiv = inputEx.cn('div', null, null, "Log :"); el.appendChild(logDiv); field.updatedEvt.subscribe(function(e,params) { var value = params[0].replace( new RegExp(String.fromCharCode(60),"g") , '<' ).replace( new RegExp(String.fromCharCode(62),"g") , '>' ); logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv.appendChild(inputEx.cn('br')); });