ActiveReports provides a rich API for integrating the web designer components into your web application. To embed the Web Designer component in your project, use the Web Designer API. It lets you create, design, and save reports with added capabilities that include - defining the locale for the designer, customizing the default settings of the report items, managing the Data and Properties tab, modifying the application info, and much more.
Type of GrapeCity.ActiveReports.Designer object exported by the web-designer.js module.
create()
Description: Renders the Web Designer component to the <div> element with given selector using the specified DesignerSettings object.
Parameter (Type):
Return Type: Promise<DesignerAPI>
Required: Yes
Sample Code |
Copy Code
|
---|---|
GrapeCity.ActiveReports.WebDesigner.create('designer-id', designerSettings);
|
apiOf()
Description: Returns the DesignerAPI of the previously created instance of the Web Designer component.
Parameter (Type):
Return Type: DesignerAPI | undefined
Required: Yes
addLanguage()
Description: Returns the DesignerAPI of the previously created instance of the Web Designer component.
Parameter (Type):
Return Type: void
Required: Yes
Localization resource for a specific locale.
lng
Description: Refers to the bundle language.
Return Type: string
Required: Yes
ns
Description: Refers to the bundle namespace.
Return Type: string
Required: Yes
resources
Description: Refers to the localization resources.
Return Type: Record<string, any>
Required: Yes
Type of object returned by functions from the GlobalDesignerAPI.
app
Description: Contains application-related APIs.
Required: Yes
about
Description: Contains documentation links and application-related information.
Required: Yes
help
Description: Contains designer-related documentation links.
Required: Yes
general
Description: Refers to the general documentation.
Return Type: { text: string; url: string }
Required: Yes
transformation
Description: Refers to the report items transformation information.
Return Type: { text (optional): string; url: string }
Required: Yes
applicationTitle
Description: Specifies the application title for the Web Designer component.
Return Type: string
Required: Yes
applicationTitleCompact
Description: Specifies the compact version of the application title for the Web Designer component.
Return Type: string
Required: Yes
applicationVersion
Description: Specifies the application version for the Web Designer component.
Return Type: string
Required: Yes
coreVersion
Description: Refers to the Designer Core version an application is based on.
Return Type: string
Required: Yes
panels
Description: Contains access to the menu and sidebar panels. It Contains following objects: menu and sidebar.
menu
Description: Menu API.
open()
Parameter Type:
id: string
Return Type: void
pin
close
Sample Code |
Copy Code
|
---|---|
GrapeCity.ActiveReports.Designer.apiOf('designer-id').app.panels.menu.open('document-explorer'); |
sidebar
Description: Sidebar API.
open()
Parameter Type:
id: string
Return Type: void
close
Sample Code |
Copy Code
|
---|---|
GrapeCity.ActiveReports.Designer.apiOf('designer-id').app.panels.sidebar.open('dataTab'); |
focus()
Description: Returns focus to the Web Designer component. Focus may be lost when plugged-in or external components are opened/closed. Returning focus is essential to continue using designer hotkeys like Ctrl+Z (undo), Ctrl+Y (redo), etc.
Return Type: void
Required: Yes
Sample Code |
Copy Code
|
---|---|
GrapeCity.ActiveReports.Designer.apiOf('designer-id').app.focus();
|
editor()
Description: Information about the availability of common actions with the report and selected items
Required: Yes
Sample Code |
Copy Code
|
---|---|
GrapeCity.ActiveReports.Designer.apiOf('designer-id').app.editor.canUndo();
|
The following flags indicate whether the editor is able to perform the corresponding action. The Return Type of these flags is 'boolean'.
canUndo()
canRedo()
canCut()
canPaste()
canCopy()
canDelete()
The following are the editor actions. The Return Type of these actions is 'void'.
undo()
redo()
cut()
copy()
documents
Description: This object includes functions allowing you to create, open, save reports, and more.
Return Type: DocumentsAPI
Required: Yes
notifications
Description: Allows to utilize the built-in notifications system in the Web Designer component.
Return Type: NotificationsAPI
Required: Yes
API to create, edit, open, or save report, to fetch information on unsaved reports, and more.
hasUnsavedChanges()
Description: Indicates whether the report has unsaved changes.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
var hasUnsavedChanges = GrapeCity.ActiveReports.Designer.apiOf('designer-id').documents.hasUnsavedChanges(); if (hasUnsavedChanges) console.log('Currently edited report has unsaved changes.'); |
isNew()
Description: Indicates whether the report was saved at least once.
Return Type: boolean
Required: Yes
info()
Description: Returns information about the currently edited report in the Web Designer component.
Return Type: CurrentDocumentInfo
Required: Yes
Sample Code |
Copy Code
|
---|---|
var reportInfo = GrapeCity.ActiveReports.Designer.apiOf('designer-id').documents.info(); console.log(`Report "${reportInfo.name}" is currently edited.`); |
create()
Description: Creates a new report to be edited in the Web Designer component using the specified CreateReportOptions object.
Parameter (Type):
Return Type: Promise<CreateDocumentInfo>
Required: Yes
Sample Code |
Copy Code
|
---|---|
var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id'); api.documents.create().then(() => { console.log('An empty RDL report is created.'); }) |
open()
Description: Shows the Open Report dialog box in the Web Designer component.
Return Type: void
Required: Yes
openById()
Description: Opens an existing report to be edited in the Web Designer component with a specified id. Optionally, you can pass the report name and content, else it will be loaded from the server.
Parameter (Type):
Return Type: Promise<OpenDocumentInfo>
Required: Yes
Sample Code |
Copy Code
|
---|---|
var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id'); api.documents.openById('MyReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'cpl'}).then(() => { console.log('An existing report "MyReport.rdlx" is opened.'); }); var reportContent = { Type: 'report', Body: { ReportItems: [ {Type: 'textbox', Name: 'TextBox1', Width: '5in', Height: '1in' } ] }}; api.documents.openById('NewReport.rdlx', { platform: 'rdlx', type: 'report', subType: 'cpl'}, 'NewReport', reportContent).then(() => { console.log('New report with one textbox created and opened.'); }); |
save()
Description: Saves the currently edited report in the Web Designer component. If the report is new, then the Save As dialog box will be opened.
Return Type: void
Required: Yes
saveAs()
Description: Opens the Save As dialog box in the Web Designer component.
Return Type: void
Required: Yes
saveById()
Description: Saves the currently edited report in the Web Designer component using the specified id.
Parameter (Type):
Return Type: Promise<SaveDocumentInfo>
Required: Yes
Sample Code |
Copy Code
|
---|---|
var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id'); api.documents.saveById('MyReport.rdlx') |
saveByName()
Description: Saves the report currently edited in the Web Designer component using the specified name.
Parameter (Type):
Return Type: Promise<SaveDocumentInfo>
Required: Yes
Sample Code |
Copy Code
|
---|---|
var api = GrapeCity.ActiveReports.Designer.apiOf('designer-id'); api.documents.saveById('MyReport.rdlx') |
Section Report (.rpx) document type.
platform
'rpx'
type
'report'
Page Report (.rdlx) document type.
platform
'rdlx'
type
'report'
subType
'fpl'
RDL report (.rdlx) document type.
platform
'rdlx'
type
'report'
subType
'cpl'
RDL Multi-Section (.rdlx) document type.
platform
'rdlx'
type
'report'
subType
'msl'
RDL Dashboard (.rdlx) document type.
platform
'rdlx'
type
'dashboard'
subType
'msl'
Page, RDL, Section, RDL Multi-Section, or RDL Dashboard document type.
Acceptable Values |
Copy Code
|
---|---|
RdlxCplReportDocumentType | RdlxFplReportDocumentType | RdlxMslReportDocumentType | RdlxMslDashboardDocumentType; |
Type of documents supported by the Web Designer component.
Acceptable Values |
Copy Code
|
---|---|
RpxReportDocumentType | RdlxReportDocumentType |
API for notifications for a user action, error, warning, and more.
send()
Description: Sends a notification of the specified level, including caption and content.
Parameter (Type):
Return Type: void
Required: Yes
info()
Description: Sends a general notification, which can be used to notify when any user-initiated action is complete.
Parameter (Type):
Return Type: void
Required: Yes
error()
Description: Sends an error notification.
Parameter (Type):
Return Type: void
Required: Yes
warning()
Description: Sends a warning notification.
Parameter (Type):
Return Type: void
Required: Yes
dismissAll()
Description: Dismisses all notifications.
Return Type: void
Required: Yes
label
Return Type: string
Required: Yes
value
Return Type: string
Required: Yes
header
Return Type: string
Required: Yes
API for designer settings.
instanceId
Description: Indicates the unique identifier for the Web Designer instance. This is required if there are multiple instances of the Web Designer on the same page.
Return Type: string
Required: Yes
language
Description: Specifies the language to use for the Web Designer component. If language is not specified, browser preferences are used. The localization is available in following languages: 'en', 'ja', 'zh', 'zh-TW', 'es', 'ko', and 'pl'.
Sample Code |
Copy Code
|
---|---|
designerSettings.language = 'ja';
|
Return Type: string
Required: Yes
fonts
Description: Specifies the list of fonts displayed in the Font editors all over the Web Designer component, and supports plain strings, label-value pairs, headers, and splitters. If fonts are not specified explicitly here, the default list of fonts is used:
'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Geneva', 'Georgia', 'Helvetica', 'Impact', 'Lucida Console', 'Meiryo', 'Meiryo UI', 'MingLiU', 'MingLiU-ExtB', 'MS Gothic', 'MS Mincho', 'MS PGothic', 'MS PMincho', 'MS Song', 'MS UI Gothic', 'NSimSun', 'Osaka', 'PMingLiU', 'PMingLiU-ExtB', 'SimSun', 'SimSun-ExtB', 'Song', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', and 'Yu Gothic'.
Return Type: (string | Font | FontHeader)[]
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.fonts = [{ header: 'Questionable Choice' }, { label: 'Pretty Font', value: 'Comic Sans MS' }, { header: '' }, 'Arial', 'Courier New', 'Times New Roman']; |
imageMimeTypes
Description: Specifies the list of supported image mime-types in the Web Designer component.
Return Type: string[]
Required: Yes
units
Description: Specifies the default measurement units for the Web Designer component. The default unit is inches.
Return Type: 'in' | 'cm'
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.units = 'cm';
|
lockLayout
Description: By default, the lockLayout property is set to 'false'. However, when you set this property to 'true', it enables you to modify the properties of existing report items. Operations that can modify the report layout structure are not possible, such as adding a new report item or deleting an existing one, and others.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.lockLayout = true;
|
document
Return Type: { id: string; type: SupportedDocumentType; };
Required: Optional
storeUnsavedReport
Description: By default, the storeUnsavedReport property is set to 'true'. In this case, the last unsaved report can be restored if the browser tab or browser itself gets accidentally closed. However, if the storeUnsavedReport property is set to 'false', the aforementioned functionality is not available.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.storeUnsavedReport = false;
|
storeUserPreferences
Description: By default, the storeUserPreferences property is set to 'true'. In this case, the user preferences will be saved to the browser storage. However, if the storeUnsavedReport property is set to 'false', the aforementioned functionality is not available.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.storeUserPreferences = false;
|
disableFocusTimer
Description: By default, the disableFocusTimer property is set to 'true'. In such a case, the focused elements (like buttons) are highlighted only for a short period after the Tab key is pressed. However, if the disableFocusTimer property is set to 'false', the focus highlighting timer on the buttons is disabled for better accessibility.
Return Type: boolean
Required: Yes
disableSystemClipboard
Description: Disable the usage of the system clipboard. Copy-paste between designer instances will work only in the same browser in the same domain.
Return Type: boolean
Required: Yes
filterProperties
Description: Return filtered array of descriptors in the order in which descriptors should be rearranged.
Parameter (Type):
descriptors: PropertyDescriptor[]
item: Record<string, any>
platform: 'rdlx' | 'rpx'
Return Type: PropertyDescriptor[]
Required: Optional
Sample Code |
Copy Code
|
---|---|
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', { filterProperties: (descriptors, item, platform) => platform === 'rpx' ? [] : descriptors, }); |
editor
Description: Settings available for the Editors in the Web designer component.
Required: Yes
rulers
Description: Specifies the ruler settings for the Web Designer component.
Required: Optional
visible
Description: Specifies whether rulers need to be shown in the Web Designer component, by default.
Return Type: boolean
Required: Yes
snapStep
Description: Specifies the snapStep value. The default value is { in: 0.25, cm: 0.5 }.
Return Type: { in: number; cm: number; };
Required: Optional
gridSize
Description: Specifies the size of the Grid Size editor. By default, 'in' is used.
Return Type: string
Required: Optional
showGrid
Description: Specifies whether the grids must be shown or hidden in the Web Designer component.
Return Type: boolean
Required: Optional
snapToGrid
Description: Specifies whether to display the Snap To Grid option in the Web Designer component. The default value for this property is 'false'.
Return Type: boolean
Required: Optional
snapToGuides
Description: Specifies whether to display the Snap To Guides option in the Web Designer component. The default value for this property is 'false'.
Return Type: boolean
Required: Optional
appBar
Description: Settings for the App bar in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the App bar needs to be shown in the Web Designer component. By default, the App bar is visible.
Return Type: boolean
Required: Yes
saveButton
Description: Settings for the Save button in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Save button needs to be shown in the Web Designer component. By default, the Save button is not visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.appBar.saveButton.visible = false;
|
saveAsButton
Description: Settings for the Save As button in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Save As button needs to be shown in the Web Designer component. By default, the Save As button is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.appBar.saveAsButton.visible = false;
|
openButton
Description: Settings for the Open button in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Open button needs to be shown in the Web Designer component. By default, the Open button is not visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.appBar.openButton.visible = true;
|
insertTab
Description: Settings for the Insert tab in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Insert tab needs to be shown in the Web Designer's application bar. The ToolBox and Insert tab are interchangeable. By default, this tab is not visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.appBar.insertTab.visible = true;
|
homeTab
Description: Settings for the Home tab in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Home tab needs to be shown in the Web Designer's application bar. By default, this tab is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.appBar.homeTab.visible = false;
|
contextActionsTab
Description: Settings for the Context Actions tab in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Context Actions tab needs to be shown in the Web Designer's application bar. By default, the this tab is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.appBar.contextActionsTab.visible = false;
|
parametersTab
Description: Settings for the Parameters tab in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Parameters tab needs to be shown in the Web Designer's application bar. By default, this tab is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.appBar.parametersTab.visible = false;
|
scriptTab
Description: Settings for the Script tab in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Script tab needs to be shown in the Web Designer's application bar. By default, this tab is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.appBar.scriptTab.visible = false;
|
aboutButton
Description: Settings for the About tab in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the About tab needs to be shown in the Web Designer's application bar. By default, this tab is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.appBar.aboutButton.visible = false;
|
toolBar
Description: Settings for the Tool Bar.
Required: Yes
visible
Description: Specifies whether the Tool Bar needs to be shown in the Web Designer component. By default, the Tool Bar is visible.
Return Type: boolean
Required: Yes
menu
Description: Settings for menus in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Main menu needs to be shown in the Web Designer component. By default, the Main menu is visible.
Return Type: boolean
Required: Yes
toolBox
Description: Settings for the ToolBox menu in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the ToolBox menu needs to be shown in the Web Designer component. By default, the ToolBox menu is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.menu.toolBox.visible = false;
|
documentExplorer
Description: Settings for the Document Explorer button in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Document Explorer button needs to be shown in the Web Designer component. By default, the Document Explorer button is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.menu.documentExplorer.visible = false;
|
groupEditor
Description: Settings for the Group Editor button in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Group Editor button needs to be shown in the Web Designer component. By default, the Group Editor button is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.menu.groupEditor.visible = false;
|
layerEditor
Description: Settings for the Layer Editor button in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Layer Editor button needs to be shown in the Web Designer component. By default, the Layer Editor button is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.menu.layerEditor.visible = false;
|
statusBar
Description: Settings for the Status bar in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Status Bar needs to be shown. By default, the Status Bar is visible.
Return Type: boolean
toggleUnitsButton
Description: Settings for the Units button in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Units button needs to be shown in the Web Designer component. By default, the Units button is visible.
Return Type: boolean
Required: Yes
toggleGridButton
Description: Settings for the Show Grid button in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Show Grid button needs to be shown in the Web Designer component. By default, the Show Grid button is visible.
Return Type: boolean
Required: Yes
gridSizeEditor
Description: Settings for the Grid Size editor in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Grid Size editor needs to be shown in the Web Designer component. By default, the Grid Size editor is visible.
Return Type: boolean
Required: Yes
rulersButton
Description: Settings for the Show Rulers button in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Show Rulers button needs to be shown in the Web Designer component. By default, the Show Rulers button is visible.
Return Type: boolean
Required: Yes
propertiesModeButton
Description: Settings for the Properties Mode drop-down in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Properties Mode drop-down needs to be shown in the Web Designer component. By default, the Properties Mode drop-down is visible.
Return Type: boolean
Required: Yes
propertyGrid
Description: Settings for the Property grid in the Web Designer component.
Required: Yes
propertiesTab
Description: Settings for the Properties tab in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Properties tab needs to be shown in the Web Designer component. By default, the Properties tab is visible.
Return Type: boolean
Required: Optional
mode
Description: Specifies the available property modes in the Web Designer component.
Return Type: 'Basic' | 'Advanced'
Required: Optional
sort
Description: Specifies the available properties sort modes in the Web Designer component.
Return Type: 'categorized' | 'alphabetical'
Required: Optional
documents
Description: Settings for the Document API in the Web Designer component.
Required: Yes
fileView
Description: Settings for the File View tab in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the File View tab needs to be shown in the Web Designer component. By default, the File View tab is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.fileView.visible = false;
|
aboutButton
Description:
Settings for the About button in the Web Designer component.visible
Description: Specifies whether the About button needs to be shown in the Web Designer component. By default, the About button is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.fileView.aboutButton.visible = false;
|
handlers
Required: Yes
onBeforeSave()
Description: An async handler, cancels saving process if returned false.
Parameter (Type):
Return Type: Promise<boolean>
Required: Optional
onAfterSave()
Description: A handler that is called when the save process is completed.
Parameter (Type):
Return Type: void
Required: Optional
onBeforeOpen()
Description: Async handler, cancels opening process if returned false.
Return Type: Promise<boolean>
Required: Optional
onAfterOpen()
Description: A handler that is called when the open process is completed.
Return Type: void
Required: Optional
onBeforeCreate()
Description: A async handler, cancels the create process if returned false.
Return Type: Promise<boolean>
Required: Optional
onAfterCreate()
Description: A handler that is called when the 'create' process is complete.
Return Type: void
Required: Optional
data
Description: Settings related to data in the Web Designer component.
Required: Yes
dataTab
Description: Settings for the Data tab in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the Data tab needs to be shown in the Web Designer component. By default, the Data tab is visible.
Return Type: boolean
Required: Yes
dataSources
Description: Settings for the Data Sources section in the Data tab.
Required: Yes
visible
Description: Specifies whether the Data Sources section in the Data tab needs to be shown in the Web Designer component. By default, the Data Sources section is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.data.dataSources.visible = false;
|
canModify
Description: Specifies whether it is possible to modify (i.e. add, edit, or delete) the data sources in the Data Sources section. By default, this feature is disabled.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.data.dataSources.canModify = true;
|
options
Description: Settings for the options for the data sources and Data Source editor.
predefinedProviders
Description: Specifies the list of predefined data providers available in the Data Source editor. By default, all the predefined providers are available.
Return Type: ('SQL' | 'OLEDB' | 'ODBC' | 'JSON' | 'CSV' | 'XML')[]
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.data.dataSources.options.predefinedProviders = ['SQL', 'JSON']; |
oleDbProviders
Description: Specifies the list of OLE DB providers available in the Data Source editor. By default, 'Microsoft.Jet.OLEDB.4.0', 'SQLOLEDB.1', 'MSDataShape.1', and 'MSDASQL.1' are available.
Return Type: string[]
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.data.dataSources.options.oleDbProviders = ['Microsoft.Jet.OLEDB.4.0', 'SQLOLEDB.1'] |
customProviders
Description: Specifies the list of custom data providers available in the Data Source editor. By default, there are no custom data providers available.
Return Type: {key: string; name: string;}[]
Required: Yes
dataSets
Description: Settings for the Datasets section in the Data tab.
Required: Yes
visible
Description: Specifies whether the Datasets section needs to be shown in the Web Designer component. By default, the Datasets section is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.data.dataSets.visible = false;
|
canModify
Description: Specifies whether it is possible to modify (including add/edit/remove) datasets in the Web Designer component. The default value for this property is 'false'.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.data.dataSets.canModify = true;
|
parameters
Description: Settings for the Parameters section in the Data tab.
Required: Yes
visible
Description: Specifies whether the Parameters section needs to be shown in the Web Designer component. By default, the Parameters section is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.data.parameters.visible = false;
|
canModify
Description: Specifies whether it is possible to modify (i.e. add, edit, or delete) the report parameters in the Parameters section. The default value for this property is set to 'true'.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.data.parameters.canModify = false;
|
commonValues
Description: Settings for the Common Values section in the Data tab.
Required: Yes
visible
Description: Specifies whether the Common Values section needs to be shown in the Web Designer component. By default, the Common Values section is visible.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.data.commonValues.visible = false;
|
styles
Description: Style settings for Section Reports in the Web Designer component.
Required: Yes
stylesTab
Description: Settings for the Styles Tab in the Web Designer component.
Required: Yes
visible
Description: Specifies whether the stylesheet for the Section Reports (.rpx) can be modified. By default, the Styles tab is visible.
Return Type: boolean
Required: Yes
stylesheet
Description: Stylesheet settings in the Web Designer component.
Required: Yes
canModify
Description: Specifies whether it is possible to modify the Section Report (.rpx) in the Web Designer component. The default value for this property is 'true'.
Return Type: boolean
Required: Yes
server
Description: Backend-related settings for the Web Designer component.
Required: Yes
url
Description: Specifies the base URL for the Designer Server API. The default value of the property is 'api'.
Return Type: string
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.server.url = 'api/designer';
|
onBeforeRequest()
Description: A special handler to modify requests in the Web Designer component.
Parameter (Type):
Return Type: RequestInit
Required: Optional
title
Description: Settings for document title in the Web Designer component.
Required: Yes
onUpdate()
Description: It is possible to implement custom logic for updating the browser tab's title when the edited document gets updated in the Web Designer component.
Parameter (Type):
Return Type: string
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.title.onUpdate = ({ name, hasUnsavedChanges }) => `${name}${hasUnsavedChanges ? ' - Has Unsaved Changes!' : ''}` |
disabled
Description: Specifies whether the browser tab title can be updated in the Web Designer component. The default value of the property is 'false'.
Return Type: boolean
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.title.disabled = false;
|
preview
Description: Preview settings for the document in the Web Designer component.
Required: Yes
canPreview
Description: Specifies whether the Preview button needs to be shown in the Web Designer component. The default value of the property is 'false'.
Return Type: boolean
Required: Optional
openViewer()
Description: You can plug in the Viewer component by providing the openViewer() method.
Parameter (Type):
Return Type: void
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.preview.openViewer = function(options) {
// ... create viewer and open report
};
|
rpx
Description: RPX platform-specific settings in the Web Designer component. Must exist for the Section Reports (.rpx) to work.
Required: Yes
enabled
Description: Set to true to enable RPX support.
Return Type: Boolean
Required: Optional
initTemplates
Return Type: {imperialTemplates (optional): string[]; metricTemplates (optional): string[];};
Required: Optional
rdlx
Required: Yes
expressionSyntax
Description: Specifies which Expression syntax will be used in the Web Designer component: 'i11n' - interpolation syntax or 'rdl' - old rdl expression syntax. By default, the interpolation syntax is used for expressions.
Return Type: 'i11n' | 'rdl'
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.expressionSyntax = 'rdl';
|
msl
enabled
Description: Set to true to enable Multi-Section Layout (MSL) support, that is, RDL Multi-Section report.
Return Type: boolean
Required: Optional
dashboard
enabled
Description: Set to true to enable Dashboard report support.
Return Type: boolean
Required: Optional
expressionEditorNodesFilter()
Description: Filters the Expression Editor nodes in the Web Designer component.
Parameter (Type):
Return Type: boolean
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.expressionEditorNodesFilter = (key) => { if (key.includes('commonValues')) return false; if (key.includes('aggregate.aggregateIfWithScope')) return false; return true; } |
toolBoxContent
Description: Specifies the report items and their display order in the toolbox. By default, the available report items for Page Report (fpl) are TextBox, CheckBox, Container, Line, Shape, TableOfContents, Image, List, Table, Tablix, Chart, Bullet, Barcode, FormattedText, RichText, Sparkline, SubReport, BandedList, and InputField.
For RDL reports (cpl), these are the default available report items - TextBox, CheckBox, Container, Line, Shape, TableOfContents, Image, List, Table, Tablix, Chart, Bullet, Barcode, FormattedText, RichText, Sparkline, SubReport, OverflowPlaceholder, BandedList, and InputField.
Return Type: {cpl: RdlxToolBoxItem[]; fpl: RdlxToolBoxItem[]; };
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.toolBoxContent = { cpl: [ 'checkbox', 'container', 'textbox' ], fpl: [ 'image', 'list', 'table', 'tablix', 'chart', 'bullet', 'barcode', 'formattedtext' ], } |
initTemplates
Description: Use Page reports to set custom templates for specific Page report items, for example, 'OverflowPlaceHolder'. It is preferable to use an RDL report or multi-section redl report for setting custom templates for all other report items, as well as for pageHeader and pageFooter. In case of Reports, set ConsumeContainerWhitespace and Page-properties: BottomMargin, LeftMargin, RightMargin, TopMargin, PageHeight, PageWidth, and ColumnSpacing.
For the rest of the report items, all properties are set, including, for example, the number of columns in the table or barcode default symbology. Note that if there is a same report item as in the previous one within a subsequent report in an array. Then, in such a case only the last template for this report item will be set. Furthermore, you can also set multiple init templates for some report items. For this, you should add a report with more than one report item of the same type. Templates with the same names will be replaced. Use the 'TemplateName' custom property of each report item to set a localized name of the template. Use the 'AllowWizard' custom property of a chart report item to allow the use of chart wizard when this report item is created. For example: ... ,"CustomProperties":[{"Name":"TemplateName","Value":"Doughnut Chart"}, {"Name":"AllowWizard","Value":"true"},...],...
Return Type: {imperialTemplates?: string[]; metricTemplates?: string[];};
Required: Optional
Sample Code |
Copy Code
|
---|---|
imperialTemplates: ['{"Name":"Report","Width":"5in","Layers":[{"Name":"default"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.25in","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Width":"5in","Height":"0.25in"}]}}'], metricTemplates: ['{"Name":"Report","Width":"10cm","Layers":[{"Name":"default"}],"CustomProperties":[{"Name":"DisplayType","Value":"Page"},{"Name":"SizeType","Value":"Default"},{"Name":"PaperOrientation","Value":"Portrait"}],"Page":{"PageWidth":"8.5in","PageHeight":"11in","RightMargin":"1in","LeftMargin":"1in","TopMargin":"1in","BottomMargin":"1in","Columns":1,"ColumnSpacing":"0in"},"Body":{"Height":"0.75cm","ReportItems":[{"Type":"textbox","Name":"TextBox1","CustomProperties":[],"CanGrow":true,"KeepTogether":true,"Style":{"PaddingLeft":"2pt","PaddingRight":"2pt","PaddingTop":"2pt","PaddingBottom":"2pt"},"Left":"0cm","Top":"0cm","Width":"10cm","Height":"0.75cm"}]}}'], }; |
reportItemsFeatures
Description: Refers to customizable report item features in the Web Designer component.
Return Type: RdlxReportItemsSettings
Required: Yes
reportStyles
Description: Specifies additional styles to add to report item styles in the Web Designer component.
Return Type: ReportStyles[]
Required: Yes
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.reportStyles { Bullet: [{ id: 'c8aa4403-83ef-402b-a7da-032063cf625a', name: 'additionalBulletStyle1', content: { ValueColor: 'red', LabelFontColor: '=Theme.Colors!Dark1', LabelFontFamily: '=Theme.Fonts!MinorFont.Family', LabelFontSize: '=Theme.Fonts!MinorFont.Size', LabelFontStyle: '=Theme.Fonts!MinorFont.Style', TicksLineColor: '=Theme.Colors(1,0)' } }, ], List: [ { id: '3d2c3781-4eea-4ac3-8d50-636edd9328d5', name: 'additionalListStyle1', content: {}, }, { id: '5b7b4e73-22e5-42ed-99c4-62840bdde79d', name: 'additionalListStyle2', content: { BackgroundColor: '=Theme.Colors!Accent1', Border: { Color: '=Theme.Colors(4,4)', Width: '1pt', Style: 'Solid', } } }] }, { ChartPalette: [{ id: 'c8aa4403-83ef-402b-a7da-0320444', name: 'additionalChartPalette', content: ['red', '=Theme.Colors!Accent2', '=Theme.Colors!Accent3', '=Theme.Colors!Accent4', '=Theme.Colors!Accent5', '=Theme.Colors!Accent6', '=Theme.Colors(5,4)', '=Theme.Colors(5,5)', '=Theme.Colors(5,6)', '=Theme.Colors(5,7)', '=Theme.Colors(5,8)', '=Theme.Colors(5,9)'] }] }, ]; |
Information on browser tab title.
name
Description: Refers to the document name.
Return Type: string
Required: Yes
hasUnsavedChanges
Description: Indicates whether the document has unsaved changes or not in the Web Designer component.
Return Type: boolean
Required: Yes
Report items available in the toolbox.
Acceptable Values
Copy Code
|
|
---|---|
'textbox' | 'checkbox' | 'container' | 'line' | 'shape' | 'tableofcontents' | 'image' | 'list' | 'table' | 'tablix' | 'chart' | 'bullet' | 'barcode' | 'formattedtext' | 'richtext' | 'sparkline' | 'subreport' | 'overflowplaceholder' | 'bandedlist' | 'inputfield' |
Settings for the report items.
barcode
Description: Settings for barcodes in the Web Designer component.
symbologies
Description: Limits the list of barcode symbologies available for creation. By default, all barcode symbologies supported by ActiveReports are available.
Return Type: RdlxBarcodeSymbology[]
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.reportItemsFeatures.barcode.symbologies = ['Code_128_A', 'Code_128_B', 'Code_128_C']; |
table
Description: Settings for tables in the Web Designer component.
autoFillHeader
Description: Specifies whether the Table Header needs to be auto-filled when a field is dropped to the Table Details section. For example, if the ProductName field is dropped to the Details section, the Product Name value is set to the Header. By default, this feature is enabled.
Return Type: boolean
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.reportItemsFeatures.table.autoFillHeader = false;
|
autoFillFooter
Description: Specifies whether Table Footer needs to be auto-filled when a field is dropped to the Table Details section. For example, if the ProductName field is dropped to the Details section, =Count([ProductName]) value is set to the Footer. By default, this feature is disabled.
Return Type: boolean
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.reportItemsFeatures.table.autoFillFooter = true;
|
canMergeCellsVertically
Description: Specifies whether vertical merge of cells is enabled within the Table Header, Details, and Footer sections. By default, this feature is enabled.
Return Type: boolean
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.reportItemsFeatures.table.canMergeCellsVertically = false;
|
hideFrozenRowsColumns
Description: Specifies whether to hide FrozenRows or FrozenColumns properties from the Property grid. By default, hideFrozenRowsColumns is set to 'false'.
Return Type: boolean
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.reportItemsFeatures.table.hideFrozenRowsColumns = true;
|
tablix
Description: Settings for Tablix data region in the Web Designer component.
crossAggregates
Description: Specifies whether the Tablix Wizard should hide the cross-aggregates functionality. By default, this feature is enabled.
Return Type: boolean
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.reportItemsFeatures.tablix.crossAggregates = false;
|
autoFillCorner
Description: Specifies whether the Tablix Corner cell needs to be auto-filled when a field is dropped to the Tablix Row Group cell. For example, if the ProductName field is dropped to the Row Group cell, the Product Name value is set to the Corner cell. By default, this feature is enabled.
Return Type: boolean
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.reportItemsFeatures.tablix.autoFillCorner = false;
|
canUseWizard
Description: Specifies whether the Tablix Wizard is available for creating or editing the Tablix control in the Web Designer component. By default, this feature is enabled.
Return Type: boolean
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.reportItemsFeatures.tablix.canUseWizard = false;
|
hideFrozenRowsColumns
Description: Specifies whether to hide FrozenRows or FrozenColumns properties from the Property grid and Tablix wizard. By default, hideFrozenRowsColumns is set to 'false'.
Return Type: boolean
Required: Optional
Sample Code |
Copy Code
|
---|---|
designerSettings.rdlx.reportItemsFeatures.tablix.hideFrozenRowsColumns = true;
|
Supported barcode symbologies.
Acceptable Values
Copy Code
|
|
---|---|
'Ansi39' | 'Ansi39x' | 'BC412' | 'Codabar' | 'Code_11' | 'Code_128_A' | 'Code_128_B' | 'Code_128_C' | 'Code_128auto' | 'Code_2_of_5' | 'Code_93' | 'Code25intlv' | 'Code39' | 'Code39x' | 'Code49' | 'Code93x' | 'DataMatrix' | 'EAN_13' | 'EAN_8' | 'EAN128FNC1' | 'GS1QRCode' | 'HIBCCode128' | 'HIBCCode39' | 'IATA_2_of_5' | 'IntelligentMail' | 'IntelligentMailPackage' | 'ISBN' | 'ISMN' | 'ISSN' | 'ITF14' | 'JapanesePostal' | 'Matrix_2_of_5' | 'MaxiCode' | 'MicroPDF417' | 'MicroQRCode' | 'MSI' | 'Pdf417' | 'Pharmacode' | 'Plessey' | 'PostNet' | 'PZN' | 'QRCode' | 'RM4SCC' | 'RSS14' | 'RSS14Stacked' | 'RSS14StackedOmnidirectional' | 'RSS14Truncated' | 'RSSExpanded' | 'RSSExpandedStacked' | 'RSSLimited' | 'SSCC_18' | 'Telepen' | 'UCCEAN128' | 'UPC_A' | 'UPC_E0' | 'UPC_E1' | |
Report item style.
id
Return Type: string
Required: Yes
name
Return Type: string
Required: Yes
content
Return Type: T
Required: Yes
Border style.
Color
Return Type: string
Required: Optional
Style
Return Type: string
Required: Optional
Width
Return Type: string
Required: Optional
Styles for Table cell.
TextBoxStyleContent &LeftBorder
Return Type: BorderStyle
Required: Optional
TopBorder
Return Type: BorderStyle
Required: Optional
BottomBorder
Return Type: BorderStyle
Required: Optional
RightBorder
Return Type: BorderStyle
Required: Optional
TextAlign
Return Type: string
Required: Optional
BottomBorder
Return Type: string
Required: Optional
Styles for TextBox control.
Color
Return Type: string
Required: Optional
BackgroundColor
Return Type: string
Required: Optional
FontFamily
Return Type: string
Required: Optional
FontSize
Return Type: string
Required: Optional
FontStyle
Return Type: string
Required: Optional
FontWeight
Return Type: string
Required: Optional
Styles for Container control.
BackgroundColor
Return Type: string
Required: Optional
Border
Return Type: string
Required: Optional
Styles for Bullet data region.
ValueColor
Return Type: string
Required: Optional
TargetLineColor
Return Type: string
Required: Optional
LabelFontColor
Return Type: string
Required: Optional
LabelFontFamily
Return Type: string
Required: Optional
LabelFontSize
Return Type: string
Required: Optional
LabelFontStyle
Return Type: string
Required: Optional
TicksLineColor
Return Type: string
Required: Optional
Styles for Sparkline control.
LineColor
Return Type: string
Required: Optional
FillColor
Return Type: string
Required: Optional
GradientEndColor
Return Type: string
Required: Optional
MarkerColor
Return Type: string
Required: Optional
RangeFillColor
Return Type: string
Required: Optional
RangeGradientEndColor
Return Type: string
Required: Optional
Styles for Table data region.
Header
Return Type: { Rows: CellStyleContent[] };
Required: Yes
Details
Return Type: { Rows: CellStyleContent[]; AlternatingExpression: string };
Required: Yes
Footer
Return Type: { Rows: CellStyleContent[] };
Required: Yes
TableGroups
Required: Yes
Styles
Return Type: { Header: { Rows: CellStyleContent[] }; Footer: { Rows: CellStyleContent[] };}[];
Required: Yes
Border
Return Type: BorderStyle
Required: Optional
Styles for Table of Contents data region.
BackgroundColor
Return Type: string
Required: Optional
Border
Return Type: BorderStyle
Required: Optional
Levels
Required: Yes
Color
Return Type: string
Required: Optional
PaddingLeft
Return Type: string
Required: Optional
FontFamily
Return Type: string
Required: Optional
FontSize
Return Type: string
Required: Optional
FontStyle
Return Type: string
Required: Optional
FontWeight
Return Type: string
Required: Optional
Chart palette.
Acceptable Values
Copy Code
|
|
---|---|
string[]
|
Styles for toolbox items or report controls.
Bullet
Return Type: ReportItemStyle<BulletStyleContent>
Required: Yes
CheckBox
Return Type: ReportItemStyle<TextBoxStyleContent>
Required: Yes
FormattedText
Return Type: ReportItemStyle<ContainerStyleContent>
Required: Yes
InputField
Return Type: ReportItemStyle<TextBoxStyleContent>
Required: Yes
List
Return Type: ReportItemStyle<ContainerStyleContent>
Required: Yes
Rectangle
Return Type: ReportItemStyle<ContainerStyleContent>
Required: Yes
RichText
Return Type: ReportItemStyle<TextBoxStyleContent>
Required: Yes
Shape
Return Type: ReportItemStyle<ContainerStyleContent>
Required: Yes
Sparkline
Return Type: ReportItemStyle<SparklineStyleContent>
Required: Yes
Table
Return Type: ReportItemStyle<TableStyleContent>
Required: Yes
TableOfContents
Return Type: ReportItemStyle<TableOfContentsStyleContent>
Required: Yes
Tablix
Return Type: ReportItemStyle<TableStyleContent>
Required: Yes
TextBox
Return Type: ReportItemStyle<TextBoxStyleContent>
Required: Yes
ChartPalette
Return Type: ReportItemStyle<ChartPaletteContent>
Required: Yes
Viewer settings.
element
Description: Refers to the host element's id where to render the Viewer.
Return Type: string
Required: Yes
applicationTitle
Description: Refers to the application title passed by the Web Designer component.
Return Type: string
Required: Yes
documentInfo
Description: Information on the document to be previewed.
Required: Yes
id
Description: Refers to the document id.
Return Type: string
Required: Yes
content
Description: Refers to the document content in JSON format that can be useful for viewers with in-browser rendering.
Return Type: unknown
Required: Yes
name
Description: Refers to the document name.
Return Type: string
Required: Yes
temporary
Description: Specifies whether the document to be previewed is an existing report saved on the server-side.
Return Type: boolean
Required: Yes
preferredFormat
Description: Specifies preferred rendering format for the document.
Return Type: 'html' | 'svg'
Required: Yes
Define what kind of document must be created.
name
Description: Refers to the name of the document. If this property is not specified, the default 'Untitled' name will be used.
Return Type: string
Required: Optional
type
Description: Refers to the document type to create in the Web Designer component. If this property is not specified, an RDL report will be created.
Return Type: SupportedDocumentType
Required: Optional
template
Description: Refers to the template to use for the document.
Return Type: DocumentTemplate
Required: Optional
dataSetsInfo
Description: Refers to the list of RDL Data Sets to use with the template in the Web Designer component. Note that these datasets won't work with Section Reports (.rpx).
Return Type: { id: string;, name: string;}[];
Required: Optional
Information about the created document (if it was successfully created).
type
Description: Refers to the document type in the Web Designer component.
Return Type: SupportedDocumentType
Required: Yes
name
Description: Refers to the document name in the Web Designer component.
Return Type: string
Required: Yes
template
Description: Refers to the document template in the Web Designer component.
Return Type: DocumentTemplate
Required: Optional
success
Description: Undefined in onBeforeCreate handler. Defined in onAfterCreate handler.
Return Type: boolean
Required: Optional
Information about the current document.
id
Description: Refers to the document id. If an existing report is edited, id is defined. Otherwise, if a new report is edited, id is 'null'.
Return Type: string | null
Required: Yes
name
Description: Refers to the document name in the Web Designer component.
Return Type: string
Required: Yes
type
Description: Refers to the document type in the Web Designer component.
Return Type: SupportedDocumentType
Required: Yes
Template to use for the document.
id
Description: Refers to the document template id.
Return Type: string
Required: Optional
content
Description: Refers to the document template content in JSON format that can be useful in case you would like to create a non-empty new report.
Return Type: unknown
Required: Optional
Define options for opening a document.
templateInfo
Description: Refers to the template information. If it is specified for report creation, either templateInfo.id or templateinfo.content needs to be defined.
Return Type: DocumentTemplate
Required: Optional
dataSetsInfo
Description: Refers to the list of RDL datasets to use with the template. Note that these datasets won't work with Section Reports (.rpx).
Return Type: {id: string; name: string;}[];
Required: Optional
name
Description: Refers to the new report name. If you do not specify the name, the report name is set to 'Untitled'.
Return Type: string
Required: Optional
type
Description: Refers to the report type. If not specified RDL report will be created.
Return Type: SupportedDocumentType
Required: Optional
Information about the saving the document.
type
id
Description: If an existing document is to be overwritten on saving, the correct id should be specified explicitly.
Return Type: string
Required: Optional
name
Description: The correct name needs to be always specified explicitly.
Return Type: string
Required: Yes
isFirstSave
Description: Indicates that a new document is being saved for the first time.
Return Type: boolean
Required: Yes
success
Description: Undefined in onBefore handler. Defined in onAfter handler.
Return Type: boolean
Required: Optional
Information about an open document.
type
id
Description: Refers to the document id.
Return Type: string
Required: Yes
name
Description: Refers to the document name.
Return Type: string
Required: Yes
success
Description: Undefined in onBefore handler. Defined in onAfter handler.
Return Type: boolean
Required: Optional