Calling Web Reader with custom parameters
This page explains how you can use parameters when calling Web Reader in order to customize its behavior depending on the current context.
Possibilities are unlimited, depending on how you extend Web Reader. In this tutorial, we are going to ask Web Reader to change D1 log output based on a parameter passed in the URL. ReaderWe Expected result of this showcase is that Web Reader, 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 Web Reader-related calls with a simple Groovy script
- Send a call to Web Reader, passing information necessary for the script to work
Before you begin
- You must have a running D1 instance with Web Reader (see Starting and stopping D1 and Conversion Service).
- You must have configured around-processor logic on D1 side (see Adding around-processor in Web Reader).
Calling Web Reader
When Web Reader with your logic is online, you can now call it with some documentId
and requestMeta
parameter added in the script. The following video shows how to call the Web Reader:
Note that some of the UI components shown in this video might have changed as the video was created based on a older version of the D1.
You can either use
#
or&
before thedocumentId
parameter. Using#
reloads the document, while using&
reloads the application.You can now use the
requestMeta
method in your calls, as inrequestMeta.myParameter=some_value
. Web Reader's around-processor that we added will then process your request by 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 Web Reader within an iFrame
The Web Reader can be integrated within an iFrame. To make sure that the Web Reader does not get reloaded on changing the documentId, the # notification needs to be used.
The following examples show how to use the Web Reader inside an iFrame by changing the URL parameter 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>Web Reader inside an iFrame Demo</h2>
<p>This snippet shows how to use the Web Reader inside an iFrame and adapting the documentId with # syntax. This avoid to reload the Web Reader 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>
Hiding and showing Web Reader panels
When calling Web Reader, you can set the visibility settings by 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 at the top is collapsed and can be expanded by using the Expand button. Right panel is hidden and can be shown by using the UI action in the Action bar (after you have expanded it).