Initializing help system before first use

Using the View Designer and VDL to Create Custom Views

The View Designer creates Views in VDL, an extensible markup language that is a super-set of HTML and follows the same syntax, along with additional elements defined by the VDL language.

The VDL code created by the View Designer utilizes reusable components containing extensive functionality to define configurable interactive views.

Content can be augmented with customization via HTML, CSS and JavaScript. This chapter explores the underlying VDL code that makes up the View in greater detail.

VDL Versioning

When a VDL file is created in View Designer, a version of the VDL language is defined at the beginning of the file using the <vdl version=""> attribute. When defining the VDL version, you are notifying the Xpress Insight Server of the major version and optionally the minimum minor version that your VDL view requires.

You can define either a major and minor version, for example <vdl version="5.1"> or a major version only, for example <vdl version="5">. In both cases, the Xpress Insight Server will provide the latest compatible minor version and always match the major version. If no compatible minor version is available, an error message is shown when accessing the view.

If you are using components in a view that require a newer version of VDL than is defined in the VDL file, View Designer will show a warning.

To update the VDL version, access the code editor as described below, and update the <vdl version="5.1"> property to the required version.

Accessing the Code Editor

You can quickly switch between the code editor and the View Designer using the links displayed in the top right corner of the artboard.
View Designer link

This section provides examples in both the View Designer and code editor when the feature being described is accessible by both methods.

The View Designer integrates with Xpress Workbench entities and scenarios, generating the required VDL code to provide simple, direct bindings to your app's model data, to aid rapid view development.

VDL Examples App

Your Xpress Workbench installation contains an app that showcases all the elements within VDL, it is located at <installdir>/examples/insight/vdl/vdl_language.zip. You can upload it to Xpress Workbench and click on its tile to launch it within the Xpress Workbench environment.

Open Source Extensions

In addition to the developed VDL components, the View Designer also supports the integration of additional open source components. FICO has collected several examples and documented the installation process for Xpress Workbench to enable them to be used in Xpress Insight views. The available examples include:
  • vdlx-sidebar, the main sidebar extension.
  • vdlx-toolbar, a simple toolbar at the top of view.
  • vdlx-dropdown-button, for a drop-down list.
  • vdlx-tabs, to create tabs or pills for inner view navigation; and vdlx-modal, a modal dialog wrapper that can contain custom VDL.

These examples can be downloaded as a single zip archive from https://github.com/fico-xpress/vdl-custom-extensions.

Javascript API

FICO also offers a JavaScript API. For more information, see Using the JavaScript API to Create Custom Views.

Parent Topic View Designer Overview

© 2001-2025 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.