Skip to main content
Version: 2.10

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​

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:

Video version

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.

Note

  • You can either use # or & before the documentId parameter. Using # reloads the document, while using & reloads the application.

  • You can now use the requestMeta method in your calls, as in requestMeta.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).