The HTML5 Designer is configured using properties that are located in the Stimulsoft.Designer.StiDesignerOptions class. All properties are split into groups. Some of the groups contain subgroups for ease of use. The following is an example of setting the properties of the viewer.

 

designer.html

...

<script type="text/javascript">

var report = new Stimulsoft.Report.StiReport();

report.loadFile("SimpleList.mrt");

 

var options = new Stimulsoft.Designer.StiDesignerOptions();

options.appearance.theme = Stimulsoft.Designer.StiDesignerTheme.Office2022WhiteBlue;

options.viewerOptions.appearance.reportDisplayMode = Stimulsoft.Report.Export.StiHtmlExportMode.Auto;

options.toolbar.showFileMenuExit = false;

options.toolbar.showFileMenuOptions = false;

options.bands.showChildBand = false;

options.components.showPanel = false;

options.appearance.showReportTree = false;

options.appearance.showTooltips = false;

 

var designer = new Stimulsoft.Designer.StiDesigner(options);

designer.report = report;

</script>

...

 

 

Main settings (without groups)

 

Name

Description

Width

Sets the width of the component in “px” or “%”.

Height

Sets the height of the component in “px” or “%”.

 

 

Appearance

 

Name

Description

theme

Specifies the theme of the designer layout. The list of available themes can be found in the StiDesignerTheme enumeration. The default value is Office2022WhiteBlue.

defaultUnit

Sets the units for the size of the report and all its components.

 

•Stimulsoft.Report.StiReportUnitType.Centimeters (default value);
•Stimulsoft.Report.StiReportUnitType.HundredthsOfInch;
•Stimulsoft.Report.StiReportUnitType.Inches;
•Stimulsoft.Report.StiReportUnitType.Millimeters.

zoom

Sets the zoom for displaying report pages. The default setting is 100 percent. It can take one of the following values of the StiZoomMode enumeration:

 

•PageWidth – when the designer runs, the zoom, necessary to display the report by the page width, will be set;
•PageHeight – when the designer runs, the zoom, required to display the page height of the report, will be set.

interfaceType

Sets the type of interface used for the designer. It can take one of the following values:

 

•Stimulsoft.Designer.StiInterfaceType.Auto – the interface type of the designer will be selected automatically depending on the device used (default value);
•Stimulsoft.Designer.StiInterfaceType.Mouse – forced use of the interface to control the designer with the mouse device;
•Stimulsoft.Designer.StiInterfaceType.Touch – forced use of the touch interface to control the designer via the touch screen (mobile devices), also in this mode, the interface elements are increased.

showAnimation

Enables animation for various elements of the designer interface. By default, the property is set to true.

showSaveDialog

Enables displaying the dialog to insert a report name when it is saved. The name of the report will be transferred in the parameters of the report designer. By default, the property is set to true.

showTooltips

Enables displaying tooltips for designer controls when the mouse hovers over. By default, the property is set to true.

showTooltipsHelp

Enables displaying links to online documentation in tooltips for designer controls. By default, the property is set to true.

showDialogsHelp

Sets a value which indicates that show or hide the help button in dialogs. By default, the property is set to true.

fullScreenMode

Sets the full screen display mode of the designer. If the property is set to true, the values of the width and height properties are ignored. By default, the property is set to false.

maximizeAfterCreating

Sets a value which indicates that the designer will be maximized after creation. By default, the property is set to false.

showLocalization

Sets a visibility of the localization control of the designer. By default, the property is set to true.

allowChangeWindowTitle

Allows using a title of the browser window to display the file name of the edited report. By default, the property is set to true.

showPropertiesGrid

Enables displaying the Property panel of the report designer. By default, the property is set to true.

showReportTree

Enables displaying the tree of report components. By default, the property is set to true.

propertiesGridPosition

Sets Left or Right position of the properties grid in the designer.

showSystemFonts

Sets a visibility of the system fonts in the fonts list. By default, the property is set to true.

datePickerFirstDayOfWeek

Sets the first day of week in the date picker.

 

•Stimulsoft.Designer.StiFirstDayOfWeek.Auto - Sets Monday or Sunday as the first day depending on the browser culture (default value);
•Stimulsoft.Designer.StiFirstDayOfWeek.Monday - Sets Monday as the first day of the week.
•Stimulsoft.Designer.StiFirstDayOfWeek.Sunday - Sets Sunday as the first day of the week.

formatForDateControls

This feature allows you to customize the format for date controls. By default, the current option does not have a specified value, and the date format is determined based on the browser's locale.

wizardTypeRunningAfterLoad

Calls the Report wizard after starting the report designer. It may have one of the following StiWizardType enumeration values:

 

•None - runs the report designer without running the report wizard (default value);
•StandardReport - runs the Standard wizard;
•MasterDetailReport - runs the Master-Detail wizard;
•LabelReport - runs the Label wizard;
•InvoicesReport - runs the Invoice wizard;
•OrdersReport - runs the Order wizard;
•QuotationReport - runs the Quote wizard.

 

 

Toolbar

 

Name

Description

visible

It enables the display of toolbar in the report designer. The property has the true value by default.

showPreviewButton

It enables or disables the display of the Preview button in the designer toolbar. The property has the true value by default.

showSaveButton

It enables the display of the Save button in the designer toolbar. The property has the true value by default.

showAboutButton

It enables the display of the About button in the designer toolbar. The property has the false value by default.

showFileMenu

It enables the display of the main menu of the report designer. The property has the true value by default.

showFileMenuNew

It enables the display of the New main menu item.  The property has the true value by default.

showFileMenuOpen

It enables the display of the Open main menu item. The property has the true value by default.

showFileMenuSave

It enables the display of the Save main menu item. The property has the true value by default.

showFileMenuSaveAs

It enables the display of the Save as main menu item. The property has the true value by default.

showFileMenuClose

It enables the display of the Close main menu item. The property has the true value by default.

showFileMenuExit

It enables the display of the Exit main menu item. The property has the true value by default.

showFileMenuReportSetup

It enables the display of the Report Setup main menu item. The property has the true value by default.

showFileMenuOptions

It enables the display of the Options main menu item. The property has the true value by default.

showFileMenuInfo

It enables the display of the Info main menu item.  The property has the true value by default.

showFileMenuAbout

It enables the display of the About main menu item.  The property has the true value by default.

showFileMenuNewReport

It enables or disables the display of the New Page main menu item. The property has the true value by default.

showFileMenuNewDashboard

It enables or disables the display of the New Dashboard main menu item. The property has the true value by default.

showSetupToolboxButton

It enables or disables the display of the report components side panel settings invoke button. The property has the true value by default.

showNewPageButton

It enables or disables the display of the New Page button in the toolbar. The property has the true value by default.

showNewDashboardButton

It enables or disables the display of the New Dashboard button in the toolbar. The property has the true value by default.

 

 

Bands

 

Name

Description

showReportTitleBand

It enables the display of the Report Title band in the designer components insert menu. The property has the true value by default.

showReportSummaryBand

It enables the display of the Report Summary band in the designer components insert menu. The property has the true value by default.

showPageHeaderBand

It enables the display of the Page Header band in the designer components insert menu. The property has the true value by default.

showPageFooterBand

It enables the display of the Page Footer band in the designer components insert menu. The property has the true value by default.

showGroupHeaderBand

It enables the display of the Group Header band in the designer components insert menu. The property has the true value by default.

showGroupFooterBand

It enables the display of the Group Footer band in the designer components insert menu. The property has the true value by default.

showHeaderBand

It enables the display of the Header band in the designer components insert menu. The property has the true value by default.

showFooterBand

It enables the display of the Footer band in the designer components insert menu. The property has the true value by default.

showColumnHeaderBand

It enables the display of the Column Header band in the designer components insert menu. The property has the true value by default.

showColumnFooterBand

It enables the display of the Column Footer band in the designer components insert menu. The property has the true value by default.

showDataBand

It enables the display of the Data band in the designer components insert menu. The property has the true value by default.

showHierarchicalBand

It enables the display of the Hierarchical band in the designer components insert menu. The property has the true value by default.

showChildBand

It enables the display of the Child band in the designer components insert menu. The property has the true value by default.

showEmptyBand

It enables the display of the Empty band in the designer components insert menu. The property has the true value by default.

showOverlayBand

It enables the display of the Overlay band in the designer components insert menu. The property has the true value by default.

showTable

It enables the display of the Table component in the designer components insert menu. The property has the true value by default.

showTableOfContents

It enables the display of the Table of Contents band in the designer components insert menu. The property has the true value by default.

 

 

Cross-Bands

 

Name

Description

showCrossTab

It enables the display of the Cross-Tab component in the designer components insert menu. The property has the true value by default.

showCrossGroupHeaderBand

It enables the display of the Cross-Group Header band in the designer components insert menu. The property has the true value by default.

showCrossGroupFooterBand

It enables the display of the Cross-Group Footer band in the designer components insert menu. The property has the true value by default.

showCrossHeaderBand

It enables the display of the Cross-Header band in the designer components insert menu. The property has the true value by default.

showCrossFooterBand

It enables the display of the Cross-Footer band in the designer components insert menu. The property has the true value by default.

showCrossDataBand

It enables the display of the Cross-Data band in the designer components insert menu. The property has the true value by default.

 

 

dashboardElements

 

Name

Description

showTableElement

It enables the display of the Table dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showCardsElement

It enables the display of the Cards dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showChartElement

It enables the display of the Chart dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showGaugeElement

It enables the display of the Gauge dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showPivotTableElement

It enables the display of the Pivot dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showIndicatorElement

It enables the display of the Indicator dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showProgressElement

It enables the display of the Progress dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showRegionMapElement

It enables the display of the Region Map dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showOnlineMapElement

It enables the display of the Online Map dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showImageElement

It enables the display of the Image dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showTextElement

It enables the display of the Text dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showPanelElement

It enables the display of the Panel dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showShapeElement

It enables the display of the Shape dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showButtonElement

It enables the display of the Button dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showListBoxElement

It enables the display of the List Box dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showComboBoxElement

It enables the display of the Combo Box dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showTreeViewElement

It enables the display of the Tree View dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showTreeViewBoxElement

It enables the display of the Tree View Box dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

showDatePickerElement

It enables the display of the Date Picker dashboard element in the toolbox or the Insert tab in the designer. The property has the true value by default.

 

 

Components

 

Name

Description

showText

It enables the display of the Text component in the designer components insert menu. The property has the true value by default.

showTextInCells

It enables the display of the Text in Cells component in the designer components insert menu. The property has the true value by default.

showRichText

It enables the display of the Rich Text component in the designer components insert menu. The property has the true value by default.

showImage

It enables the display of the Image component in the designer components insert menu. The property has the true value by default.

showBarCode

It enables the display of the Bar Code component in the designer components insert menu. The property has the true value by default.

showShape

It enables the display of the Shape component in the designer components insert menu. The property has the true value by default.

showPanel

It enables the display of the Panel component in the designer components insert menu. The property has the true value by default.

showClone

It enables the display of the Clone component in the designer components insert menu. The property has the true value by default.

showCheckBox

It enables the display of the Check Box component in the designer components insert menu. The property has the true value by default.

showSubReport

It enables the display of the Text component in the designer components insert menu. The property has the true value by default.

showZipCode

It enables the display of the Sub-Report component in the designer components insert menu. The property has the true value by default.

showChart

It enables the display of the Chart component in the designer components insert menu. The property has the true value by default.

showGauge

It enables the display of the Gauge component in the designer components insert menu. The property has the true value by default.

showSparkline

It enables the display of the Sparkline component in the designer components insert menu. The property has the true value by default.

showMathFormula

It enables the display of the Math Formula component in the designer components insert menu. The property has the true value by default.

showMap

It enables the display of the Map component in the designer components insert menu. The property has the true value by default.

 

 

Dictionary

 

Name

Description

showAdaptersInNewConnectionForm

It enables the display of the Object category in the new connection creation window. The property has the true value by default.

showDictionary

It enables the display of the report dictionary. The property has the true value by default.

newReportDictionary

Allows you to use aliases in the data dictionary. It can take one of the specified below enumeration values:

 

•StiNewReportDictionary.Auto - defines the mode of using aliases from a saved value in cookies (default value);
•StiNewReportDictionary.True - sets the mode of using aliases in the data dictionary;
•StiNewReportDictionary.False - disables the mode of using aliases in the data dictionary.

useAliases

It allows you to create a new data dictionary or join the existing one when creating a new report in the designer. It can take one of the specified below enumeration values:

 

•StiUseAliases.Auto - defines the mode to create or join the data dictionary from a saved value in cookies (default value);
•StiUseAliases.DictionaryNew - sets the mode to create a new data dictionary when creating a new report;
•StiUseAliases.DictionaryMerge - sets the mode to join the existing data dictionary with a new one when creating a new report in the designer.

showDictionaryContextMenuProperties

Sets a visibility of the Properties item in the dictionary context menu. By default, the property is set to true.

showDictionaryActions

Sets a visibility of the Actions menu on the dictionary toolbar. By default, the property is set to true.

dataSourcesPermissions

It sets available actions on report data sources. It can take one or several values from the StiDesignerPermissions enumeration.

dataConnectionsPermissions

It sets available actions on connections to report data. It can take one or several values from the StiDesignerPermissions enumeration.

dataColumnsPermissions

It sets available actions on report data columns. It can take one or several values from the StiDesignerPermissions enumeration.

dataRelationsPermissions

It sets available actions on report data connections. It can take one or several values from the StiDesignerPermissions enumeration.

businessObjectsPermissions

It sets available actions on report business objects. It can take one or several values from the StiDesignerPermissions enumeration.

variablesPermissions

It sets available actions on report variables. It can take one or several values from the StiDesignerPermissions enumeration.

resourcesPermissions

It sets available actions on sources in report dictionary. It can take one or several values from the StiDesignerPermissions enumeration.

dataTransformationsPermissions

Sets the available actions on data transformation. It can take one or more values from the StiDesignerPermissions enumeration.

 

 

In the table below you can see all available values for the StiDesignerPermissions enumeration. They can be set for report dictionary elements.

 

Name

Description

None

Disables any action on the item of the data dictionary.

Create

It allows you to create definite element of the dictionary.

Delete

It allows you to delete a definite element of the dictionary.

Modify

It allows you to edit a definite element of the dictionary.

View

It allows you to view a definite element of the dictionary.

ModifyView

It allows you to edit and view a definite element of the dictionary.

All

It allows you to make any actions on the dictionary element.

 

 

You can configure the built-in StiViewer component used to preview the report. To get access to all of its settings, you should use the viewerOptions property, which is an object of the viewer options. All its properties are described in the Viewer settings section.