Initializing help system before first use

Using VDL to Create Custom Views

VDL enables rapid development of custom views by allowing you to associate user interface components with model data for viewing and editing.

It is a markup language enabling you to author views using an XML notation. A VDL view can contain any valid HTML markup, as well as some additional elements defined by VDL itself. Furthermore, VDL is extensible so you can build on top of it to create reusable components.

The main reason that VDL provides for rapid development is that it has built-in knowledge of Xpress Insight entities and scenarios and provides simple and direct bindings to your app's model data.

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

VDL contains functionality for defining basic interactive views through configuration only. Content can be augmented with customization via HTML, CSS and JavaScript. However, if your developments require extensive customization, the JavaScript API may offer a more suitable approach.

Sample Code

If you wish, you can use code provided at Code Samples - Using VDL to Create Custom Views as a base upon which to follow the examples through. These files correspond to the finished state of the app built in Getting Started but without the Tableau view. Note how they should be assembled within a folder hierarchy, taking care to ensure that the source directory is initially empty. You are also likely to need to reformat pasted lines where, due to page width limitations, their pasted versions contain erroneous linebreaks - try to build foliodata.mos and look at the output for the syntax errors.

Covered Topics
  • VDL Basics - a Recap
    This section revisits and extends the VDL basics introduced in
  • Working with Page Layouts and Styling
    VDL 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 VDL Expressions
    Expressions are statements used to insert dynamic content into a VDL page or programmatically control layout and data flow.
  • Exploring the Core VDL Components
    VDL provides several core components in the form of VDL elements and attributes - all are documented in the VDL Reference.
  • 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 Developers Guide