# UI Customization

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

## Content



The [Blazor Viewer API](/activereportsnet/docs/v20.1/developers/create-applications/blazor-viewer-application/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.

```html
@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.

```html
@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.

```html
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.

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