How to Create a New Category While Saving a Report in the Embedded Designer

When working with the Bold Reports server in an embedded application, you may find that there is no option to create a new category when saving a report on the server. However, you can customize the process to include this feature. This guide explains how to add a “New Category” button while saving a report using a sample JavaScript application.

Step 1: Configure the Application

Create a JavaScript application following the Bold Reports documentation. Then, define the create API event function to dynamically add the New Category button to the UI.

<script type="text/javascript">
   $("#designer").boldReportDesigner({
      create: controlInitialized
   });

   // Define the browseButton function
    function controlInitialized() {
        // Code to dynamically add "New Category" button and modify save behavior
    }   
</script>

Step 2: Add a New Category Create Button

In your application, use the create API event function to add a “New Category” button to the report designer’s UI. This customization modifies the save behavior to include the creation of a new category.

function controlInitialized(args) {
    var designerObject = $('#designer').data('boldReportDesigner');
    ej.ReportDesignerUtility.Toolbar.prototype.saveServerClick = function () {
        var browseDialog = this.designer.getInstance('BrowseDialog');
        browseDialog.allowRootSave = this.designer.allowRootSave;
        browseDialog.openDialog(ej.ReportDesigner.BrowseType.Save, $.proxy(saveAsServer, this), this.designer.reportFileName);
        if (!this.isCategoryRendered) {
            var footerTag = $('#designer' + '_footer_btn_div');
            var categoryButtonDiv = ej.buildTag('button', "New Category", {'float': 'left'}, { id: 'designer' + '_category_btn' });
            footerTag.append(categoryButtonDiv);
            var categoryButton = new ejs.buttons.Button({
                width: '83px', showRoundedCorner: false, size: 'mini', 'height': '25px',
            });
            categoryButtonDiv.appendTo(categoryButton[0]);
            categoryButtonDiv[0].onclick = () => {
            var designer = $('#designer').data('boldReportDesigner');
                designer.openPublishDialog("", false, function (args) { }, false, true, "", "");
            };
            this.isCategoryRendered = true;
        }
        function saveAsServer(args) {
            var designer = $('#designer').data('boldReportDesigner');
            if (args && ej.ReportUtil.isBooleanTrue(args.isExist)) {
                var folderPath = args.category + ((args.category === '/') ? '' : '/') + args.name;
                designer.editServerReport(folderPath, args.callBackInfo);
            } else {
                designer.serverCategory = {
                    name: args.name,
                    category: args.category
                };
                designer.createServerReport(designer.serverCategory, args.callBackInfo);
            }
        }
    };
}

Step 3: Initiate New Category Creation

Click the New Category button that appears in the report designer’s UI. This action triggers the Publish As Report dialog.

Step 4: Create the New Category

In the Publish As Report dialog, follow these steps:

1. Click on the New Category button within the application interface.
2. Enter the name of the new category in the dialog that opens and save it.
   
   
3. After creating the category, click the refresh icon to see the newly created category listed.
   
   

Step 5: Save the Report

Once the new category is created and listed, save your report to desired category.

By following these steps, you can customize the report designer to include a “New Category” button, allowing you to create and organize report categories directly on the Bold Reports server. This feature simplifies the process of organizing your reports, ensuring they are easily accessible.

You can download the complete sample application for the Embedded JavaScript Report Designer with the above changes from the provided link.