Feather: JavaScript widget

You use the Feather JavaScript widget to embed JavaScript code in your page. JavaScript is used to enhance the functionality of your website. For example, you can use JavaScript to validate user input.

After you place the JavaScript widget on your page, you configure which JavaScript to include.

NOTE: If you add JavaScript widget in a page template, the JavaScript is applied to all the pages that use this template. If you add it on one particular page, the JavaScript is applied only to this page.

To do this, click Edit button in the upper-right corner of the widget. The following sections describe the configuration options in the JavaScript window.

Add JavaScript

You can either write your own JavaScript or simply link to an existing JavaScript file. Do one of the following:

• Write JavaScript
  Directly type the JavaScript code into the code area. For example:
  

   var str = "Hello World!";

  NOTE: You do not need to add <script> tag, since it is automatically added. 

• Link to JavaScript file
  To select a .JS file from your file system, do one of the following:
  • In the URL field, directly type the path to the JavaScript file
  • Click Select to browse the file system and choose a file from the your web application folder and its children.

Define where to include the HTML file

In Where to include in HTML? section, select one of the following:

• In the head tag
  The JavaScript is executed immediately when a page starts to load.
• Where the widget is dropped
  The JavaScript is executed when the widget is being loaded.
• Before the closing body tag
  The JavaScript is executed at the end of the page’s loading process.
  For example, this option is often used to embed page tracking code, such as Google Analytics, because if this code is executed, the implication is that the user has not closed the page before the page has been fully loaded.

More options

To optionally add a description for the JavaScript file, expand the More options section. The description is displayed only when pages are in edit mode, so that you can distinguish JavaScript files easily.

Model settings

You define model settings in the Advanced settings section. Model settings display all properties directly bound to the JavaScript widget model. Access these properties by clicking the Model button in Advanced settings.

• Description
  Gets and sets the description of the JavaScript that is referenced. This field is for your convenience only.

• FileUrl
  Gets and sets resource URL which will be referenced. This FileUrl is used only when the widget is in Link to JavaScript file mode.

• InlineCode
  Gets and sets the inline code that is displayed in the code area while widget is in Write JavaScript mode.

• Mode
  Defines the supported ways to refer JavaScript through the widget. There are two possible options:

  • Inline
    This is the default option. You use this option when you want to enter JavaScript directly into the code area. If you enable this mode, any URL selected through Link to JavaScript file will not be added.
  • Reference
    You use this option when referring resource from your file system. If you enable this mode, any JavaScript typed directly into Write JavaScript code area will not be included.

• Position
  Gets and sets the position in the document where the code will be inserted. The possible values are:

  • Head
    This is the default option.
  • InPlace
  • BeforeBodyEndTag