# User Interface

> Adapt the Document Viewer's user interface: toolbar settings and methods, text selection, full screen, the mobile view and replacing the texts of the viewer.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Document Viewer > User Interface
- **3939 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/user-interface/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/user-interface/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/user-interface/llms-full.txt

---

To fit the Document Viewer into your own page layout or translate it for your users, you adapt its user interface. Your code docks, shows, hides and disables the toolbar, turns text selection on and off, switches to full screen, chooses the desktop or mobile view and replaces the texts the viewer shows.

The examples change the view of the [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/aspnet-core/llms-full.txt) tutorial. How the viewer is sized in its container is described there, in "Dock the Viewer".

### The Parts of the User Interface

- **The toolbar** contains the main functions: the thumbnail sidebar, zooming and panning, full screen, text selection, the two-page view, printing, downloading and the search box. It also opens the toolbars for annotations and tracked changes.
- **Contextual toolbars** appear for a function, such as the annotation toolbar with its pens and stamps, or the toolbar for tracked changes.
- **The status bar** shows the document name, the page number and the zoom lock.
- **Sidebars** show the page thumbnails and the comments of annotations.
- **Bars for forms and signatures** tell users that a document contains form fields to fill out or signature boxes to sign.
- **The page navigator** at the bottom of the pages shows the current page and moves to the previous or next page.

![The Document Viewer with an invoice letter: the toolbar at the top, the thumbnail sidebar on the left, the page navigator below the page and the status bar with "PAGE 1 OF 1", the zoom and the document name](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/document-viewer-letter.106cac8a.webp)

#### The Buttons of the Toolbar

![The toolbar of the Document Viewer: thumbnail sidebar, zoom drop-down list, zoom in, zoom out, pan, full screen, selection, two-page mode, print, download, the search box and the buttons for the annotation and tracked changes toolbars](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/viewer-toolbar.df610f32.webp)

From left to right, the toolbar contains these items, named by their tooltips:

| Item | Does | Described in |
|---|---|---|
| **Show and hide thumbnail sidebar** | Shows or hides the page thumbnails | [Navigation](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/navigation/llms-full.txt) |
| Zoom drop-down list, **Zoom in**, **Zoom out** | Set the zoom factor | [Zooming](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/zooming/llms-full.txt) |
| **Pan around the document** | Drags a zoomed page | [Zooming](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/zooming/llms-full.txt) |
| **Enable and disable full screen mode** | Switches the full screen mode | This page |
| **Enable and disable document selection** | Turns text selection on or off | This page |
| **Toggle two page mode** | Switches between one page and two pages side by side | [Navigation](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/navigation/llms-full.txt) |
| **Print the document** | Prints with the print function of the browser | [Printing](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/printing/llms-full.txt) |
| **Download the document as PDF** | Downloads the document as a PDF file | [Printing](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/printing/llms-full.txt) |
| Search box | Searches the document for the text users enter | [Search](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/search/llms-full.txt) |
| **Toggle the annotation toolbar** | Shows or hides the annotation toolbar | [Annotations](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/annotations/llms-full.txt) |
| **Toggle the tracked changes toolbar** | Shows or hides the tracked changes toolbar | [Tracked Changes](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/tracked-changes/llms-full.txt) |

The tooltips are string resources of the viewer, which [Replace the Texts of the Viewer](#replace-the-texts-of-the-viewer) changes.

The functions of the toolbar are described on their own pages: [Navigation](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/navigation/llms-full.txt), [Search](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/search/llms-full.txt), [Zooming](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/zooming/llms-full.txt), [Printing](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/printing/llms-full.txt), [Annotations](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/annotations/llms-full.txt) and [Tracked Changes](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/tracked-changes/llms-full.txt).

### Configure the Viewer in the View

Three settings of [DocumentViewerSettings](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc-documentviewer/documentviewersettings/llms-full.txt) change the user interface when the viewer starts. The following view shows a floating toolbar, turns text selection off and forces the desktop view. Replace the content of *Views/Home/Index.cshtml*:

```cshtml
@using TXTextControl.Web.MVC.DocumentViewer
@using System.Text

<div style="width: 800px; height: 600px;">

@Html.TXTextControl().DocumentViewer(settings => {
    settings.DocumentData = Convert.ToBase64String(
        Encoding.ASCII.GetBytes("<strong>Sample Content</strong>"));
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
    settings.ToolbarDocked = false;
    settings.IsSelectionActivated = false;
    settings.View = DocumentViewerSettings.ViewMode.Desktop;
}).Render()

</div>
```

The code works as follows:

- [ToolbarDocked](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc-documentviewer/documentviewersettings/toolbardocked-property/llms-full.txt) with `false` replaces the toolbar at the top of the viewer with a floating toolbar in the upper right corner, which users open with a click. By default, the toolbar is docked.
- [IsSelectionActivated](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc-documentviewer/documentviewersettings/isselectionactivated-property/llms-full.txt) with `false` turns text selection off. By default, users can select text and copy it to the clipboard.
- [View](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc-documentviewer/documentviewersettings/view-property/llms-full.txt) selects a value of [ViewMode](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc-documentviewer/documentviewersettings-viewmode/enumeration/llms-full.txt): `Desktop` for a view optimized for desktop devices or `Mobile` for mobile devices.

Run the application: the viewer shows a small toolbar button in its upper right corner instead of the toolbar. A click on the button opens the toolbar next to it:

![The floating toolbar of the Document Viewer, opened with the button in its upper right corner, above the first page of a letter](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/viewer-floating-toolbar.60ac9f83.webp)

In Angular, React and a plain JavaScript page, the first two settings are named `toolbarDocked` and `isSelectionActivated`; see the property tables of [Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/angular/#component-properties) and [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/react/#component-properties).

#### The Mobile View

The mobile view is designed for iOS and Android devices. It has a smaller button bar, and a round button in the lower right corner opens the buttons for annotations and signatures. If `View` isn't set, the viewer detects the device and chooses the view itself.

The button bar of the mobile view has the buttons **Zoom to the page's width**, **Zoom in**, **Zoom out** and **Enable and disable full screen mode**:

![The mobile view of the Document Viewer on a phone-sized screen: a button bar at the top right, the letter zoomed to the page width and a round pen button in the lower right corner](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/viewer-mobile-view.6e18d722.webp)

The blog article [DocumentViewer Mobile-Friendly View Released](https://www.textcontrol.com/blog/2022/01/20/document-viewer-mobile-friendly-view-released/) shows the mobile view.

### Control the User Interface From Code

[TXDocumentViewer.toolbar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/toolbar-property/llms-full.txt) returns the [Toolbar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/toolbar/llms-full.txt) object. The following buttons show and hide the toolbar, switch text selection and full screen and disable the toolbar while a document is loaded. Add them below the viewer's `div` in the view above:

```html
<input type="button" value="Show or Hide Toolbar" onclick="toggleToolbarVisibility()" />
<input type="button" value="Open or Close Floating Toolbar" onclick="TXDocumentViewer.toggleToolbar()" />
<input type="button" value="Text Selection" onclick="TXDocumentViewer.toggleSelection()" />
<input type="button" value="Full Screen" onclick="TXDocumentViewer.toggleFullScreen()" />
<input type="button" value="Load Document" onclick="loadWithDisabledToolbar()" />

<script>
    // The toolbar has no method that returns its visibility
    var toolbarVisible = true;

    function toggleToolbarVisibility() {
        if (toolbarVisible) {
            TXDocumentViewer.toolbar.hide();
        } else {
            TXDocumentViewer.toolbar.show();
        }
        toolbarVisible = !toolbarVisible;
    }

    async function loadWithDisabledToolbar() {
        TXDocumentViewer.toolbar.disable();
        try {
            await TXDocumentViewer.loadDocument(btoa("<strong>Loaded with JavaScript</strong>"), "loaded.html");
        } finally {
            TXDocumentViewer.toolbar.enable();
        }
    }
</script>
```

The code works as follows:

- [hide](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/toolbar/hide-method/llms-full.txt) and [show](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/toolbar/show-method/llms-full.txt) hide and display the toolbar. Because no method returns whether the toolbar is visible, the page keeps the state in a variable.
- [toggleToolbar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/toggletoolbar-method/llms-full.txt) opens and closes the floating toolbar that `ToolbarDocked = false` creates. To hide a docked toolbar, use `hide`.
- [toggleSelection](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/toggleselection-method/llms-full.txt) turns text selection on or off.
- [toggleFullScreen](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/togglefullscreen-method/llms-full.txt) switches between the full screen mode of the browser and the normal, docked viewer.
- [disable](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/toolbar/disable-method/llms-full.txt) and [enable](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/toolbar/enable-method/llms-full.txt) disable and enable the toolbar. `loadWithDisabledToolbar` disables the toolbar until the promise of `loadDocument` has settled.

The methods of `TXDocumentViewer` exist only after the viewer has raised `documentViewerLoaded`, so the buttons work once the viewer is loaded.

#### Items and Contextual Toolbars

The `Toolbar` object also has [getItems](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/toolbar/getitems-method/llms-full.txt) and [setItems](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/toolbar/setitems-method/llms-full.txt) for the items of the toolbar, and [contextualToolbars](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/toolbar/contextualtoolbars-property/llms-full.txt), an array of [ContextualToolbar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/contextualtoolbar/llms-full.txt) objects with `show` and `hide` methods. The reference describes the items only as an array and doesn't list the built-in items, and [ToolbarButton](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/toolbarbutton/llms-full.txt) documents the members of a button but no way to create one. To offer functions of your own, add HTML buttons to your page that call the JavaScript API, as the examples of this section do.

To show a specific contextual toolbar, use [annotations.showToolbar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/annotations/showtoolbar-method/llms-full.txt) or [trackedChanges.showToolbar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/trackedchanges/showtoolbar-method/llms-full.txt). The reference lists version 32.4.1 for the members of the toolbar objects.

### Replace the Texts of the Viewer

The viewer has no setting for the language of its user interface. Instead, its texts, such as the tooltips of the toolbar, the texts of the status bar and the dialog boxes, are string resources with names such as `TX_PAGE` (the "Page" text of the status bar) and `TX_MENU_PRINT_TITLE` (the tooltip "Print the document"). Your application replaces some or all of them:

- **ASP.NET Core view.** [DocumentViewerSettings.ResourceManager](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc-documentviewer/documentviewersettings/resourcemanager-property/llms-full.txt) takes a .NET `ResourceManager` with custom resources. All resources it contains replace the texts with the same names.
- **Angular and React.** The `resources` property of the component takes an object with the names and texts, for example `[resources]="{ TX_PAGE: 'Página', TX_PAGE_OF: 'de' }"` in Angular.

For the ASP.NET Core view, add a resource file to the project, for example *DocumentViewer.resx* with the access modifier **Public**, add an entry with the name `TX_PAGE` and the value `PAGE NUMBER`, and pass the generated class's `ResourceManager`:

```cshtml
@Html.TXTextControl().DocumentViewer(settings => {
    settings.DocumentPath = "App_Data/template.docx";
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
    settings.ResourceManager = MyViewerApp.DocumentViewer.ResourceManager;
}).Render()
```

`MyViewerApp` stands for the root namespace of your project. The status bar then shows "PAGE NUMBER" instead of "Page". The blog article [Angular DocumentViewer: Translating Resources](https://www.textcontrol.com/blog/2022/10/27/angular-documentviewer-translating-resources/) lists the names of the resources. It was published in 2022, so compare the list with the texts your version shows.

The Document Editor's user interface is localized differently, with a UI culture; see [Localization](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/localization/llms-full.txt).

### Next Steps

- [Navigation](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/navigation/llms-full.txt): the thumbnail sidebar and links.
- [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/javascript-api/llms-full.txt): all objects and methods of the viewer.
- [Annotations](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/annotations/llms-full.txt): the annotation toolbar and the comments sidebar.

---

## Nearby

- **Previous:** [Printing](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/printing/llms-full.txt)
- **Next:** [Annotations](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/annotations/llms-full.txt)