Configuring Web Reader

Before you begin

To configure a view for the Web Reader, you will need the following details:

• Login token generated by a running D1 server
• An ID of a repository where the content of your interest is stored
• IDs of documents that you want to view.

URL and custom component parameters configuration

URL configuration and custom components configuration are very similar as the same parameters as URL parameters are used for the custom component configuration. The difference between these configuration options is in syntax of the format.

All custom component names start with data-. For example: data-session-id, data-access-id, etc.

If a parameter name has an upper case letter, for example P, then it is changed to a dash and lower case letter (for example, -p).

All URL parameters start with one of the following symbols, which defines the type of page refresh:

• & - reloads the whole WebReader. This method of calling the URL is slower.
• # - reloads a document opened in the Web Reader. This method of calling a URL is used for a quick refresh as not the whole WebReader is reloaded.

For example: &documentId, #sessionId, etc.

The following table describes the available URL and custom component parameters:

URL parameter	Custom component parameter	Description	Allowed values	Example
&sessionId	data-session-id	Specify a login token generated by the D1 server.	String	&sessionId= sessionId=20230707111852274- fdc2f2f0-e3cb-4196-b351-42c357ea475b
&accessId	data-access-id	Specify the access ID of a repository.	String	&accessId=access.adx.content.default The value after the last dot in the example value is a repository name.
&documentId	data-document-id	Specify IDs of the documents that you want to open in the Web Reader. Separate IDs with commas.	Sting	&documentId=22cb6a3a-5661-43f2-aae0-d61b3e644217, 22cb6a3a-5661-43f2-aae0-d61b3e644256
&search	data-search	Specify the search string. If the Split mode is enabled, enter comma separated values. The first value defined becomes primary view (text displayed in the left side of the Split mode), and the second value - secondary (text displayed in the right side of the Split mode). The format of the search string is URL Encoded Characters.	String to search left String to search right	&search=Text%20to%20search%20left, Text%20to%20search%20right
&searchProfile	data-search-profile	Specify additional configuration for search.	regex word case word-case	&searchProfile=word
&locale	data-locale	Specify the localization that cannot be changed by cookies.	en de hu pt ro sk sr uk	&locale=en
&default-locale	data-default-locale	Specify the localization which can be changed by cookies.	en de hu pt ro sk sr uk	&default-locale=de
&useSplitView	data-use-split-view	Use this parameter to enable the Split view.	true false	&useSplitView=true
&useBookView	data-use-book-view	Use this parameter to enable the Book mode.	true false	&useBookView=true
&pageNo	data-page-no	Specify the pages of the document which you want to open. In a case of the Split mode, enter comma separated values: the page number of the document displayed in the primary view, and the page number of a document displayed in the secondary view.	page number page number	&pageNo=2,3
&tab	data-tab	Specify which Left/Right panel will be opened by default. In a case of the Split view, enter comma separated values.	file search comment thumb	&tab=search,comment
&theme	data-theme	Use this parameter to open the Web Reader in the dark theme. If theme is not defined, the default behavior is applied. By default, the Web Reader is opened in the white theme.	dark	&theme=dark
&viewProfile	data-view-profile	Set the view mode for the Web Reader.	fullscreen complete header properties preview	&viewProfile=fullscreen
&zoomProfile	data-zoom-profile	Specify a zoom factor for width and height.	Fit page view to: height width Zoom ratio: 100 50 Fixed width values: width400 width600 width800 width1200 width1600 width2000 Fixed height values: height400 height600 height800 height1000 height1200 height1600 height2000	&zoomProfile=50
&logLevel	data-log-level	Set the console log level.	none info error all warn	&logLevel=info
&notifyProfile	data-notify-profile	Use this parameter to enable in-app notifications.	all refresh info none auto-update	notifyProfile=refresh
&commentNo	data-comment-no	Specify the comment thread ID that you want to be opened by the Web Reader automatically by automatically scrolling to the exact position of the page comment number	String	&commentNo=9005
&iconProfile	data-icon-profile	Specify whether you want to show or hide a user icon on comments.	show hide	&iconProfile=hide
&commentProfile	data-comment-profile		newAsDialog	&commentProfile=newAsDialog

Web Reader URL example

Here is an example of the Web Reader URL:

https://d1-server-address/services/d1-webreader/?accessId=access.adx.content.repo-name#documentId=229f505e-04ea-4a42-8acf-a35cc30bac07

As you can see, the D1 server address, repository name and document ID is defined in this URL.

Here is an example of another URL:

https://d1-server-address/services/d1-webreader/?accessId=access.adx.content.repo-name#documentId=229f505e-04ea-4a42-8acf-a35cc30bac07,a614fd55-9e40-4a79-8de8-cebf621395a6,fb934cc5-c05b-4e89-a077-d401f4edee8f

In this example, we have opened three documents in the Web Reader. The document IDs are comma separated values.

Web Reader component configuration example

The following paragraphs provide the whole custom component configuration examples with HTML code (with custom css, and init scripts).

<!-- Place code into your HTML Body part -->

<!-- Define container size for UI Component -->
<div style="width: 100%; height: 50%;">
    <!-- UI Component - WebReader -->
    <web-reader-element
        id="d1-wr-app"
        data-component-prefix="d1-webreader/"
        data-custom-content="true"
        data-locale="en"
        data-use-split-view="false"
        data-log-level="info"
         data-view-profile="fullscreen"
        data-zoom-profile="height"
        data-session-id="20231116171002297-b6d90899-37e5-4966-9b4a-78b01c57f961"
        data-services-url="https://dev-phoenix-adx.staging.document.one/services/"
        data-access-id="access.adx.content.default"
    >
        <!-- UI Component - Load module (.js) and style (.css) -->
        <script src="https://dev-phoenix-adx.staging.document.one/services/d1-webreader/script/tribefire/tribefire.js" id="tribefire-js"> </script>
        <script src="https://dev-phoenix-adx.staging.document.one/services/d1-webreader/script/ionic/ionic.esm.js" id="ionic-esm-js" type="module"> </script>
        <script src="https://dev-phoenix-adx.staging.document.one/services/d1-webreader/script/ionic/ionic.js" id="ionic-js" nomodule=""> </script>
        <link rel="stylesheet" type="text/css" href="https://dev-phoenix-adx.staging.document.one/services/d1-webreader/js/d1-webreader.css">
        <link rel="stylesheet" type="text/css" href="https://dev-phoenix-adx.staging.document.one/services/d1-webreader/global.css">
        <script src="https://dev-phoenix-adx.staging.document.one/services/d1-webreader/js/d1-webreader.js" id="d1-web-reader-js" type="module"> </script>
    </web-reader-element>
</div>