Skip to main content
All docs
V25.2
  • Customize Parameter Editors

    • 2 minutes to read

    This topic shows how to customize the built-in parameter editors in the JavaScript-based Document Viewer.

    View Example: Blazor Reporting - UI Customization API

    Change the Editor Options

    Handle the CustomizeParameterEditors event and use the info.editor.extendedOptions property to customize the DateBox editor options.

    window.ViewerCustomization = {
    // Remove the time portion from the DateTime parameter editor
        onCustomizeParameterEditors: function(s, e) {
            if (e.parameter.type === "System.DateTime") {
                e.info.editor = $.extend({}, e.info.editor);
                e.info.editor.extendedOptions = $.extend(e.info.editor.extendedOptions || {}, { type: 'date' });
            }
        }
    }
    

    Add a Validation Rule

    Handle the CustomizeParameterEditors event and add a validation rule to the editor’s validationRules array.

    window.ViewerCustomization = {
        // Remove the time portion from the DateTime parameter editor
        onCustomizeParameterEditors: function(s, e) {
            if (e.parameter.type === 'System.DateTime') {
                e.info.editor = $.extend({}, e.info.editor);
                e.info.editor.extendedOptions =
                    $.extend(e.info.editor.extendedOptions || {},
                        { type: 'date' }, { displayFormat: 'dd-MMM-yyyy' });
                var validationRule = {
                    type: "range",
                    min: new Date(2000, 0, 1),
                    message: "We do not retain data prior to the year 2000."
                };
                e.info.validationRules = [validationRule];
            }
        }
    }
    

    The customized parameter editor appears as follows:

    Custom Parameter Editor DateBox