Initializing help system before first use

Working with VDL Function Options

Several options are currently available to the VDL function.
Scripts are implemented in standard JavaScript and are assigned to custom extensions using calls to a global VDL function available anywhere in your view. The function takes two arguments - the tag name and a JavaScript Object for any configuration needed: 
<script>
    VDL('extension-name', {});
</script>
The above example represents the simplest call it is possible to make to the VDL function. In this case, the only purpose it serves is to define (or enhance) a custom extension - called here <extension-name> - which could be used immediately. 
<extension-name></extension-name>
At this stage, this would have little effect because no options have been supplied as the second argument to the VDL script call.
They include:
  • tag
  • attributes
  • modifiesDescendants
  • requiredParent
  • transform
  • template
  • errorTargetSelector
  • createViewModel

All of these options are documented via the VdlExtension class in the JavaScript API documentation, but several are particularly useful.

tag

If you are creating a custom tag extension, define the tag text that will be used by providing a string. Alternatively, if your extension is an attribute extension, omit this property and define an attribute instead.

attributes

Use this option to inform your custom extension about any optional or required attributes, whether they accept a dynamic expression and various other properties that may be useful to your extension.

transform

This option is used to supply a JavaScript callback function to your custom extension. While developing your custom extension, the callback allows you to manipulate the final markup and extract the necessary attributes from the tag's usage. There is also an extension API object available to provide common operations. 
// within a vdl-extension script block
    VDL('my-extension', {
        transform: function (element, attributes, api) {
        // Your custom JS code in here
}});
Above, the transform function you create is called by the VDL system with three optional arguments:
  • element - the tag and all of its contents.
  • attributes - a JavaScript object containing all the attributes used with the extension.
  • api - the extensions API which provides many helper functions.
Usually, the transform function comes into use when a straightforward replacement of the tag with the contents of the template is not enough. Within the transform function, you might rearrange the child tags of your tag, or you might generate content based on the attributes that have been set or you might call on the extensions API to enable better interaction with the view as a whole. 
<script>
    VDL('my-tag', {
        transform: function(element, attributes, api) {
            $(element).addClass('my-class'); // jQuery is globally available
        }
});

createViewModel

By contrast to the transform callback which enables you to modify the construction of the view markup when the view is starting up, the createViewModel callback enables you to supply a custom view model to modify and enhance its runtime behavior. In particular, the values of dynamic expressions are only available at runtime, so createViewModel allows you to interact with and consume these values once they have been calculated by the VDL runtime. 
<script>
    VDL('my-tag', {
        createViewModel: function(params) {
            return {
                    // uses a VDL helper method
                    // to create an observable value
                    value: VDL.createVariable(56)
                    };
        }
    });
</script>
The above example creates a variable which can be observed within an expression - e.g. vdl-text="=value".
Parent Topic Using Scripts in Custom Extensions

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