Refer to Images and Other Resources In a Policy Model

Images and other resource files (such as custom font files) can be included in a project, and then referenced in your custom stylesheets and JavaScript files using the provided template substitution syntax. This allows you to easily customize the look and feel of interview controls, incorporate boiler plate text on every screen and so on.

Note that when using a JavaScript interview extension you can access the resourcePath field in order to obtain the URL path to any custom resources bundled with the policy model.

The benefits of this approach are that resource files are referenced with a relative URL, and those references remain valid across all components and versions of the Intelligent Advisor application.

The following substitutions are available. When found in a CSS or JavaScript file that is used by an interview, each of these templates is automatically expanded as described:

  • ${context-root-path} - the current context path, including the session identifier where applicable
  • ${resources-root} - the current root path to the resources directory. Note that blank spaces cannot be used in the root path.
  • ${rulebase} - the name of the policy model currently being used
  • ${locale} - the locale of the current session

For example, for an interview that is currently in progress at http://<myserver>:<port>/owdb/0/investigate/mypolicymodel/en-US/<goal state> then:

  • ${context-root-path} = /owdb/0/
  • ${resources-root} = /owdb/0/resources/mypolicymodel/en-US
  • ${rulebase} = mypolicymodel
  • ${locale} = en-US

To refer to your image or other resource file:

  1. Add your text based file, for example, a css, js, html file, to the /interview-theme/resources folder in the project directory. (This folder is created when you click the Custom Files button in the Styles dialog box on the Interview tab.)
  2. Add the images and other resource files that you want to reference from your file to the /interview-theme/resources directory (for example, myimage.png).
  3. In your text based file, refer to your images and other resource files using the substitution format shown above. For example, in a CSS file: 
    .my-interview-content {
     background-image: url("${resources-root}/images/mybackgroundimage.png");
}

Tip: Alternatively, images can be added to screens rather than linked to as URLs. Images and documents can also be referred to in a policy model using HTML tags. Note that the ${resources-root} substitution can be used in the HTML tag. For example, to render a hyperlink on a screen pointing to a document in the resources directory, the label text could be: <a href="${resources-root}/pdf/my_document.pdf" target="_blank">My Document</a>.

Related Topics