Incorporating JavaScript into Forms and Consoles

Custom JS event handlers can be used in edit forms and consoles anywhere commands are permitted. JS event handlers can be called from panel-level command buttons:

<panel type="form">
<title translatable="true">Form Panel with Java Script Code to Copy Input Values</title>
<action id="copy">
<title>Copy Values</title>
<command type="callFunction" functionName="copyValues"/>
</action>

File: \parts\form\ab-ex-form-panel-input-values.axvw

JS event handlers can also be called using the onclick attribute of the action element:

<action onclick="copyValues">
<title>Copy Values</title>
</action>

Custom event handlers can access form data, as well as other controls in the view, using the Web Central JS API:

function copyValues() {
var date_requested = getInputValue('wr.date_requested');
var time_requested = getInputValue('wr.time_requested');
var description = getInputValue('wr.description');
...
}

File: \parts\form\ab-ex-form-panel-input-values.js

The select value dialog associated with each form field can be customized using JavaScript by adding the action tag as a child element to the field:

<panel type="form">
<field table="wr" name="requestor">
<action onclick="selectEmployee">
<title>...</title>
</action>
</field>
</panel>

File: \parts\form\ab-ex-form-panel-select-value.axvw

The JavaScript event handler opens a custom select value dialog:

function selectEmployee() {
View.selectValue(
'wr_form', 'Requested By', ['wr.requestor'],
'em', ['em.em_id'], ['em.em_id','em.phone','em.email'],
"em.dv_id LIKE 'SOFTWARE%'",
'afterSelectEmployee', true, false, '', 1000, 500);
}

File: \parts\form\ab-ex-form-panel-select-value.js