Initializing help system before first use

Creating Custom Extensions for Views

The language used for the code that sits behind the View Designer is extensible, and adding to it should not be complicated.

Custom extensions can be defined directly in the code editor, making it easier to form the language in a way that closely models your problem domain. At its simplest, a custom extension can be defined by assigning a new tag name to a collection of tags. 

<vdl-extension name="my-banner">
  <vdl-template>
    <div class="banner">
      <h1><vdl-contents></vdl-contents></h1>
    </div>
  </vdl-template>
</vdl-extension>
Once defined like this, you can subsequently use markup such as: 
<my-banner>Welcome</my-banner>
Resulting in generated HTML such as: 
<div class="banner">
    <h1>Welcome</h1>
</div>
In this example, the <vdl-extension> element takes a single attribute, name, that defines the new tag name.
Important All VDL tags must be namespaced, which takes the form of two words separated by a hyphen. Any attempt to define a custom extension without a namespace will result in an error. Namespaces help to minimize collisions between sets of tags and you are encouraged to define your own prefix(es) for grouping and identification purposes.

The <vdl-extension> element supports a range of possible markup but two tags in particular are important at this stage: <vdl-template> and <vdl-contents>.

<vdl-template>

This element tells the parent <vdl-extension> element what markup to augment your extension with when it is used later in the view. In the previous example, the <vdl-template> element included a <div> element and a <h1> element which were placed into the generated view when the <my-banner> element was used.

<vdl-contents>

Within a <vdl-template> element, you use a <vdl-contents> element to inform VDL that any contents of the later usage of our custom extension should be inserted at runtime at this point. The word Welcome in <my-banner>Welcome</my-banner> replaced the <vdl-contents> element for the generated markup. The contents can be any combination of text, VDL, and HTML tags.

While this takes a little time to set up, the <my-banner> element is now part of the VDL language for your current view and can be used exactly the same way as any other VDL or HTML element. It can be used to store an updatable instance of an element that can be used in several views, and have any change reflected through the application.

Covered Topics
  • Using Scripts in Custom Extensions
    Custom extensions are useful as they enable reuse of snippets, as such they are powerful when combined with scripting. This allows much greater functionality and interactivity, and is how most of the core custom extensions are developed.
  • Integrating with Third-party Libraries
    Custom extensions allow the use of third-party library code that can also be integrated as part of the native VDL 4.6 language.
  • Working with DOM Events
    You can attach HTML event handlers to VDL and HTML tags using the element.
Parent Topic Working with Advanced VDL

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