Changing snippets

Snippets are small pieces of velocity code. They are used by the engine to output HTML to the screen. All components you see, in a default application screen, are snippets that are rendered by the engine.

Methods are a convenient way to access certain data or functionality in snippets. For instance the $text snippet has the method $text.getContent(). This gets the content for the $text snippet.

The snippets are part of the user interface. In a new user interface a snippet can be (slightly) different than in the previous user interface. This is important if you are using custom snippets, because you have to check them when upgrading to a higher user interface.

List of all available snippets

In case you need your own snippets, you have to define the snippet in the resource files in the directory snippets. Next you have to define when this snippet has to be applied. Do this in the blueprint properties, on the tab "Custom Snippets".

A simple example

Here's a simple example of the use of a custom snippet. The standard snippet used by the application engine is the boolean.vm.This example adds an image to every yes/no datatype field, in the blue ocean blueprint this is the "Subscribed to newsletter" field from the "person" class. The image has to be added to the resource files and by clicking the checkbox the image shows and not shows.

Here is the code:

#set($name = $widget.getDOMName())
<div class="form-control-static cx_checkbox">
    #if($widget.autoSubmit())
        #set($class = 'cx_autosubmit')
    #end
    #set($checked = $widget.getCheckedString())
    #if($widget.isDisabled())
        #set($disabled = 'disabled')
    #end
    <input class="$!class"  id="$name" name="$name" type="checkbox" value="true" $!checked $!disabled>
    <img src='/custom_snippet_pic.jpg' />
</div>

This css is used to show the image when the checkbox is checked

.cx_checkbox img {
    display: none;
}
.cx_checkbox input:checked {
    float: left;
}
.cx_checkbox input:checked + img {
    display: block;
    height: 30px;
}

To use the snippet go to "blueprint -> properties -> custom snippets".