Setting the type of property in a component dialog

To set the type of a property created or modified through the component dialog, add a hidden field named {{propertyName}}@TypeHint to the dialog. In this way, the SlingPostServlet would know what to do:

<!-- Classic UI -->
<__fieldName__TypeHint
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./{{propertyName}}@TypeHint"
value="{{DesiredType}}"
xtype="hidden"/>

<!-- Touch UI -->
<__fieldName__TypeHint
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/hidden"
ignoreData="true"
value="{{DesiredType}}"
name="./{{propertyName}}@TypeHint"/>
__fieldName__ , {{propertyName}} and {{DesiredType}} should be properly replaced.
A code snippet with true values can be found here.

For the full running example, please visit https://github.com/daniel-lima/samples-aem-component-property-type.

Source: http://danielhalima.com/aem/2017/04/23/setting-the-type-of-a-property-in-a-component-dialog/