From Data to Destination: Making GoToR Links Smarter with WebViewer

Previously, in this series of articles, we have seen how we can work with and create GoToR links using Apryse WebViewer. We have seen how we can work around the “by-design” restriction of the browser to open arbitrary files, to create a more secure and flexible solution than is available for desktop apps such as Adobe Acrobat. We’ve also seen how we can create links using the UI in a simple intuitive way using two instances of WebViewer and a custom button.

In this article, we will go to the next step, and add custom data to our links, and show how we can use that to not just go to a page in a specific PDF but also to highlight specific blocks of text. Something that is not available for desktop apps.

And we’re going to do this by adding just a little more functionality to the code that we already have.

We have already seen:

It sounds like we have almost everything that we need!

You can get all of the source code for this series of articles from this GitHub.

The code for this article can be found in CreateWithRect.tsx which illustrates how to add custom data, and ShowRect.tsx which illustrates how to display it.

We’ve already seen how to get the quads that enclose the selected text in a PDF using Core.documentViewer.getSelectedTextQuads().

We used that mechanism, followed by converting it into a rectangle that enclosed the array of quads to decide where the link should be placed in document in the left-hand WebViewer.

We can use the same mechanism to get the location of text that is selected in the target document.

All we need to do is add the following to the onClick handler for the custom button that we created in the previous blog.

But how are we going to use that? Enter Custom Data.

Short answer, anything that you want it to be!

Longer answer, “custom data” is arbitrary metadata that you can attach to an annotation. Data that WebViewer itself doesn’t use, but that you can store and retrieve later.

Custom Data can be pretty much anything that you can convert into a string, you just need to specify a key and the value.

For example, you can add the value ‘abc123’ with a key of ‘dbid’ as follows.

What you do with that custom data is up to you, but being able to work with the Apryse Web SDK gives you huge flexibility.

You can use custom data to

In our case, we are going to store the rectangle that encloses the selected text.

We already know the location of the Rect that encloses the selected text, so we can just add that to the link when we create it. I could stringify the Rect, but for now, I will explicitly set the values for left, right, top and bottom.

We could also, if we want, store the original quads that we received from getSelectedTextQuads(), but I’m choosing not to at the moment (but I will in the next article).

That’s all we need to do in order to add the location data when creating the links. Why not run the code and try adding some annotations with rectangles to your own PDFs?

Now, let’s look at how we can consume that custom data.

We can get the custom data from a link or any other type of annotation by calling getCustomData and specifying the key for the data that we want.

In our case we stored the Rect information as four separate keys (“x1”, “x2”, “y1” and “y2”) so we can extract those and recreate the Rect location as follows:

The second article in this series showed how to work with links using two WebViewers side by side, so we already know how to open a document and navigate to the correct page.

The details of how you display the text that was selected are up to you. In my case, I’ve created a specific type to hold the Rect and page number, and I’m storing that in a state variable that I’m calling “selectedRect”.

I’m then using a useEffect that fires when the selectedRect changes.

The essential parts here are that we are creating a RectangleAnnotation based on the Rect that was stored in the link annotation. I’ve chosen to give it a red border with a semi-transparent fill, but you may prefer to style it differently.

The new annotation is then added to the annotationManager that belongs to the right-hand WebViewer (which is wv2Instance).

That’s it.

Now if we run the code, when we click on a custom GoToR link in the left-hand WebViewer, the code will not just navigate to the correct page, but also show the text that was selected:

When you combine this with the features that are built into WebViewer, such as the thumbnail view, this adds a whole new level of value to the document.

Even though we created the GoToR link with custom data, it can still be used in a desktop app such as Xodo PDF Studio, or Adobe Acrobat. While the rectangular annotation won’t be shown (that requires our custom code) the correct page will still be navigated to (provided that the target document is available).

We’ve shown one way that you can create links in one document that creates a RectangleAnnotation that takes you to the exact line, on the correct page, in another document.

There are other ways that you could do this with the Apryse SDK, and feel free to try those out. For example, you could use a TextHighlightAnnotation. The Apryse Web SDK offers many solutions.

Of course, you could just keep things simple and do it by hand, get WebViewer to open the page, then use the content of the link to search for the text on that page. That might work, but since the original document may have been scanned, and even the best OCR is imperfect, it could be an unreliable solution, and there might of course be multiple places where the search text was found.

Seriously, though, why would you want to search for text when it is so easy to create a solution that allows you to highlight what you need?

So far, we have kept things simple in order to give a taste of what is available, but there is much more that you could do:

If that wasn’t enough, WebViewer also offers a huge range of built-in functionality.

So why not check out the Apryse Showcase? You can see for yourself right now how WebViewer offers page manipulation, redaction, semantic text comparison, and support for digital signatures to name just a few.

Imagine how the built-in functionality, coupled with your custom code, will allow you to develop highly customizable solutions that are tailored to your specific workflow.

Don’t take my word for it, get yourself a trial license and try things out for yourself.