# Customize UI

The JSViewer API lets developers customize UI by completely overwriting the toolbar's default user interface and the viewer component's sidebar.

## Content



The [Js Viewer API](/activereportsnet/docs/v19.2/developers/create-applications/js-viewer-application/jsviewer-api) lets developers completely overwrite the toolbar's default user interface and the viewer component's sidebar.

## Setting the toolbar layout

Js Viewer has three built-in layouts for the toolbar:

*   **desktop** - the default layout
    
*   **full-screen** - displayed when the full-screen mode of the Viewer is on
    
*   **mobile** - displayed on narrow screens
    

By default, each of these layouts contains the following items.

| Internal ID | Description |
| --- | --- |
| $navigation | Go to the 1st page, go to the previous page, page number/page total, go to the next page, go to the last page buttons |
| $split | Separator |
| $refresh | Refresh report button |
| $history | Go to the parent report, go back in history, go forward in history buttons |
| $zoom | Zoom mode drop-down |
| $fullscreen | Toggle full-screen mode button |
| $print | Print button |
| $singlepagemode | Switch to the single page mode button |
| $continuouspagemode | Switch to the continuous page mode button |
| $galleymode | Switch to the galley page mode button |

You can use the **layout** method to display only specified items in the toolbar for each layout mode. Here is the example of using this approach in an Angular application for showing 'Zoom', 'Toggle Full Screen', and 'Print' items for the regular layout - 'Toggle Full Screen' and 'Print' items for the full-screen layout, and displaying 'Navigation' item only for the mobile layout.

```javascript
import { Component, AfterViewInit } from '@angular/core';
import { createViewer} from '@mescius/activereportsnet-viewer';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit {
  title = "app";
 
  ngAfterViewInit() {
    this.viewer = createViewer({
      element: '#viewer-host'
    });
    this.viewer.toolbar.desktop.layout(["$zoom", "$split", "$fullscreen", "$print"]);
    this.viewer.toolbar.fullscreen.layout(["$fullscreen", "$print"]);
    this.viewer.toolbar.mobile.layout(["$navigation"]);
    this.viewer.openReport("DemoReport.rdlx");
  }
}
```

Similarly, you can customize the layout of the viewer for React, Vue, and Pure JavaScript applications.

## Adding and removing a toolbar item

The **addItem** and **removeItem** methods of all three layout modes of the **viewer.toolbar** property can be used to add and remove custom elements in the toolbar. Below is an example that inserts the 'About' button in the toolbar for Angular application. You can use the same approach in React, Vue, and ASP.NET MVC applications.

```javascript
import { Component, AfterViewInit } from '@angular/core';
 import { createViewer} from '@mescius/activereportsnet-viewer';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements AfterViewInit {
    title = "app";
  ngAfterViewInit() {
      this.viewer = createViewer({
        element: '#viewer-host'
      });
    var self = this; 
    var options = { filename: "DemoReport" };
    var pdfExportButton = {
        key: '$pdfExportButtonKey',
        iconCssClass: 'mdi mdi-file-pdf',
        text: "Pdf",
        enabled: true,
        action: function (item) {
          console.log('Export to PDF function works here');
          self.viewer.export('Pdf', null, true, options);
        },
        onUpdate: function (arg, item) {
          console.log('Something in viewer was updated, check/update button state here');
        }
      };
     this.viewer.toolbar.desktop.addItem(pdfExportButton);
    this.viewer.openReport("DemoReport.rdlx");
    }
  }
```

## Replacing toolbar and sidebar

Finally, the default toolbar and sidebar components of the Js Viewer can be hidden using the toolbar.toggle and sidebar.toggle methods. This approach can help if you decide to use custom UI to invoke viewer functions by using the public API. Here is an example of customizing Js Viewer toolbar and sidebar in an Angular application.

```javascript
import { Component, AfterViewInit } from '@angular/core';
import { createViewer} from '@mescius/activereportsnet-viewer';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent implements AfterViewInit {
   title = "app";
  ngAfterViewInit() {
    this.viewer = new createViewer({
       element: '#viewer-host'
     });
    this.viewer.toolbar.toggle(false);
    this.viewer.sidebar.toggle(false);
    this.viewer.openReport("DemoReport.rdlx");
   }
```