Use JavaScript in Template Code
You can add JavaScript code directly to a custom view or template using the <script> tag. For example:
You can also refer to external JavaScript libraries. External libraries must:
Have a fully-qualified URL where the library is hosted. For example:
<div>
<script type="text/javascript"
scr="http://some.example.com/libraries/commonView.js"/>
...
</div>
Generally, you should use this option for external libraries hosted by third parties or libraries for your organization that are hosted outside of MashZone NextGen. Hosting JavaScript libraries for your organization in the MashZone NextGen or MashZone NextGen Hub web applications is not recommended as this complicates deployment and upgrade migrations.
Have been uploaded to
MashZone NextGen and use a
MashZone NextGen URL.
This option is recommended when JavaScript libraries cannot be hosted outside of MashZone NextGen or these resources should be available for use in many custom views.
Note: | External resources can only be uploaded to MashZone NextGen by MashZone NextGen administrators. |
This example uses a JavaScript library that has been uploaded to MashZone NextGen. The full path for this URL is defined when the resource is uploaded, but is generally in the form http:app-server:port/mashzone/files/library-name:
<div>
<script type="text/javascript"
scr="http://localhost:8080/mashzone/files/commonView.js"/>
...
</div>
Loading and Scope
Custom views become part of the user interface for apps which in turn are published and run inside of other web pages or mobile devices. Thus scripts are loaded and run within the body of another page. Typically, the DOM for the page is fully loaded.
Scripts should also use a unique namespace to ensure there are no naming conflicts with other code running within that page.
Events and Event Handlers
Custom views support all of the standard DOM events. Developers can also use jQuery functions to register event handlers or to define and fire custom events. For example:
...
<button id="event1">Trigger an event</button>
<script type="text/javascript">
jQuery("#event1").click(function(){
jQuery(this).parent().trigger("myEvent", {
eventdata: { type: 'button', time: (new.Date()).toString() }
}
);
});
</script>
...
