Calling WebReader with Custom Parameters

This page explains how you can use parameters when calling WebReader in order to customize its behaviour depending on the current context. Possibilities are unlimited, depending on how you extend WebReader. In this tutorial, we are going to ask WebReader to change ADx log output based on a parameter passed in the URL.

Expected result of this showcase is that WebReader, when called with the correct parameters, puts their value into the log output around the request, that is before and after the request is executed. To achieve this, we are going to do the following:

Intercept WebReader-related calls with a simple Groovy script
Send a call to WebReader, passing information necessary for the script to work

Prerequisites

Running ADx instance with WebReader (see Starting and Stopping ADx and Conversion).
Configured logic on ADx side (see Adding Around-Processor in WebReader)

Calling WebReader

When WebReader with your logic is online, you can now call it with some documentId and requestMeta parameter added in the script. The video below shows how to call WebReader in a browser. Please note the following while watching:

You can either use # or & before the documentId parameter. Using # reloads the document, while using & reloads the application, as shown in the video below.
You can now use the requestMeta method in your calls, as in requestMeta.myParameter=some_value (also shown in the video). WebReader's around-processor that we added will then process your request using the passed values. Such a call could look as follows:
```
http://adx-local:9080/tribefire-web-reader/?accessId=access.adx.content.webreader&documentId=acbf5b7d-72ff-47df-9706-56f1c11201c0&requestMeta.myParameter=some_value
```

When you check the logs, you should find lines with the parameter that you've passed:

2020-05-27T13:24:07.497+0200 INFO    com.braintribe.model.processing.deployment.script.ScriptTools               'some_value' [com.braintribe.model.extensiondeployment.script.ScriptedAroundProcessor[externalId=processor.adx.around-e3ec22b6-559f-4811-9c15-dd23fca1d0ae.webreader],eval(GetDocumentInfo)#eag,from(/tribefire-services/rpc)#ead]

...
REQUEST_LOGS_HERE
...

2020-05-27T13:24:07.868+0200 INFO    com.braintribe.model.processing.deployment.script.ScriptTools               'some_value' [com.braintribe.model.extensiondeployment.script.ScriptedAroundProcessor[externalId=processor.adx.around-e3ec22b6-559f-4811-9c15-dd23fca1d0ae.webreader],eval(GetHighlightingInfo)#ean,from(/tribefire-services/rpc)#eam]

2020-05-27T13:24:07.868+0200 INFO    com.braintribe.model.processing.deployment.script.ScriptTools               'some_value' [com.braintribe.model.extensiondeployment.script.ScriptedAroundProcessor[externalId=processor.adx.around-e3ec22b6-559f-4811-9c15-dd23fca1d0ae.webreader],eval(GetHighlightingInfo)#eae,from(/tribefire-services/rpc)#eac]

Calling WebReader within an iFrame

The webReader can be integrated within an iFrame. To make sure that the webReader does not get reloaded on changing the documentId the # notification needs to be used. See below an example which demonstrates using the WebReader inside an iFrame by chaning the URL parameter of the without reloading the whole page.

Example URL

https://localhost:8443/webReaderInIFrame.html?url=https://localhost:10443/tribefire-web-reader/?accessId=access.adx.content.[REPOSITORY_TECHNICAL_NAME]#documentId=[DOCUMENT_ID]

Example URL with custom request parameter

https://localhost:8443/webReaderInIFrame.html?url=https://localhost:10443/tribefire-web-reader/?accessId=access.adx.content.[REPOSITORY_TECHNICAL_NAME]#documentId=[DOCUMENT_ID]&requestMeta.[PARAMETER_NAME]=[PARAMETER_VALUE]

Example html integration

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>webReader inside an iFrame Demo</h2>
<p>This snippet shows how to use the webReader inside an iFrame and adapting the documentId with # syntax. This avoid to reload the webReader on changing documents.</p>

<iframe id="webReaderIFrame" src="xxxx" height="1000" width="1200" title="WebReader in iFrame"></iframe>

<script>
	const hashString = window.location.hash;
	const queryString = window.location.search;
	const urlParams = new URLSearchParams(queryString);
	const hashParams = new URLSearchParams(hashString);	
	const url = urlParams.get("url");
	const documentId = hashParams.get("#documentId");	
	const iframe = document.getElementById('webReaderIFrame');

	
	customParameters = "";
	hashParams.forEach(function(value, key) {
		if (key.startsWith('requestMeta.')) {
			customParameters = customParameters + "&" + key + "=" + value;
		}
	});
	
	iframe.src = url + "#documentId="  + documentId + customParameters;

	function changeDocument(documentId) {
		el = document.getElementById('webReaderIFrame');
		el.src = url + "#documentId=" + documentId + customParameters;
		console.log(el.src);
	}
	
	window.onhashchange = function () {
		const hashString = window.location.hash;
		const hashParams = new URLSearchParams(hashString);	
		const documentId = hashParams.get("#documentId");	
		changeDocument(documentId);
	}	
</script>
</body>
</html>

WebReader Example in iFrame

Hiding and Showing WebReader Panels

When calling WebReader, you can set the visibility settings using the following URL parameters:

actionBar=hidden; actionBar=collapsed
rightPanel=hidden; rightPanel=collapsed

For example, to collapse the action bar and hide the right panel, use the following request:

```
http://adx-local:9080/tribefire-web-reader/?accessId=access.adx.content.webreader&documentId=acbf5b7d-72ff-47df-9706-56f1c11201c0&actionBar=collapsed&rightPanel=hidden
```

As a result, the action bar on top is collapsed and can be expanded using the expand button. Right panel is hidden and can be shown using the UI action in the action bar (after you have expanded it).