Web API Edition | ComponentOne
Web API / Security in WebAPI Service / Step 1: Configure Report Services
In This Topic
    Step 1: Configure Report Services
    In This Topic

    Complete the following steps to configure Report Service Web API and to add custom JavaScript file to access folders.:

    Create Report Service Web API application

    Complete the following steps to configure Web API project:

    1. Create a new report service application with Individual User Accounts using Visual Studio template. For more information about creating report service application, see Report Services using Visual Studio Web API template.

    2. Create an authorization process that includes Login, Logout and User Registration. For more information, about authorization process, see Secure a Web API with Individual Accounts and Local Login in ASP.NET Web API.

    Back to Top

    Create files action in controller and view page

    Once you have completed the above two steps, you need add to files.js file to access the folders and reports that are specified in the report provider.

    1. From the Solution Explorer, right-click the Scripts folder, and then add files.js Javascript file.
    2. Add the following code to access the folders and reports in the report provider.

      files.js
      Copy Code 
      $(function () {
    setFolder(folder);
});

function folderRefresh() {
    setFolder(folder);
}

function folderUp() {
    folder = folder || '/';
    var names = folder.split('/');
    if (names.length > 0 && !names[names.length - 1]) {
        names.splice(names.length - 1, 1);
    }

    if (names.length > 0) {
        names.splice(names.length - 1, 1);
    }

    var newFolder = names.join('/');
    setFolder(newFolder);
}

function setFolder(value) {
    value = value || '/';
    if (value[value.length - 1] != '/'){
        value += '/';
    }

    folder = value;
    var $folder = $('#folder');
    $folder.text(value);

    $('#upBtn').prop('disabled', value == '/');

    var $catalogItems = $('#catalogItems');
    $catalogItems.html('Loading');

    wijmo.viewer.ReportViewer.getReports(reportApi, value).then(function (data) {
        $catalogItems.html('');
        data = data || {};
        var dataItems = data.items || [];
        var items = [];
        for (var i = 0, length = dataItems.length; i < length; i++) {
            var item = dataItems[i];
            if (item.type === wijmo.viewer.CatalogItemType.File) {
                items = items.concat(item.items);
                continue;
            }

            items.push(item);
        }

        for (var i = 0, length = items.length; i < length; i++) {
            var item = items[i], name = item.name, isReport = item.type === wijmo.viewer.CatalogItemType.Report;
            if (isReport) {
                var parts = item.path.split('/');
                name = parts[parts.length - 2] + '/' + parts[parts.length - 1];
            }

            var $item = $('<div>')
                .data('catalogItem', item)
                .addClass('catalog-item')
                .on('dblclick', function () {
                    var curItem = $(this);
                    var curData = curItem.data('catalogItem');
                    if (curData.type === wijmo.viewer.CatalogItemType.Report) {
                        showReport(curData.path);
                        return;
                    }

                    setFolder(curData.path);
                }),
                icon = $('<div>').addClass('glyphicon')
                .addClass(isReport ? 'glyphicon-file' : 'glyphicon-folder-close'),
                title = $('<div>').addClass('title').text(name);
            $item.append(icon).append(title);
            $catalogItems.append($item);
        }
    }).catch(function (xhr) {
        var message = xhr.status + ': ' + xhr.statusText;
        $catalogItems.html('<div class="error">' + message + '<br/>'
            + 'You don\'t have permission to access this folder. Please contact your network administrator.</div>' );
    });
}

function showReport(path) {
    var url = reportPageUrl + '?path=' + path;
    gotoUrl(url);
}

function gotoUrl(url) {
    window.location.href = url;
}

var httpRequest = wijmo.httpRequest;
wijmo.httpRequest = function (url, settings) {
    settings = settings || {};
    var token = sessionStorage.getItem(tokenKey);
    if (token) {
        var requestHeaders = settings.requestHeaders || {};
        requestHeaders['Authorization'] = 'Bearer ' + token;
        settings.requestHeaders = requestHeaders;
    }

    httpRequest(url, settings);
};

    3. Right-click the Views folder and add a view (Files.cshtml) to get the folders and reports in the report provider.

      Files.cshtml
      Copy Code 
      <div class="toolbar">
    <button id="upBtn" class="btn" onclick="folderUp()"><span class="glyphicon glyphicon-arrow-up"></span><span>Up folder</span></button>
    <button id="refreshBtn" class="btn" onclick="folderRefresh()"><span class="glyphicon glyphicon-refresh"></span><span>Refresh</span></button>
    <span class="address">
        <span class="glyphicon glyphicon-folder-open"></span>
        <span>Folder:</span>
        <span id="folder"></span>
    </span>
</div>
<div id="catalogItems" class="catalog-items">
</div>
@section scripts{<script src="~/Scripts/files.js"></script>}

    Back to Top