Javascript & CSS

Help Page > Forms > Form Options > Javascript & CSS

Javascript

Javascript may be used to provide advanced functionality. Click the icon to open the Javascript editor.

Forms_25_Javascript

Your script executes each time an instance of your form is loaded in Form Edit mode. It may contain essentially any valid Javascript as well as jQuery library features, accessible with the $ factory method or $. predefined functions.

Things you can do with Javascript in your form include, but are not limited to:

  • Hide or show elements or otherwise alter their appearance. Typically this would be based on data present in the document or entered in other elements.
  • Provide validation on data entered in the form. That is, report if a part number doesn’t match a required format.
  • Calculate the value of elements based on other data in ways beyond those provided by the Formula feature.
  • Integrate with other systems through web services.
  • Implement a Space Wars game. Really. This is possible. Unfortunately, it is also possible through a bad script to create bugs that impair the operation of your form or DocStar. Therefore, Javascript should be used cautiously. DocStar recommends that you use the following objects and methods, which are provided for form script developers.
  • $form is a Javascript selector which contains the whole form. Selecting elements within $form with the .find() method using their type, name, and/or class name(s) (specified for each element in the Element Options tab’s Advanced accordion) is the recommended practice to ensure your script affects your form and no other parts of DocStar. Check online resources for help defining jQuery selectors.
  • The custom .changeVal() and .changeChecked() methods may be applied to elements to change their values and fire their change events. Use .changeChecked() on check boxes and radio buttons and .changeVal() on everything else.
  • window.formCleanup helps manage removal of event handlers, timers, and intervals when the form unloads. Push any setTimeout() and setInterval() functions you use onto their respective arrays in formCleanup. Likewise, define the unbindFunction in formCleanup so that it removes all event bindings you’ve created; this is facilitated by including a namespace (like “.Form”) on all of your events. Failure to remove timers and unbind events will cause DocStar to become slower and slower over time as forms are processed.

The comment blocks included in the Javascript of each new form provides further details.

Render with Javascript

By default, the form’s Javascript is executed only when it is viewed in Form Edit mode. This is suitable for anything that provides validation. However, scripts that affect the appearance of the form will not be reflected outside Form Edit mode unless this option is checked. Rendering the form with Javascript allows appearance changes made by Javascript to be reflected in the standard viewer and when the form document is printed, emailed, or downloaded.

CSS Layout

CSS Layout may be used to alter the appearance of elements based on their type, relationship to other elements, and/or on CSS class names applied to them through Element Options. For instance, the Time Off Request form used as an example in this document applies a few lines of CSS to orient the labels of all elements above their values rather than to their left.

div, span, input, select, textarea, img {
vertical-align : middle;
z-index : 0;
}

.formElementLabel {
display : block;
white-space : pre;
vertical-align : middle;
}

DocStar ECM Help Center
© 2021 Epicor Software Corporation. All Rights Reserved.