ActiveReports 18 .NET Edition
Developers / Create Designer and Viewer Applications / Blazor Viewer Application / UI Customization
In This Topic
    UI Customization
    In This Topic

    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.

    BlazorViewer.razor
    Copy Code
    @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.

    BlazorViewer.razor
    Copy Code
    @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.

    BlazorViewer.razor
    Copy Code
    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.

    BlazorViewer.razor
    Copy Code
    private void InitializedViewer()
     {
       _viewer.Sidebar.Toggle(false);
     }