Enable the Publish Prompt in the Bold Reports React Report Designer

The Publish Prompt in the Bold Reports React Report Designer empowers users to publish reports directly to the Report Server with rich metadata—including category, name, description, and tags. This ensures reports are well-organized, easily discoverable, and seamlessly integrated into your reporting environment.

This guide explains how to enable and customize the Publish Prompt in a React application. You can start with either a new React project created using the React Reporting User Guide or an existing one.

Steps to Implement the Publish Prompt

Step 1: Initialize and Render the Designer

Customize the Report Designer toolbar to remove the default Save button and encourage users to use the Publish Prompt instead.

const designerStyle = {
  height: '700px',
  width: '100%'
};

const toolbarSettings = {
  items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.Save
};

Code Snippet	Description
`toolbarSettings`	Configures the Report Designer toolbar.
`items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.Save`	Displays all toolbar items except the default Save button using a bitwise operation.

Step 2: Render the BoldReportDesignerComponent

Embed the component with your Report Server configuration and event handlers:

<BoldReportDesignerComponent
  id="designer"
  serviceUrl={'https://adhoc.boldreports.com/reporting/reportservice/api/Designer'}
  reportServerUrl={'https://adhoc.boldreports.com/reporting/api/site/site1'}
  serviceAuthorizationToken={'bearer <server token>'}
  toolbarSettings={toolbarSettings}
  toolbarRendering={updateDesignerToolBar}
  toolbarClick={toolbarClick}
  ajaxBeforeLoad={ajaxBeforeSend}
/>

Note: Replace serviceUrl, reportServerUrl, and <server token> with your Bold Reports Server details and authorization token.

Step 3: Add a Custom Save Button

Use the toolbarRendering event to add a custom Save button to the toolbar.

function updateDesignerToolBar(args) {
  if (args && args.target && $(args.target).hasClass('e-rptdesigner-toolbarcontainer')) {
    if (args.action === 'beforeCreate') {
      args.items[0].Items.splice(2, 0, {
        prefixIcon: 'b-toolbar-item e-rptdesigner-toolbar-icon e-toolbarfonticonbasic e-rptdesigner-toolbar-save',
        tooltipText: 'CustomSave',
        id: args.target[0].id + '_custom_btn_save',
        htmlAttributes: {
          id: args.target[0].id + '_custom_save',
          'aria-label': 'CustomSave'
        }
      });
    }
  }
}

Function	Description
`updateDesignerToolBar(args)`	Inserts a custom Save button into the toolbar at the desired position.

Step 4: Handle Clicks to Open the Publish Prompt

Override the default Save action and open the Publish Prompt dialog.

function toolbarClick(args) {
  const designer = $('#designer').data('boldReportDesigner');
  if (args.click === 'New') {
    // Reset metadata if needed.
  } else if (args.click === 'Save') {
    args.cancel = true; // Prevent default save behavior.
    const tagInfo = {tags: tags, selectedTags: selectedTags };
    designer.openPublishDialog(description, function (args) {
      if (args['type'] === 'Save') {
        saveAsServer(args.name, args.category, args.categoryId, args.description, args.tags, args.callBackInfo);
      }
    }, true, tagInfo, reportName);
  }
}

Snippet	Description
`toolbarClick(args)`	Handles toolbar interactions.
`args.cancel = true`	Blocks the default save action.
`designer.openPublishDialog`	Launches the Publish Prompt with metadata fields.

Step 5: Save the Report to the Server

Implement a custom save function to publish with user-provided metadata:

function saveAsServer(name, category, catId, reportDescription, tags, callBackInfo) {
  var designer = $('#designer').data('boldReportDesigner');
  categoryName = category;
  reportName = name;
  description = reportDescription;
  selectedTags = tags;
  designer.reportFileName = reportName;
  designer.saveReport(categoryName + '/' + reportName, null, callBackInfo);
}

function ajaxBeforeSend(args) {
  if (
    args.actionType === 'openServerReport' ||
    args.actionType === 'saveServerReport' ||
    args.actionType === 'createServerReport' ||
    args.actionType === 'HasDraftReport'
  ) {
    args.data = {
      category: categoryName,
      reportName: reportName,
      description: description,
      tags: selectedTags
    };
  }
}

Note: The saveAsServer and ajaxBeforeSend functions ensure that reports are saved to the server with complete metadata.

Preview

When users click the custom Save button, the Publish Prompt dialog appears, allowing them to enter report metadata before publishing.

Explore the full implementation with this sample application.

Conclusion

Customizing the Publish Prompt in the React Report Designer streamlines report publishing with structured metadata. This improves organization, searchability, and overall efficiency in your Bold Reports deployment.