Creating custom aem form field with mandatory field

Question

I am trying to create a custom form field using guidetextbox (Text box) as base. Before putting my custom logic, I created a folder for the component and inside I put .content.xml as follow:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
allowedParents="[*/parsys, */*layout]"
componentGroup="Adaptive Form"
jcr:description="AEM Form Custom input field"
jcr:primaryType="cq:Component"
jcr:title="AEM Form Custom input field"
sling:resourceSuperType="/libs/fd/af/components/guidetextbox">

<cq:template
    jcr:primaryType="nt:unstructured"
    jcr:title="Custom input"
    guideNodeClass="guideCustomInput" />
</jcr:root>

I attempted to test this by setting the field as mandatory (from dialog.xml) but the field stays as optional, no red border around the text field.

Can someone advise what else is required ?

Answer 1

If you are using Touch UI for dialogs, you should add

required="{Boolean}true"

If you are using old Ext Js dialogs, you should add

allowBlank="false"

as a property to the dialog item.

Answer 2

As far as I remember, you have to set the field to mandatory in the dialog.xml of your component where you use it. Usually this is done by adding

allowBlank="false"

to the dialog.xml

Answer 3

You should not change the guideNodeClass property since that is internal for the working of AEM Form Fields. It should remain as guideTextBox.

Also as a best practice the resourceSuperType should not be absolute path. The final code would look like this

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
allowedParents="[*/parsys, */*layout]"
componentGroup="Adaptive Form"
jcr:description="AEM Form Custom input field"
jcr:primaryType="cq:Component"
jcr:title="AEM Form Custom input field"
sling:resourceSuperType="fd/af/components/guidetextbox">

<cq:template
    jcr:primaryType="nt:unstructured"
    jcr:title="Custom input"
    guideNodeClass="guideTextBox" />
</jcr:root>

Answer 4

For AEM forms you need to set mandatory="true", not required or allowBlank. You can do this directly on the field in the xml or via the Forms UI via the mandatory checkbox.