CODEWITHSUNDEEP
adobeaem
user5733033
user5733033

Reputation: 55

Custom AEM Form field not persisted

I attempt to create a custom field for AEM form (AEM6.0 SP3) following how text field does it: /libs/fd/af/components/guidetextbox

I created init.jsp and widget.jsp with same content. On widget.jsp, I then add some jQuery to autopopulate text field on focus out.

<script>
var thisField = '${guideid}${'_widget'}';
    $(thisField).focusout(function() {
    $(this).val('date ' + new Date());
  });
</script>

On focus in, I type text 'ABC' then when focus-out I get text 'date ' however when submitting the data, text 'ABC' gets submitted.

Is there any AEM API I need to invoke (instead of just jQuery .val() function) in order for the changes to be recorded ?

Upvotes: 1

Views: 1439

Answers (2)

vdua
vdua

Reputation: 1331

In AEM Forms a Javascript model is maintained that stores the value and that model is used to submit the data. Now to pass on the value from the ui to the model XFA_EXIT_EVENT[1] has to be triggered. So after setting the value you must add this line of code to persist the value

$(this).trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)

Also a better way would be to create your own widget for this specific scenario. See [2] for more details. The article is for AEM Form 6.1 but it will work for AEM 6.0 as well.

[1] https://helpx.adobe.com/aem-forms/6/html5-forms/introduction-widgets.html

[2] https://helpx.adobe.com/aem-forms/6-1/custom-appearance-widget-adaptive-form.html

Upvotes: 0

user5733033
user5733033

Reputation: 55

Not the best solution, but we managed to get it work by first calling focus(), eg.

$(this).focus().val('date ' + new Date());

Better solution:

  1. create a custom function eg

    function initDatePicker(thisObj) { $(this).focusout(function() {thisObj.value = $(this).val();});}

  2. Update .content.xml to call this within initScript eg.

    <cq:template guideNodeClass="guideTextBox" jcr:primaryType="nt:unstructured" jcr:title="Datepicker input field" initScript="initDatePicker(this)"/>

the function will be immediately included when the widget is added to canvas.

Upvotes: 0

Related Questions