Web Designer Initialization

This document provides information on how to set up Web Designer and utilize its API.

Following folders or files are mandatory to set up Web Designer:

Module	Folders/Files
Base Server API	baseServerApi.js
Web Designer	web-designer.js, web-designer.css
Vendor	vendor folder

Basic Designer Sample

The snippet below illustrates the idea how basic designer sample can be prepared:

index.html	Copy Code
<!DOCTYPE html> <html> <head> <title>Web Designer Sample</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- designer-related css --> <link rel="stylesheet" href="vendor/css/materialdesignicons.min.css" media="all" type="text/css" /> <link rel="stylesheet" href="vendor/css/bootstrap.min.css" /> <link rel="stylesheet" href="vendor/css/font-awesome.min.css"> <link rel="stylesheet" href="vendor/css/ionicons.min.css"> <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css"> <link rel="stylesheet" href="web-designer.css" /> </head> <body class="theme-blue"> <!-- designer-related js --> <script src="vendor/js/jquery.min.js"></script> <script src="vendor/js/bootstrap.min.js"></script> <script src="baseServerApi.js"></script> <script src="web-designer.js"></script> <!-- designer root div --> <div id="designer-id" style="width: 100%; height: 100%;"></div> <script> // create designer options var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi); // render designer application GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions); </script> </body> </html>

index.html

Copy Code

        
<!DOCTYPE html>
<html>
<head>
    <title>Web Designer Sample</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- designer-related css -->
    <link rel="stylesheet" href="vendor/css/materialdesignicons.min.css" media="all" type="text/css" />
    <link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
    <link rel="stylesheet" href="vendor/css/font-awesome.min.css">
    <link rel="stylesheet" href="vendor/css/ionicons.min.css">
    <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
    <link rel="stylesheet" href="web-designer.css" />
</head>
<body class="theme-blue">
    <!-- designer-related js -->
    <script src="vendor/js/jquery.min.js"></script>
    <script src="vendor/js/bootstrap.min.js"></script>
    <script src="baseServerApi.js"></script>
    <script src="web-designer.js"></script>
    <!-- designer root div -->
    <div id="designer-id" style="width: 100%; height: 100%;"></div>
    <script>
        // create designer options
        var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);
        // render designer application
        GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
    </script>
</body>
</html>

Functions createDesignerOptions() and renderApplication() are described below.

Public API

The module web-designer.js has GrapeCity.ActiveReports.WebDesigner object providing the following Public API.

Create Designer Options

Parameters	Return Value
createDesignerOptions(designerServerApi: DesignerServerApi)	DesignerOptions

Description: Creates the default DesignerOptions to be passed to renderApplication() function. This object includes both required and optional Designer settings.

Example:

	Copy Code
var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);

For more information, see topics Designer Server API Object and Designer Options Object.

Render Designer Application

Parameters	Return Value
renderApplication(designerElementId: string, designerOptions: DesignerOptions)	void

Description: Renders Web Designer to <div> element with id designerElementId using the specified DesignerOptions object.

Example:

	Copy Code
GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);

Reporting API

This section contains information about functions from GrapeCity.ActiveReports.WebDesigner.api.

Create Report

The GrapeCity.ActiveReports.WebDesigner.api provides the ability to create a report using the GrapeCity.ActiveReports.WebDesigner.api.createReport() function.

Parameters	Return Value
GrapeCity.ActiveReports.WebDesigner.api.createReport(createReportOptions: CreateReportOptions)	void

Description: This function expects a single mandatory argument – CreateReportOptions object.

Create Report Options Object

	Copy Code
type CreateReportOptions = { templateInfo?: TemplateInfo, dataSets?: Array<DataSetInfo>, // These functions can be used for making UI changes // (e.g. drawing overlays or switching current view) // while report is getting created. onStart?: { (): void }, onFinish?: { (): void }, }

Copy Code

type CreateReportOptions = {
    templateInfo?: TemplateInfo,
    dataSets?: Array<DataSetInfo>,
    // These functions can be used for making UI changes
    // (e.g. drawing overlays or switching current view)
    // while report is getting created.
    onStart?: { (): void },
    onFinish?: { (): void },
}

The mentioned objects TemplateInfo and DataSetInfo can be found below.

Template Info Object

	Copy Code
// If templateInfo is specified for report creation, // either id or content needs to be defined. type TemplateInfo = { name: string, id?: string, // Template content in JSON format that can be useful // in case you would like to create a non-empty new report content?: object, }

Copy Code

// If templateInfo is specified for report creation,
// either id or content needs to be defined.
type TemplateInfo = {
    name: string,
    id?: string,
    // Template content in JSON format that can be useful
    // in case you would like to create a non-empty new report
    content?: object,
}

Data Set Info Object

	Copy Code
type DataSetInfo = { name: string, id: string, }

Example:

	Copy Code
GrapeCity.ActiveReports.WebDesigner.api.createReport({ onFinish: () => { console.log('An empty RDL report is created.'); }; });

Open Report

The GrapeCity.ActiveReports.WebDesigner.api provides the ability to open a report using the GrapeCity.ActiveReports.WebDesigner.api.openReport() function.

Parameters	Return Value
GrapeCity.ActiveReports.WebDesigner.api.openReport(openReportOptions: OpenReportOptions)	void

Description: This function expects a single mandatory argument – OpenReportOptions object.

Open Report Options Object

	Copy Code
type OpenReportOptions = { reportInfo: OpenReportInfo, // These functions can be used for making UI changes // (e.g. drawing overlays or switching current view) // while report is getting opened. onStart?: { (): void }, onFinish?: { (): void }, }

Copy Code

type OpenReportOptions = {
    reportInfo: OpenReportInfo,
    // These functions can be used for making UI changes
    // (e.g. drawing overlays or switching current view)
    // while report is getting opened.
    onStart?: { (): void },
    onFinish?: { (): void },
}

Please find more details about OpenReportInfo object below.

Open Report Info Object

	Copy Code
// For report opening either id or content has to be defined. type OpenReportInfo = { name: string, id?: string, // Report content in JSON format content?: object, }

Example:

	Copy Code
GrapeCity.ActiveReports.WebDesigner.api.openReport({ reportInfo: { id: 'MyReport.rdlx', name: 'MyReport.rdlx', } onFinish: () => { console.log('An existing report "MyReport.rdlx" is opened.'); }; });

Save Report

The GrapeCity.ActiveReports.WebDesigner.api provides the ability to save a report using the GrapeCity.ActiveReports.WebDesigner.api.saveReport() function.

Parameters	Return Value
GrapeCity.ActiveReports.WebDesigner.api.saveReport(saveReportOptions: SaveReportOptions)	void

Description: This function expects a single mandatory argument – SaveReportOptions object.

Save Report Options Object

	Copy Code
type SaveReportOptions = { reportInfo: SaveReportInfo, // These functions can be used for making UI changes // (e.g. drawing overlays or switching current view) // while report is getting opened. onStart?: { (): void }, onFinish?: { (): void }, }

Copy Code

type SaveReportOptions = {
    reportInfo: SaveReportInfo,
    // These functions can be used for making UI changes
    // (e.g. drawing overlays or switching current view)
    // while report is getting opened.
    onStart?: { (): void },
    onFinish?: { (): void },
}

Please find more details about SaveReportInfo object below.

Save Report Info Object

	Copy Code
type SaveReportInfo = { // The correct name needs to be always specified explicitly. name: string, // If an existing report is to be overwritten on saving, // the correct id should be specified explicitly. id?: string, }

Copy Code

type SaveReportInfo = {
    // The correct name needs to be always specified explicitly.
    name: string,
    // If an existing report is to be overwritten on saving,
    // the correct id should be specified explicitly.
    id?: string,
}

Example:

	Copy Code
GrapeCity.ActiveReports.WebDesigner.api.saveReport({ reportInfo: { name: 'MyReport.rdlx', } onFinish: () => { console.log('A new report "MyReport.rdlx" is saved.'); }; });

Get information about Report

The GrapeCity.ActiveReports.WebDesigner.api provides the ability to get information about the currently edited report using these functions:

GrapeCity.ActiveReports.WebDesigner.api.getReportInfo() – this function returns CurrentReportInfo object having this structure:

	Copy Code
// If an existing report is edited, id is defined. // Otherwise, if a new report is edited, id is null. type CurrentReportInfo = { id: string, name: string, isTemplate: boolean, // Reserved for future use. permissions: Array<string>, }

Copy Code

// If an existing report is edited, id is defined.
// Otherwise, if a new report is edited, id is null.
type CurrentReportInfo = {
  id: string,
  name: string,
  isTemplate: boolean, // Reserved for future use.
  permissions: Array<string>,
}

Example:

	Copy Code
const reportInfo = GrapeCity.ActiveReports.WebDesigner.api.getReportInfo(); console.log(`Report "${reportInfo.name}" is currently edited.`);

GrapeCity.ActiveReports.WebDesigner.api.isReportDirty() – this function returns a Boolean value telling whether report has unsaved changes:
Example:

	Copy Code
const hasUnsavedChanges = GrapeCity.ActiveReports.WebDesigner.api.isReportDirty(); if (hasUnsavedChanges) console.log('Currently edited report has unsaved changes.');

Get information about ActiveReports Web Designer

The GrapeCity.ActiveReports.WebDesigner allows getting general information about Designer using these functions:

GrapeCity.ActiveReports.WebDesigner.getAboutInfo() - this function returns AboutInfo object containing information about application name/version and product title/version.
GrapeCity.ActiveReports.WebDesigner.getHelpInfos() - this function returns Array<HelpInfo> containing title/link pairs of Designer-related Help pages.

Both functions are intended for customizing information shown in File View in the corresponding areas - About and Help respectively - which are managed by aboutInfo and helpInfos properties of FileViewBaseOptions object.

Supplementary API

Focus Designer

The GrapeCity.ActiveReports.WebDesigner allows returning focus to Designer using GrapeCity.ActiveReports.WebDesigner.focus() function. Focus may be lost when plug-in components are opened or closed. Returning focus is essential to continue using Designer hotkeys like Ctrl+Z (undo), Ctrl+Y (redo), etc.

Example:

	Copy Code
GrapeCity.ActiveReports.WebDesigner.focus();

APPENDIX

About Info Object

	Copy Code
type AboutInfo = { // Application title replaces 'ActiveReports Web Designer' // in all the places where it is used by default. applicationTitle?: string, // Compact application title is used in places // where there is not enough space for a full title. applicationTitleCompact?: string, // By default the product title correlates with the back-end. // However, it is possible to overwrite it. productTitle?: string, // The same is applicable for the product version - by default // it is taken from the back-end but can be overwritten. productVersion?: string, }

Copy Code

type AboutInfo = {
    // Application title replaces 'ActiveReports Web Designer'
    // in all the places where it is used by default.
    applicationTitle?: string,
    // Compact application title is used in places
    // where there is not enough space for a full title.
    applicationTitleCompact?: string,
    // By default the product title correlates with the back-end.
    // However, it is possible to overwrite it.
    productTitle?: string,
    // The same is applicable for the product version - by default
    // it is taken from the back-end but can be overwritten.
    productVersion?: string,
}

Help Info Object

	Copy Code
type HelpInfo = { // Help page title title?: string, // Help page url link: string, }

For Web Designer Plug-ins, see Web Designer Plug-ins API.