AEM 6550 - Sites Dialog Add Boolean Typehints before Submit

Goal

For saving true or false values as Boolean and not String, you can add @TypeHint properties in dialog like below... 

<openInNewWindow
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
	checked="{Boolean}true"
	name="./openInNewWindow"
	text="Open in New Window"
	uncheckedValue="{Boolean}false"
	value="{Boolean}true"/>
<openInNewWindowType
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/hidden"
    name="./openInNewWindow@TypeHint"
    value="Boolean"/>

However if you'd like to avoid adding TypeHint properties in dialog (say too many checkboxes in dialog) but 'd like to have all checkbox values saved as Boolean in CRX, by automatically adding TypeHint before Save, add the following extension...

Demo | Package Install | Github

Product

Extension

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-save-checkboxes-as-boolean

2) Create node /apps/eaem-save-checkboxes-as-boolean/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [cq.authoring.dialog.all], String[] property dependencies with value lodash.

3) Create file (nt:file) /apps/eaem-save-checkboxes-as-boolean/clientlib/js.txt, add

                        save-checkbox-as-boolean.js

4) Create file (nt:file) /apps/eaem-save-checkboxes-as-boolean/clientlib/save-checkbox-as-boolean.js, add the following code

(function($, $document){
    var CHECK_BOX_SEL = "form.cq-dialog input[type='checkbox']";

    $document.on("click", ".cq-dialog-submit", convertStringToBoolean);

    function convertStringToBoolean(event){
        event.stopPropagation();
        event.preventDefault();

        $(CHECK_BOX_SEL).each(addTypeHint);

        $("form.cq-dialog").submit();
    }

    function addTypeHint(){
        var $checkbox = $(this),
            value = $checkbox.val(),
            $form = $("form.cq-dialog");

        if( (value != "true") && (value != "false")){
            return;
        }

        var typeHintName = $checkbox.attr("name") + "@TypeHint";

        $form.append($("<input type='hidden'/>").attr("name", typeHintName).attr("value", "Boolean"));
    }
}(jQuery, jQuery(document)));