Reporting for React - Customize Viewer Toolbar

This example uses the CustomizeMenuActions event to make the following changes to the Document Viewer toolbar:

• Hide the Highlight Editing Fields command.
• Add a new Run Slide Show command.

Quick Start

Server

In the backend folder, run the following command:

dotnet run

The server uses http://localhost:5000. To debug the server, run the application within Visual Studio.

Client

In the react-document-viewer folder, run the following commands:

npm install
npm run dev

Enter the following URL in your browser to view results: http://localhost:3000/.

Implementation Details

Hide a Toolbar Command

To access a built-in toolbar command, call the GetById method and pass the ActionId value as a parameter. To hide a command and its toolbar button, set the command's visible property to false.

const onCustomizeMenuActions = ({ sender, args }: { sender: any, args: any }) => {
    var highlightEditingFieldsAction = args.GetById(ActionId.HighlightEditingFields);
    if (highlightEditingFieldsAction)
        highlightEditingFieldsAction.visible = false;
};

Add a New Toolbar Command

To add a new toolbar command, follow the steps below:

1. Create an image template:

   // ...
   const templateEngine = new TemplateEngine();
   templateEngine.setTemplate('slideshow', () => (
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24">
       <polygon className="dxd-icon-fill" points="4,2 4,22 22,12 " />
     </svg>
   ));
   // ...

2. Create a new CustomAction and specify command settings. Set the imageTemplateName property to the generated template's ID (slideshow):

   const onCustomizeMenuActions = ({ sender, args }: { sender: any, args: any }) => {
     let interval: any;
     const action = new CustomAction({
       text: "Run Slide Show",
       imageTemplateName: "slideshow",
       visible: true,
       disabled: false,
       selected: false,
       clickAction: function () {
         if (this.selected) {
           clearInterval(interval);
           this.selected = false;
           return;
         }
         var model = sender.GetPreviewModel();
         if (model) {
           this.selected = true;
           interval = setInterval(function () {
             var pageIndex = model.GetCurrentPageIndex();
             model.GoToPage(pageIndex + 1);
           }, 2000);
         }
       }
     });
     // ...
   };

3. Call the push method to add the created command to Actions collection:

   const onCustomizeMenuActions = ({ sender, args }: { sender: any, args: any }) => {
     // ...
     args.Actions.push(action);
   };

Files to Review

• page.tsx

Documentation

• Reporting for React
• Customize the Document Viewer Toolbar

More Examples

• Reporting for React - Add a Web Document Viewer to a React App
• Reporting for React - Customize Parameter Editor in the Web Document Viewer

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)