Reputation: 55
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
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
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:
create a custom function eg
function initDatePicker(thisObj) { $(this).focusout(function() {thisObj.value = $(this).val();});}
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