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.
Note: As of Xpress Insight 4.57, VDL 3.2 and earlier is no longer supported. Any apps using these versions will need to be migrated before publishing to Insight 4.57.

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 Insight 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 Insight 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 Insight and click on its tile to launch it within the Xpress Insight 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:
  • an alternative to <vdl-table> in a FICO Xpress Insight custom view, using vdlx-datagrid that offers enhanced performance whilst also enabling customizable Index column positioning; customizable sorting defaults; support for calculated columns, and use of range operators for column filters.

    This can be downloaded from https://github.com/fico-xpress/vdlx-datagrid.

  • user interface elements including 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 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 see Using the JavaScript API to Create Custom Views.

View Designer Tutorial

Creating Custom Views using the View Designer is fully explored in the Xpress Developers Guide.

For more on Using VDL to Create Custom Views, see Chapter 5 of the Xpress Developers Guide.

The following topic provides a brief overview suitable for this tutorial.

Covered Topics
  • VDL Basics - a Recap
    This section revisits and extends the basic principles introduced in Building a Basic Xpress Insight App, which is recommended reading prior to this chapter.
  • Working with Page Layouts and Styling
    The View Designer incorporates a default style sheet derived from a foundation based on Bootstrap 3.x. This arrangement inherits some rules on how you can augment the built-in styling that applies to container sizes and the horizontal spacing of elements.
  • Using Expressions
    Expressions are statements used to insert dynamic content into a View or programmatically control layout and data flow.
  • Exploring the Core Components
    VDL provides several core components in the form of VDL elements and attributes—
  • Working with Advanced VDL
    Several advanced techniques are available to help you gain more control over your app's functionality and performance.
Parent Topic Insight 4 Developers Guide for Mosel

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