UI Customization

The Blazor Viewer API lets developers completely overwrite the toolbar's default user interface and the viewer component's sidebar.

Update layout

Update the toolbar layout to Desktop, Fullscreen, or Mobile as shown.

@page "/"
@using BlazorViewerServer.Data
@inject ReportsService ReportsService
 
<div class="main">
 
    @* Used to render list of Reports on the page *@
    <ReportList ReportsList="@reportsList" CurrentReport="@_currentReport" OnClickCallback="OnClick"></ReportList>
 
    <div id="viewerContainer">
        <ReportViewer @ref="_viewer" ReportName="@_currentReport" ViewerInitialized="InitializedViewer"/>
    </div>
</div>
 
@code{
 
    private ReportViewer _viewer;
    private List<string> reportsList;
    private string _currentReport = null;
    private bool _documentLoaded = false;
 
    protected override void OnInitialized()
    {
 
        reportsList = ReportsService.GetReports().ToList();
        _currentReport = reportsList.FirstOrDefault();
        //Sets the first report as the value of _currentReport
    }
 
    //click event handler to reinitialize the _currentReport value and open the new report in the viewer
    private async void OnClick(string res)
    {
        _currentReport = res;
        await _viewer.OpenReport(_currentReport);
 
    }
 
    private void InitializedViewer()
    {
        _viewer.Toolbar.Desktop.Layout(new string[] { "$zoom", "$split", "$fullscreen", "$split", "$print" });
        //_viewer.Toolbar.Fullscreen.Layout(new string[] { "$fullscreen", "$print" });
        //_viewer.Toolbar.Mobile.Layout(new string[] { "$navigation"});
    }
}

Add custom toolbar item

The following example adds two export buttons - pdf export and excel export.

@page "/"
@using BlazorViewerServer.Data
@inject ReportsService ReportsService
 
<div class="main">
 
    @* Used to render list of Reports on the page *@
    <ReportList ReportsList="@reportsList" CurrentReport="@_currentReport" OnClickCallback="OnClick"></ReportList>
 
    <div id="viewerContainer">
        <ReportViewer @ref="_viewer" ReportName="@_currentReport" ViewerInitialized="InitializedViewer" DocumentLoaded="@DocumentLoaded" Locale="ja-JP"/>
    </div>
</div>
 
@code{
 
    private ReportViewer _viewer;
    private List<string> reportsList;
    private string _currentReport = null;
    private bool _documentLoaded = false;
 
    protected override void OnInitialized()
    {
 
        reportsList = ReportsService.GetReports().ToList();
        _currentReport = reportsList.FirstOrDefault();    
        //Sets the first report as the value of _currentReport
    }
 
    //click event handler to reinitialize the _currentReport value and open the new report in the viewer
    private async void OnClick(string res)
    {
        _currentReport = res;
        _documentLoaded = false;
        await _viewer.OpenReport(_currentReport);
 
    }
 
    private async void DocumentLoaded()
    {
        _documentLoaded = true;
    }
 
    private void InitializedViewer()
    {
       
        // To add a new item in the ToolBar (it is to be performed before the report is opened)
 
        _viewer.Toolbar.Desktop.AddItem(new ToolbarItem()
        {
            Text = "Export to PDF",
            Key = "$ExportPDF",
            Enabled = true,
            Title = "Export to PDF",
            Action = async () =>
            {
                // you can perform export only after the document is loaded.
                if (_documentLoaded)
                {
                    await _viewer.Export(ExportTypes.Pdf,           
                    //Sets the export type
                    (uri) =>
                    {
                        //callback Function that is invoked once the export result is available (the Url is passed in the callback)
                    },
                    true, // Indicates whether the save as dialog should be shown immediately once the result is ready
                    new Dictionary<string, string>() { { "Title", "Some Title" } },
                    //Export setting for Rendering Extensions
                    () =>
                    {
                        //сhecking export cancellation
                        return false;
                    });
                }
            }
        });
 
 
        _viewer.Toolbar.Desktop.AddItem(new ToolbarItem()
        {
            Text = "Export to Xlsx",
            Key = "$ExportExcel",
            Enabled = true,
            Title = "Export to Xlsx",
            Action = async () =>
            {
                // you can perform export only after the document is loaded.
                if (_documentLoaded)
                {
                    await _viewer.Export(ExportTypes.Xlsx, 
                    //Sets the export type
                    (uri) =>
                    {
                        //   callback Function that is invoked once the export result is available (the Url is passed in the callback)
                    },
                    true, // Indicates whether the save as dialog should be shown immediately once the result is ready
                    new Dictionary<string, string>() { { "Title", "Some Title" } },         //Export setting for Rendering Extensions
                    () =>
                    {
                        //сhecking export cancellation
                        return false;
                    });
                }
            }
        });
 
    }
}

Show/hide toolbar

In the InitializedViewer() method, use the Toggle method to set the toolbar visibility.

private void InitializedViewer()
 {
   _viewer.Toolbar.Toggle(false);
 }

Customize sidebar - Show/hide sidebar

In the InitializedViewer() method, use the Toggle method to set the sidebar visibility.

private void InitializedViewer()
 {
   _viewer.Sidebar.Toggle(false);
 }