How to add custom WebAPI Data Processing Extension for Report Designer

To add a custom WebAPI Data Processing Extension to the Bold Reports® Report Designer, reference the extension scripts, register the extension with the ReportDataExtensions property, and add the WebAPI query dialog script. Data Processing Extensions add data source support that is not built into the Report Designer.

Follow these steps to add the custom WebAPI Data Processing Extension.

  1. Reference the following webapi.data.js and queryinputdialog.js script files in your application.

Extension scripts:

```html
    <head>
        <script src="~/Scripts/extension/webapi.data.js"></script>
        <script src="~/Scripts/extension/queryinputdialog.js"></script>
    </head>
```

  1. Provide the extension details for the Report Designer with the ReportDataExtensions property, as in the following code example:

    MVC

        <div style="width:100%; height:100%; position:absolute;">
        @{Html.Bold().ReportDesigner("designer").ServiceUrl("/api/DesignerAPI").   ReportDataExtensions    (ext => { ext.ClassName("WebAPIDataSource").Name("WebAPI".    ImageClass    ("e-reportdesigner-datasource-webapi").DisplayName("WebAPI").Add(; }).    Render();}
    </div>
    @(Html.Bold().ScriptManager())

  2. Add the following code in a script tag to show the WebAPI query dialog when you use the WebAPI extension.

        <script type="text/javascript">
        var qryOptions = null;
        var webApiQueryDialog = null;
        if (ej.isNullOrUndefined(webApiQueryDialog)) {
            webApiQueryDialog = new QueryInputDialog($('#designer'));
        }
        if (!ej.isNullOrUndefined(webApiQueryDialog)) {
            qryOptions = {
                toolbarRendering: $.proxy(webApiQueryDialog.renderToolbarItems, webApiQueryDialog),
                datasetLoaded: $.proxy(webApiQueryDialog.enableButton, webApiQueryDialog),
                dataModeChanged: $.proxy(webApiQueryDialog.enableButton, webApiQueryDialog)
            };
        }
        function controlInitialized(args) {
            debugger;
        var designer = $("#designer").data('boldReportDesigner');
            designer.setModel({queryDesignerOptions: qryOptions });
    }

  3. Attach the custom WebAPI Data Processing Extension in your application as described in the following help documentation.

WebAPI Data Processing Extension

Download the following sample of the Bold Reports® Report Designer with a custom WebAPI Data Processing Extension.

MVC Report Designer with WebAPI Data Processing Extension