Headers customization

GroupDocs.Annotation Product Family
1

Hi,


<span style=“font-size:9.0pt;font-family:“Arial”,sans-serif;
mso-fareast-font-family:“Times New Roman”;mso-ansi-language:EN-US;mso-fareast-language:
EN-US;mso-bidi-language:AR-SA”>can you share with us the custom header styles that you used in .NET & Java Document Automation APIs | GroupDocs ?
We’d love to get some sample.

Thank you,
Mariusz

2
Hello Mariusz,

In the link you provided is used the GroupDocs.Viewer for Cloud. The menu toolbar and its styles are a bit different there. Unfortunately, we don’t have different style samples. But you can check in the documentation how to create a custom UI and using browser developer tools obtain CSS styles you need to modify to change the header design.

3

I tried following your sample but I found couple of issues:


1. Clear button doesn’t do anything, I have code below. It doesn’t clear the input and doesn’t unmark the found items from previous search.
<a id=“clearSearchValueButton” class=“ControlLink”>Clear Search Value

 $(’#clearSearchValueButton’).click(function () {

containerElement.groupdocsViewer(“clearSearchValue”);

});
2. Search - next/previous doesn’t work neither. When I type a text and hit enter it marks all the string occurences, but the arrows and enter doesn’t work after. I’m not moved to the next/previous search result.

    <input type=“text” id=“searchTextInput” class=“SearchTextInput”/>

<a id=“searchForwardButton” class=“ControlLink”>Search Forward

<a id=“searchBackwardButton” class=“ControlLink”>Search Backward

<a id=“clearSearchValueButton” class=“ControlLink”>Clear Search Value

 $(’#searchTextInput’).bind(“keypress”, function (e) {

var code = e.keyCode || e.which;

if (code == 13) { //Enter keycode

                                containerElement.groupdocsViewer(“searchForward”, $(this).val());

}

});

            $('#searchForwardButton').click(function () {
                    containerElement.groupdocsViewer(<span class="code-quote" style="color: rgb(0, 145, 0); background-color: inherit;">"searchForward"</span>, $('#searchTextInput').val());
            });

            $('#searchBackwardButton').click(function () {
                    containerElement.groupdocsViewer(<span class="code-quote" style="color: rgb(0, 145, 0); background-color: inherit;">"searchBackward"</span>, $('#searchTextInput').val());
            });

            $('#clearSearchValueButton').click(function () {
                    containerElement.groupdocsViewer(<span class="code-quote" style="color: rgb(0, 145, 0); background-color: inherit;">"clearSearchValue"</span>);
            });</pre><div><br></div><div>Thanks in advance for solving this issue.<br><div><br></div><div>Kind Regards,</div></div></div></div><div>Mariusz Pala</div>
4
Hello Mariusz,

Sorry to see you are facing this problem. It is strange behavior. I’ve just checked these triggers in the Dropwizard sample and they worked perfectly:
  • clearSearchValue – unmarked all found term occurrences; it does not clear the input field, you can do it by adding $("#searchTextInput").val(""); to the click function:
    $('#clearSearchValueButton').click(function () {
    $("#searchTextInput").val("");
    containerElement.groupdocsViewer("clearSearchValue");
    });
  • searchForward, searchBackward – browsed as intended between found word occurrences
The reason might be in the triggers attachment, make sure you attach them after the GroupDocs front-end (jQuery plugin) was applied.

Also, you can check if triggers work from the browsers console (developer tools).

5

OK, Clear button works now. Thank you. But the next/previous don’t work at all even in the standard (not custom) header. With a standard header the previous/text buttons are blocked/grayed out just after I hit Enter to search for a term.

6

Attaching a screenshot with a standard header behavior. Tested on a Word document, the searched term occurs at least once on each page. Doc has 700 pages.

7
Have you tried to execute JavaScript triggers from the browser console?
Are there some messages or errors in the browser console when these buttons are locked?
Also, what version of the GroupDocs.Viewer for Java library are you using?

8

We use GroupDocs.Annotation 1.7.0.

The API is called correctly as on enter the search is run. But it’s not moved forward on next enter, or on next button click. I checked all you samples/live demo samples, and those arrows are removed everywhere so maybe that’s some known issue :slight_smile:

$(’#searchTextInput’).bind(“keypress”, function(e) {
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
containerElement.groupdocsAnnotation(“searchForward”, $(this).val());
}
});
9
Sorry, I’ve misunderstood you. First you mentioned the GroupDocs.Viewer triggers so I tried the GroupDocs.Viewer library functionality. By default there is the HTML-rendering mode enabled, there everything works correctly. The opposite situation is with the GroupDocs.Annotation, it uses the image-rendering mode. Just checked those functions you mentioned there, unfortunately, indeed there is problem with searching functionality. I’ll report this to our developers.

Mariusz, can you tell a bit more about your use-case. In particular, to advise you better we need to understand what versions of the GroupDocs libraries you are using, with what configurations and under what circumstances. Please, provide us this info, then it would be easier for us to guide you or provide some help/fixes, etc.

10

We’re trying to integrate the annotation tool within our product and we need a custom header for that. We embed it within an iframe.

11

Thank you, what about issue, our developers were informed about it and are working to fix it. We will inform you about further progress. Sorry for the inconvenience.