Web Components are custom HTML tags defined in JavaScript that are reusable with encapsulated functionality and that can be used in any web project. No specific "HTML Helper" such as MVC or Angular component views are required. In order to use Web Components, typically you only need to import the JavaScript and to add the custom HTML element tag to your HTML.

Web Component Advantages

Internally, the DocumentViewer will be changed to a Web Component, but can be also added via the MVC HTML Helper or the Angular component. Major advantages of this approach is that each instance of the Web Component uses an encapsulated shadow DOM with it's own style and markup. These are the major advantages:

  • Create more than one instance of the DocumentViewer
  • Style each instance individually
  • Access each instance via JavaScript

Adding Web Components

The element name of the Web Component is <tx-document-viewer> and can be simply added to any HTML page:

<script src="/TextControl/GetResource?Resource=minimized.tx-viewer.min.js"></script>
<script src="/TextControl/GetResource?Resource=minimized.tx-viewer-component.min.js"></script>
<tx-document-viewer
id="viewer1"
settings='{"documentData":"VGV4dCBDb250cm9s", "dock":1}'>
</tx-document-viewer>
view raw test.html hosted with ❤ by GitHub

When looking at the dynamically created DOM including the shadow DOM created by the TX Text Control DocumentViewer, you can see that the DocumentViewer instance has been created in the shadow DOM:

<tx-document-viewer id="viewer1">
#shadow-root (open)
<div id="txViewer">
<link href="/TextControl/GetResource?Resource=minimized.tx-viewer.min.css" rel="stylesheet" type="text/css">
<div id="tx-documentViewer" class="no-select">
<!--...-->
</div>
</div>
</tx-document-viewer>
view raw test.html hosted with ❤ by GitHub

Using JavaScript

Each instance is triggering a documentViewerLoaded event that gives access to the created instance:

window.addEventListener("documentViewerLoaded", function (e) {
e.target.TXDocumentViewer.loadDocument(btoa("Hi there!"));
});
view raw test.js hosted with ❤ by GitHub

But a better way to access the created instance(s) is to use the id of the created Web Component element:

viewer1.loadDocument(btoa("<strong>Viewer1</strong>"));
view raw test.js hosted with ❤ by GitHub

Multiple Instances

Previously, it was not possible to use more than one instance of the DocumentViewer on a page. This problem is solved with the introduction of Web Components. Now, it is possible to add unlimited number of instances. Each instance can be separately accessed through JavaScript:

<script src="/TextControl/GetResource?Resource=minimized.tx-viewer.min.js"></script>
<script src="/TextControl/GetResource?Resource=minimized.tx-viewer-component.min.js"></script>
<tx-document-viewer
id="viewer1"
settings='{"documentData":"VGV4dCBDb250cm9s", "dock":1}'>
</tx-document-viewer>
<tx-document-viewer
id="viewer2"
settings='{"documentData":"VGV4dCBDb250cm9s", "dock":1}'>
</tx-document-viewer>
<script>
function loadDocuments() {
viewer1.loadDocument(btoa("<strong>Viewer1</strong>"));
viewer2.loadDocument(btoa("<strong>Viewer2</strong>"));
}
</script>
view raw test.html hosted with ❤ by GitHub

Separate Stylesheets

Stylesheets can be manipulated individually for each instance by accessing the shadow DOM stylesheets programmatically. This change has another positive side-effect. If you have a CSS class named equally to an existing class of the DocumentViewer, the classes in the shadow DOM are not affected. The following JavaScript code changes the font color of the class #docName which is the document name string in the status bar of the DocumentViewer:

viewer1.shadowRoot.styleSheets[0].addRule('#docName', 'color: red;');
view raw test.js hosted with ❤ by GitHub

Backwards Compatibility

The new concept will be backwards compatible. In case, you are using the ASP.NET Core MVC HTML Helper, you can still use the helper and access the viewer programmatically using the TXDocumentViewer object. Even if you are using multiple instances of the viewer inserted using the MVC HTML Helper, the last created instance is accessible through the TXDocumentViewer object.

Availability

This version is currently in beta and will be released as an RC (Release Candidate) preview release very soon for your own testing. This new feature and many others are part of the current major release 31.0. The version of the DocumentViewer that is going to have these changes is 31.2.2.

Further upcoming features in this version:

  • PDF.js rendering
  • .NET compatible regular expressions for form field validation
  • Asynchronous page refreshing after zooming

Stay tuned!