The main problems when reading reports are information overload pages, text is plain and blurred. This leads to the fact that you cannot focus on the information that is important. One of the ways to solve this is to remove the background information. However, it is not always appropriate to do because background information can carry the load indirectly. For example, the background information may include company contact details, titles, and additional notes. Therefore, the deleting such information is an extreme case.
In order to make the report look good and presentable, separate important information from irrelevant, it is recommended to apply the graphic elements and colors in reports. For example, change font color, the background fill of components, including borders, etc. All these elements establish the style of the report. The picture below shows the report page without styles and with applied styles.
In all Stimulsoft products there is a built-in tool for creating styles. This tool is called the Style Designer. In order to call the Style Designer you should click the icon in the Report Designer on the Home tab. The picture below shows the Style Designer.
As can be seen from the picture, the Style Designer consists of a toolbar and a list of styles. From the list of styles, you can create a collection of styles. For this you should set a style in the Collection property and specify the name of a collection of styles. The collection of styles can be created once and applied to various reports. At the same time, the created collection of styles, as each style separately, can be edited when needed.
Before you start creating styles, take a look at the Style Designer toolbar.
The Add Style menu contains a list of report items for which you can create styles. See the picture below.
Some items in this menu can be absent. For example, Reports.Web does not support Report Control.
The button to remove the selected style from the list of styles.
The buttons to move up and down in the selected style in the list.
The Apply Styles button contains the dropdown list with the names of collections of styles. When you select a collection, it will be applied to the report.
The button to add a style collection. There is no need to create a style manually. It is enough to define the basic color, select the report items to which to create a style, determine the level of the hierarchy in the report and click OK. The collection of styles will be generated automatically.
The button to create a duplicate of the selected style. The duplicate will be placed below its prototype in the list of styles.
The button is used to copy the style of the component. Select the component which style should be added to the collection of styles. Call the Style Designer without removing the selection of this component. Click this button. The style of the selected component will be added to the list of styles.
The clipboard management commands. copy the selected style to the clipboard, cut to the clipboard, and paste the style from the clipboard.
The Open button. Used to open the collection of styles.
The Save button. Specify the location where the file will be saved and type the file name.
The Close button. Closes the Style Designer.
Now create a style for the component.
- To do this, call the Style Designer, by clicking the button on the Home tab in the report designer;
- Click Add style and select items in the designer of styles. In this example, it is the Component.
The new style will appear in the Toolbox.
Using the properties of the item for which you create the style, you must define the appearance settings. Since styles can be created for various elements of the report, the properties of the design will be different. For example, the style for the chart has properties such as the area color, series color, etc. In this example, let’s create a report style for the report component (band, text component and other elements that can be found the Components group). The following settings are defined using the component properties.
- Fill color;
- Font color, face and size;
- Borders type and color.
Once the style is created, it should be applied to an element of the report. This can be done in the following ways.
- Select the report element and assign a style using the Style property of the component or the Style menu.
- In the Style Designer, click Apply Style collection.
If you click Apply Collection, then the following should be specified for the style.
- The name of the collection to which it belongs. It can be set using the Name property of the style;
- The condition of applying the style indicates when the collection of styles contains more than one item or the style should be applied only to specified report items.
Conditions of applying the style is set using the editor. To call this editor you should select the style in the Style Designer and click the button
of the Condition property. Here is the Conditions editor.
As can be seen from the picture, the style conditions the style can be defined according to various criteria.
The condition by Placement. This type of conditions provides the opportunity to apply a style to a component, depending on its placement. In the values field containers (bands, panel, table, page) are selected. If to select operation is equal to, then the style will be applied to the components placed on the containers, which are selected in the value field. If you select the operation not equal to, then the style will be applied to the components placed in any container other than the selected value in the field. It should also be noted that in the value field, you can choose several containers.
- equal to
The style will be applied when the nesting level of containers will be equal to the specified level in the field of values;
- not equal to
. The style will be applied to all components in containers, which the nesting levels will not be equal to the specified level in the field of values;
- greater than
. The style is applied to the components in containers, which nesting level is greater than the level of the specified field of values;
- greater than or equal to
. The style is applied to the components in containers, which the nesting level is equal to or greater than the specified level in the field of values;
- less than
. The style will be applied to components in containers, which nesting level is less than the specified level in the field of values;
- less than or equal to
. The style is applied to the components in containers, which nesting level will be equal to or less than the specified level in the value field.
The condition by Component. This kind of is condition is set when it is necessary to apply (depending on the type of operation - equal or not equal) a style for the components of a specific type.
The condition by Location. This type of condition provides the ability to apply or not apply, depending on its position in the container. It should also be noted that the values in the field can choose multiple locations simultaneously.
By the name of a component. This condition type provides the ability to apply the style by name or a part of it. For example, if you set the Contains operation, and specify Text in the field of values, the style will be applied to all components in the name that has a Text. Suppose, Text24, 1Text, Text_on etc. When using this type of conditions, the following types of operations avaliable.
- equal to
. The style is applied to a component with a name identical to the specified one in the value field.
- not equal to
. The style is applied to all components, which name matches the specified field of values.
. The style will be applied to all components which contain the name of the specified field values in their name.
- not containing
. The style will be applied to all components, which in its name do not contain the name of the specified field of values.
- beginning with
. The style will be applied to all components for which the name starts with the name specified in the value field.
- ending with
. The style will be applied to all components for which the name ends with the name specified in the value field.
Also, it is possible to combine different types of conditions. In this case, the style will be applied, if all the conditions will work. In other words, if the conditions of Placement and Name of components are used, the style will be applied only when these conditions are processed. In addition, it is possible to use multi-conditions, when two or more blocks of conditions are involved. In this case, the component styles are applied only if all kinds of conditions in all the blocks will be executed. Execution of conditions starts after you click Apply Styles.
After the style is created and all its settings are defined, you should click the Save button on the toolbar in the Style Designer. Specify the path for the file with styles and name it. Once the style is created and applied is reports, you thereby emphasizing the corporate identity of your company. At the same time, in order to change the style of your reports, you just need to edit only the necessary styles.
Also, watch our video tutorials on working with designer styles. Creating styles for chartsUsing the Copy Style toolUsing borders in a reportCreating a report and styles
We are constantly improving our products for web, providing all the necessary set of components to build reports. Today we will talk about the differences between the Flash designer
and HTML5 designer
Despite the similarities in terms of functionality, the designers of these reports have some differences. Flash and HTML5 report designers available in the following products – Reports Ultimate, Reports.Web, Reports.Java, Reports.PHP, Reports.Flex. However, the HTML5 report designer is also part of Stimulsoft Reports.JS.
It all starts with the system requirements for the design. The Flash report designer requires Adobe Flash Player version 11 and later. The HTML5 report designer requires only a web browser.
Integration of report designers in the project go the following way.
The Flash designer. Stimulsoft assemblies should be added to the project. Place the StiWebDesigner component on the project page and call the report designer.
The HTML5 designer. Stimulsoft assemblies should be added to the project. Place the StiMobileDesigner component on the project page and call the report designer.
InterfaceType="Auto" GlobalizationFile="Localization/en.xml" Theme="Office2013WhiteTeal"
Now let's talk about the design differences in functionality, interface and tools to create reports. Below is a comparison list.
|Support for Touch UI
|Selecting UI Localization
||Only from code
|Data Source Wizard
|Support for OData and REST Requests
|Data Source Type
||Table, Stored procedure
|Data Dictionary Preview
|Retrieve Columns and Parameters
|Allow Run Stored Proc
|Using Variable as SQL Parameter
|Data from Business Objects
||Without ability to create new ones
|Files from Which Data Can Be Exported
||XML, JSON, Excel, CSV, DBase
||XML, JSON, CSV, DBase
||Standard, Master-Detail, Label Report
|Copy Style Tool
||Present in the Home tab
|Horizontal and Vertical Primitives
||In the development phase
|New Chart Editor
|New Cross-Tab Editor
||In the development phase
|Animation in Preview
It is worth noting that the development of the HTML5 designer is not stopping and to the end of summer 2016 this designer will have full functionality. Aslo we recommend you watch video tutorials
on working with the HTML5 designer.
We are pleased to announce the release of the new version Stimulsoft Reports 2016.1
which is now available for download. With this milestone we introduce new features which are the new barcode GS1-128, PostgreSQL data adapter in Reports.JS, Print with Preview for HTML5 viewer and designer, the cross-tab edit form in the HTML5 designer.New Component in Reports.Web
In the release of 2016.1 the HTML5 Report Designer supports the Table component. The table consists of cells which are formed at the intersection of rows and columns. These cells can contain various data such as text, phrases, reference data column, RichText, image, checkboxes, etc.
When working with the Table component, you can set an unlimited number of rows that will be used to display headers and footers of data.New Data Source in Reports.Web
In HTML5 and HTML5 for MVC we have added the ability to create a data source based on another source. Suppose, it is necessary to group the data, sort it, filter or perform calculations with these data, and then transfer the data to the report. In this case, the data source is created on the base of another source.New Printing of Reports in Reports.JS
Starting with the version 2016.1 you can choose between printing commands in the HTML5 viewer and on the preview tab in the HTML5 designer. The following printing options are available:
- Print to PDF.
- Print with Preview.
- Print without preview.Cross-tab in HTML5 Designer
Since the release of 2016.1 in the HTML5 report designer has the ability to edit and create reports with cross-tabs. Previously, it was possible only to preview cross-tabs and export reports with them. The Cross-tab is a special component that is designed to handle, group and summarize data from the source. This result is represented in the form of a table. The cross-tab editor includes three tabs, in which the data source is selected; the data columns are specified and the cross-tab style is defined.Events Tab in Reports.Web
On the property panel in the HTML5 designer, we added the Events tab, which contains a list of report events and events of the selected component. For example, if you want some action be carried out immediately after the rendering of the text component, you should subscribe to the End Render event of the text component.Break if True
When using multi-level conditions, you can break the processing of conditions. By default, all the conditions are processed sequentially until the last level. In the release 2016.1 we added the Break if true option. If this option is enabled and the condition of any level is performed (returns the true value) then the break occurs and other conditions, located below, will not be processed. If the option is disabled, then all levels of conditions are processed sequentially. This option was added in Reports.Web, Reports.Net, Reports.Wpf, Reports.JS.Infographics Menu
In the toolbar and in some designers in Insert tab you can find the new category – Infographics. This category includes all the graphics components like maps, gauges and all types of charts. You need just two clicks to add any required data visualization component to the report.Updated Designer of Styles
The 2016.1 release comes with the completely new designer of styles. We have added new functionality and gave it new look. One of the main features of the updated editor of styles is that the created style is displayed on the thumbnail based on the settings of this style. Now you edit the styles and immediately see the result.Updated Add Style Menu
In release 2016.1 we have redesigned the add style menu. The designer of styles can create a style for the report components, charts, gauges, cross-tabs, charts, and report controls. Each style will have its own settings considering the component to which it will be applied.Updated Show Styles Menu
In the 2016.1 release we improved the Show Styles menu. With this menu, you can find the current style, see the available styles, and choose the appropriate one. Calling the drop-down list of the Show Styles menu can be done by clicking on the thumbnail.AES-128 Encryption in PDF
In the version 2015.3 and earlier of our products, the RC4 40 and 128-bit, AES 256 bit encryption algorithms when you export a report to PDF using. Starting with the version 2016.1 of our products, the algorithm AES-128 encryption is also supported. This encryption algorithm is supported by Acrobat 7 and later. The option is added in Reports.Web products, Reports.Net, Reports.Wpf.New Barcode GS1-128
In version 2016.1 we have added support for GS1-128 barcode. This barcode is designed to encode trade item data for logistics units, and may contain various information. For example, the product code, expiry dates, size, volume, batch code, etc. This barcode is added to the reporting tools Reports.Web, Reports.Net, Reports.Wpf.New Preview in Reports.JS
In the new version we have implemented the full-featured report preview in the JS designer. Previously, the preview only as HTML was available. Now, the preview does not differ from the report viewer and has all its functionality. Available are printing options, exporting the report to PDF, HTML, HTML5, Microsoft Word and Excel. Also, the preview tab may have the search bar, bookmarks and parameters. It also contains navigation, zooming controls, and page view modes.PostgreSQL in Reports.JS
Our product Stimulsoft Reports.JS worked with MS SQL, MySQL, Firebird data sources from the very first release. In the release of 2016.1 we added support for PostgreSQL adapter. Now you can create a PostgreSQL data source and design reports based on this source.Variable of List Type in Reports.JS
When creating reports the variable is used in various cases. Typically, the variable stores a value used to retrieve data, including data filtering. In the release 2016.1 the variable can store a list of values. To do this, when you create a variable to determine its type and a list to choose.Grid in HTML5 Designer
We have added the ability to display a grid on the page in HTML5 and JS designers. The grid is used for accurate alignment of the components relative to each other. For example, you can use the Snap to Grid command to bind the components of the report to the grid nodes. Drawing grid can be done with dots and lines. Enabling Grid and defining how it looks like can be done in the Options window.Duplicate Page in HTML5 Designer
In the release 2016.1 designer now has the commend to copy a page. With this command you can create identical copies of the pages with all components and parameters. To select the copy command, you should call the context menu on the page header. This option was added in the products Reports.Web and Reports.JS.Styles in Drag and Drop Wizard in HTML5 Designer
In this release, for HTML5 and JS designers, we added the ability to define the report style to create its structure. When you drag a data source on the report template the Data window is called in which you should select the data columns and define other options. Now, in this window, you will find the Styles tab. This tab provides predefined styles and custom collection of styles. Choose a style, and it will be immediately applied to create reports. This option was added in the products and Reports.Web Reports.JS.
URL to JSON Data Source in Reports.Java
Earlier you could only specify the path to the JSON file when creating the JSON data source in Reports.Java. Now, while creating the JSON data source, you can specify a URL as a path to the JSON file.Edit Text in Parameters for Swing Viewer in Reports.Java
When using the parameters in the report, the name of the parameters and fields for entering values are placed on a separate panel. In this case, if you must enter the text into the parameter field, then, sometimes, there are some difficulties when typing, as only a part of the text is shown.
Since the release of 2016.1, we have added a text editor options for the Swing viewer.
By the links below you can see the full list of changes and download the latest version of the products Stimulsoft Reports.Ultimate Stimulsoft Reports.Net Stimulsoft Reports.Silverlight Stimulsoft Reports.Web
Stimulsoft Reports.Wpf Stimulsoft Reports.WinRT Stimulsoft Reports.JS Stimulsoft Reports.Flex Stimulsoft Reports.PHP Stimulsoft Reports.Java Stimulsoft Reports Server