Implementing a value editor

You use a value editor to provide a custom graphical interface for your business-specific BOM types. You can implement a value editor for the Decision Center Intellirule editor.

About this task

When you associate a BOM class with a value editor key (see Associating a value editor with a BOM type) you can implement a value editor for Decision Center. You must then repackage the Decision Center archive to integrate and declare the value editor.

Procedure

To implement a value editor for Decision Center:

  1. Create a value editor implementation for the Intellirule Editor:

    Implement the interface IlrClientScriptFileValueEditorProvider or IlrClientScriptBlockValueEditorProvider. These interfaces define the server side of the value editor and call a script for the client part. This script may be defined in a file or directly in the Java™ file as a JavaScript block. For example:

    public class OfferValueEditorProvider implements IlrClientScriptFileValueEditorProvider {
    
    public String getClientScriptModulePath() {
    		return "/js/custom/valueeditors";
    	}
    
    public String getClientScriptModuleName() {
    		return "custom.valueeditors";
    	}
    
    public String getClientScriptClassName() {
    		return "custom.valueeditors.OfferValueEditor";
    	}
    
    }
    

    Create the JavaScript part of the value editor, using Dojo. Define a custom editor from the provided com.ibm.bdsl.web.valueeditors.ValueEditorBase. It may call a servlet to get the data to be shown from the server. Then it builds the html editor that gets the values.

    You use the following abstract functions from the ValueEditorBase class, in this order:
    • getDomNode: Returns the value editor's DOM node. Call this function to display the value editor.
    • startEdit: Sets the selected value or the current focus. Call this function once the value editor's DOM node is displayed.
    • dispose: Closes the value editor. Call this function to destroy the value editor on blur, commit or cancel.
    These functions can use the following ValueEditorBase built-in functions:
    • getValue: Returns the current edited value.
    • setValue: Sets the selected value.
    • commit: Commits the selected value by setting the text in the rule editor, and closes the value editor.
    • cancel: Cancels the edition and closes the value editor.
    • getEditor: Returns a reference to the rule editor object.
    • getCaretPosition: Returns the caret position in the rule editor's text buffer.
    • getText: Returns the rule editor's text.
    • getConcept: Returns the edited value's concept. For example, returns ilog.rules.brl.Date for a date.
    • getNodeType: Returns the edited value's node type. For example, returns T-voc-value for a date.

    For example, create the /js/MyValueEditor.js JavaScript file with the following contents:

    define([
        "dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/_base/array",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/on",
        "dijit/focus",
        "com/ibm/bdsl/web/editor/Utils",
        "com/ibm/bdsl/web/valueeditors/ValueEditorBase"
    ], function (declare, lang, array, dom, domConstruct, on, focusUtil, utils, ValueEditorBase) {
    
        return declare(ValueEditorBase, {
    
            constructor: function() {
                this._eventHandlers = [];
                var path = window.contextPath || window.config.contextPath; // Business Console context path variable
                this.serviceUrl = path + '/servlet/SampleValueEditorServletName';
            },
    
            getDomNode: function () {
                var divEditor = domConstruct.create('div', {'class': 'popupWindow folderSelector'});
                // ...
                return divEditor;
            },
    
            startEdit: function () {
                utils.doAjaxPost({
                    url: this.serviceUrl,
                    data: { offer: 'true' },
                    load: lang.hitch(this, function(jsonData) {
                        // ...
                    })
                }, this.editor);
                focusUtil.focus(dom.byId("offerList"));
            },
    
            dispose: function () {
                array.forEach(this._eventHandlers, function(handle) {
                    handle.remove();
                });
                this._eventHandlers = [];
                focusUtil.focus(this.editor.domNode);
            }
    
        });
    
    });
  2. Create a preferences.properties file that maps the key for your editor to the fully qualified name of your implementation class, and include that file into the JAR file that contains your implementation:

    For the Intellirule Editor, add the following lines:

    "decisioncenter.web.core.intelliruleEditor.<key>" for the Business console.

    where <key> is the name of the value editor property of the BOM member.

    You can also set this preference as a Decision Center configuration parameter (see the set-config-param Ant task in Setting configuration parameters):

    For the Intellirule Editor, set the configuration parameter as follows for the Business console:

    ant set-config-param -Dkey=decisioncenter.web.core.intelliruleEditor.<key> -Dvalue=mycompany.MyValueEditorClass

  3. Repackage the Decision Center archive with the repackage-ear command. In the repackage-ear command, use the -DadditionalJars argument to specify the JAR file containing your value editor class.
    Note:

    For information on how to repackage the Decision Center archive, see Repackaging the Decision Center archive.

  4. Deploy the Decision Center archive.

Results

The value editor is now available in Decision Center.