Initializing help system before first use

Hello World!

This section shows a very simple JavaScript application that you should be able to run within minutes.
First, locate and obtain a copy of the Quick Start example provided in the Xpress Insight installation located in the following location: 
<installdir>\examples\insight\quick_start.zip
Create the files client_resources/hello-world.html and client_resources/js/hello-world.js. You will also need a compiled model to drop into the app. You can copy the model from the hello-world-example example app as shown here: 
<installdir>\examples\insight\developer_guide\javascript_api\hello_world_example\application.bim
You should now have the following app structure:

Hello World Folder Structure

Custom JavaScript views need to be registered in the app’s application.xml file, known as the companion file. Add the following interface to the <view-group> section of the companion file: 
<html-view title="Hello World Example" default="true"
        path="hello-world.html"/>

The Hello World Example view is specified as the default view when one or more scenarios are selected. The view will be available in the Xpress Insight web client as a tab when the app is selected.

Enter the following code into your JavaScript file hello-world.js and save it: 
insight.ready(function () {
  var view = insight.getView();
  view.withFirstScenario()
      .bindAutoText('#hellomessage');
  view.start();
});
This first example demonstrates a starting point for your first application using the JavaScript 4.7 API.
Note The JavaScript API is an HTML file and a JavaScript file.

Notice that the JavaScript code is wrapped up in a call to insight.ready. This ensures that your code will not be executed until the Xpress Insight API is fully initialized.

The following code should be copied into your hello-world.html file and saved: 
<!DOCTYPE html>
  <html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <link type="text/css" rel="stylesheet" href="$distrib/insight-4.7.css"/>
    <script src="$distrib/insight-4.7.js"></script>
    <script src="js/hello-world.js"></script>
  </head>
  <body>
    <p class="view-initializing">Initializing...</p>
    <div class="view-initialized" style="display: none">
      <h1>Hello, world! AutoText Example</h1>
      <!-- start custom content -->
      <h1 id="hellomessage" data-entity="MyScalar"></h1>
      <!-- end custom content -->
    </div>
  </body>
  </html>

The preceding code shows all of the HTML code required to include and initialize JavaScript API 4.7. It provides all the data, state, and view management needed to develop Xpress Insight applications.

The following sections describe these codes examples in more detail.

Covered Topics
  • The View
    The first interesting line of code in the JavaScript file hello-world.js fetches a reference to the current view.
  • Observers
    Now we have our ScenarioObserver observer object, we need to bind our AutoText component to the HTML node in the markup so that the value of the HelloMessage scalar will be automatically fetched from the server and displayed within our page.
  • AutoText
    To provide a bit more detail on what is happening in the example, look more closely at the AutoText component.
  • CSS Styling
    The JavaScript API and components make use of a well-known framework called Bootstrap 3 to provide styled UI elements.
  • Common Issues
    This section details some common issues that may be encountered.
Parent Topic Using the JavaScript API to Create Custom Views

© 2001-2020 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.