We continue to acquaint you with the new functionality, which has become available in Stimulsoft reporting and data analytics tools since the 2022.2 version. Today, we’re going to tell you in detail about a new feature of visual QR code customization.

Barcode

Barcode is encoded information in a graphic view, which can be decoded using special readers.

The most popular barcode this day is QR code. It’s hard to imagine an area in which this barcode type is not used at the moment – from industry to banking, from healthcare to museums. Such popularity of QR code is explained by the ability to code different information of huge volumes and the ease of reading the information. Most modern mobile devices can decode QR code by standard means.

Sample of invoice in banking with a QR code, which contains additional information.


Also, it’s worth noting the prevalence of QR codes in the era of the COVID pandemic for vaccination passports and PCR tests.

Sample of a PCR test report using a QR code.

Now, we’re going to tell you about the use of QR codes in reports and about new features for them. Using this barcode type can be different and is actually limited only by the imagination of a report creator. Nevertheless, its main task is to code specified data when report creation.

Data

In our reporting tool, QR code is one of the types of the Bar Code component. Using this barcode type, you can code various data - some texts, URLs, and expressions. When working with some text and links, everything is simple – specified data will be automatically coded. The work with expressions opens more possibilities. If you specify an expression in a barcode code, the report generator will process this component and its expression when creating a report. The result of the calculation of the expression will be encoded in a QR code, which you can get when you read it. The expression can also be a link to a data column. Did you know that?

The Bar Code component in a report doesn’t have its own Data Source property. However, when placing this component on the Data Band, it will be printed as many times in the report as the Data Band is printed. For each copy of the Data Band in the report, the barcode expression will be calculated, and the result will be encoded and displayed in the rendered report using the Bar Code component. This way, using QR code and the Data Band, you can display information in a report from a data source.
Our users have known these features for a long time, but we have added a functionality of visual QR code design in the new version. Next, we will tell you about that.

Visual design

The Bar Code report component contains different design settings. You can define the component border, background color, and graphic elements color for it. Also, you can define barcode rotation level, enable quiet zones, etc. All these features apply to all barcode types. A new feature, in this case, is the ability to design structural QR code elements visually.

QR code consists of several structural graphic elements. Firstly, each code has a body in which data is encoded using visual elements. Secondly, a code has search zones, which are called code eyes. The eye is a graphic element in a frame. You may customize all these structural elements.

QR code visual design is customized in the QR code component editor. All visual QR code customization properties are added to the Appearance group in the component editor. You can change graphic elements using the Body Shape, Eyeball Shape, and Eye Frame Shape properties. Each property contains its own set of QR code shapes. Using them, one or another graphic element of the QR code will be drawn. Also, you can define Brush and Color for each structural element to draw it.

QR codes customization in Stimulsoft Reports




You can see several samples of invoices with a visual QR codes design on our website.

invoice 2


More samples of reports with QR codes, you can find in our online storage by the «QR code» request. Reminder!

In addition, you can load an image for your QR code. This, coupled with the functionality mentioned above, opens up excellent capabilities for creating a unique QR code in your reports. However, don’t forget that the capabilities of your reader, in this case, can limit customization and the functionality, which are available in the Stimulsoft report generator.

There is a video instruction with a description of the QR codes customization functionality on our YouTube channel.

We hope that the article was helpful to you. If you have any questions, contact us, we will be glad to solve your problem.
In the previous article we acquainted you with the report designer – told you about how and where you can download and install it, about skill levels, and how they exert influence over work with the application. Also, you learned about developer packages for integrating the reporting system into your application. This time, we will tell you about work with the report designer, and today we’re starting with the first and crucial step – data connection.

Why do I need to connect data?

As we have already told you, the data connection is the first step when working with the report designer, so as you’re not able to create a report or dashboard without data. This process is carried out in the dictionary and includes the following steps:

  • creating data sources;
  • creating connections.

Creating data sources

The dictionary contains the entire list of all sources and their connections. Firstly, to create a data source, you should run the report designer and go to the dictionary.

Data connection in the report designer

You should find the New Item in the dictionary and click the New Data Source. The next step is to select a data source type, and you can select any of all provided. We’re going to take MySQL, for example. Remember!

Data adapters in Stimulsoft reporting tools can be embedded or external.
After selecting a data source type, the report generator checks out installed adapters in the following path. If there is no current adapter, you’ll be offered to download it. To do this, you should click the Download button, and after that, the report generator will download and install the adapter you need.

Creating connection

After installing a data adapter, you will see the window of creating connection to data storage. You should check the connection in this window, having clicked the Test button. At the end of testing connection, the following message will be displayed:

Data connection in the report designer

So, a connection has been created. Now, in the Select Data window, you should select data tables that you want to see as data sources in the dictionary. There’s the New Query for SQL data sources button that is used to create a query.
On the basis of selected data sources, you can create reports and dashboards. Reminder!

You can edit connected data sources, having changed your request, the number of columns, their type, name, aliases.
You can find more detailed information about how to create MySQL and other data sources in our documentation.

Creating a file data source

When creating reports, you can retrieve data from the following files: CSV, Excel, JSON, XML, and DBF. Files with data can be external and embedded to report template. Don’t forget that in this case, report file size will be increased by the size of a data file.
Any external file with data can be embedded to report resources. Read about how to do this here.

On our YouTube channel, we have put together a large playlist of video tutorials about working with data.

In the next article, we will tell you how to create a dashboard in the report designer. If you have any questions about data connection, creating data sources, or creating connections, you should contact us or refer to our documentation for help.
Today, we are going to tell you about a new element for dashboards – Button. This special element allows you to execute various scripts by click or depending on a condition.

Scripts

A script can be created using Blockly or a platform language syntax on which the Stimulsoft product is implemented. You should remember that a script created using Blockly is universal for all platforms and will work in the Interpretation mode. More detailed information about it is here. But first things first. So, let’s start with a simple one: adding an element to a dashboard.

You can add the Button element to a dashboard both from the Insert tab and the Toolbox. Also, this element can be copied to the clipboard and pasted from it or copied using the Control button in the report designer. After the Button is added to a dashboard, you should define its type, create a script and customize its visual design. This element doesn’t have its own editor, and all of its customization is carried out using the element properties.

Button types

The Button element may be of three types. All of them are familiar to users. One way or another, everybody would face with them on web pages or applications.
  • Button
    First type, which is used by default for this element is called Button. As a rule, its main purpose is to execute a script by click.

  • Check Box
    Second type which can be applied to the element - Check Box. The main difference from the Button type is that the Check Box may have two conditions – Checked and Unchecked. This type can execute a script by click but, what’s more relevantly, can define a script depending on a condition. In addition, using the Checked element property, you can define a condition by default for the checkbox – Checked or Unchecked.

  • Radio Button
    Third element type – Radio Button. This type is similar to the checkbox, but the Radio Button can be grouped into one control using the Group property. Buttons are grouped according to the general rules of grouping elements in a dashboard. Only one button from a group can be in the Checked condition.

Button events

After the button element is created, you should create a script of the button event. At the moment, two scripts - Click and Checked Changed are available for the button. First event is relevant for all types of the element, the second appears only when a condition defined using the Checked property changes from value by default. Accordingly, the button state change event is relevant for the Checkbox and Radio Button.

You can call the script editor for the Click event using double click on the Button element or having clicked the Browse button on the property grid on the Event tab. You can call an editor for the Checked Changed event on the Event tab.

Main properties

Main properties allow you to define the element behavior and are placed on the property grid, the Button group. We have already told you a little about some properties above. They help to define element type, its group, and element condition by default. Also, you can specify the text you need on the button using the same name property and an icon. In this case, an icon can be common or depending on a condition – Checked or Unchecked.

Besides, the main feature contains element geometry type selection. The Button can be presented as a rectangle or a circle. A rectangle can be turned into a square, if you make the height and width of the element the same.

One more important thing is the element behavior, which can be defined using main properties.Reminder!

A dashboard is a dimensionless area when viewing it, and it is stretched to the size of the viewer window if the dashboard settings do not define another one. Dashboard elements are stretched proportionally to their sizes, too.
The button has a behavior setting when stretching as an element. It can be stretched both in height and width, and only in width. It is defined using the Stretch element property.

Main settings help you define the behavior, type, and form of the button. Here’s visual design is carried out using other properties and requires additional consideration.

Visual element customization

Visual element customization is a definition of the button design settings depending on an action of users. You can define settings by default when hovering, clicking, and, in cases with the checkbox and Radio Button, when checked. Visual design can be defined by settings from a style of the button element or using properties in the design group.

Besides, all design properties can be divided into:

  • Common.
    The properties that are present for other elements of a dashboard. For example, brush, style, shadow, rounding radius.

  • Special.
    The properties which are available only for this element, and in this case, they are properties from the Visual States group.

When setting the button using a style, you should use a style of the Control type. The Style element property should be set to the Auto value, and others such as brush, icon brush, and text brush to the From Style value. In this case, all special properties should be set to the From Default State. Please note that not all design settings are present in the list of style properties. In particular, it’s impossible to set the color, type, and icon view from the style.

After the button element is added and customized, all you should do is define a script for the event.

Button scripts

Actions that will be performed when events occur, and there is a script. Due to the functionality available when publishing this article, you can determine the scenario to change the design of dashboard elements. For example, change their styles, round, change transparency, enable and disable watermark, etc. Also, using the button, you can organize data filtering. In addition, you can filter both data of elements and queries in a data source. To tell you the truth, in order to filter data, you should use a report variable. This way, you can create a panel of parameters in a dashboard and adapt its design in the style of the dashboard.

We have prepared several samples of dashboards for you to see simple scripts:

  • Dashboard with buttons, that demonstrates how to change design settings.



  • Dashboard with data filtering in a query. The sample shows filtering in data transformation but the same principle applies to filtering a data storage query.



Also, you can find several samples in our online report storage by Button request. In particular, the sample of data filtering in dashboard elements.
In addition, we have prepared a detailed video with demonstration of main features of a new dashboard element.

We hope this article is clear for you and will help you create dashboards with the Button element. If you have any questions, don't hesitate to contact us.
We are starting a series of articles dedicated to data analytic and visualization. Namely, it is the main tool – report designer. In the series, you will learn everything about working with the application and creating reports and dashboards in general. In today’s world, it isn’t easy to imagine any sphere of human activity without reporting services. Starting from large transnational corporations to small businesses, all need reports.

  • Financial
  • Analytical
  • Accounting

Report designer

There are a lot of services and reporting tools, but their main element – report designer. This application is used for creating, designing and editing reports and dashboards. Apart from these features, Stimulsoft report designer provides access to download of developer packages for various platforms, publishing a report to a project, work with cloud and much more. However, sometimes new users face problems with the first run of the application and further work with it. Let's clear things up.

Firstly, download

In fact, everything is much easier than it seems. First of all, you should download the application. You can do this on our website, on the main tab, or on the Downloads tab. Anyway, you have to go to the download page, in which you click the Download button, and the file will be downloaded to your storage or any path you specify. If you are using our tool already, then when a new one appears, an update dialog will pop up, and you agree with it, having clicked the Update button. After that, the setup file will be downloaded automatically.

Download Designer
Recommendation.

To work with the Stimulsoft report generator correctly, we urge you to update to the latest version of our products constantly.

Installation

Now, let’s go to the installation process. You should run the downloaded file, get acquainted with our license agreement, accept it and click the Install button. After the application is installed, click the Finish button to complete the process.

Authorization

To work with Stimulsoft Designer, you should have a user account, which you may create both in the application and on our website. To do this, you can log in when running the report designer and in the following subdomains:



demo.stimulsoft.com

This online storage contains samples of reports and dashboards structured by categories - education, finance, healthcare, insurance, marketing, sales etc.

cloud.stimulsoft.com

This cloud service is used for rapid and effective analysis and visualization of data without programming and the need for creating own applications.

devs.stimulsoft.com

This is the Admin panel for users. You can view invoices issued, check subscription expiration dates, check information about users and purchased product licenses, and download license keys.

Skill levels

After successful installation and authorization, you should select a skill level of the report designer. The number of properties, options, element settings will depend on the skill level you choose. There are 3 skill levels:

  • Professional.
    It’s the most advanced level for proficient users. It contains a full functionality of options, settings, and tools.

  • Standard.
    This skill level includes a full set of report components and dashboard elements but with a limited number of settings.

  • Basic.
    This is the best option for those who do the first steps in report design. It contains a minimum set of settings.

Skill level selection

To set the skill level, you should go to the report or dashboard editing mode, open the account menu in the upper right corner by clicking on the account name and selecting the Account item. After that, the profile window will pop up. You will find the Skill Level option there, where you may choose the level you need. Also, you can use another way – select the level you need in the properties panel settings or select it from the context menu of this panel. More detailed information about it, you can find here.

Skill level

Download developer packages

We offer packages for developers – a set of libraries, scripts, and other files. Using them, developers can use reports and dashboards in their projects. Each project contains the report and data analysis engine, reports and dashboards designers, and viewers for all supported platforms such as WinForms, WPF, ASP.NET, ASP.NET MVC, .NET Core, Blazor, JavaScript, Node.js, Angular, PHP, Java, and various frameworks, built on these platforms.

To download them, you should go to the Downloads page (the page where you downloaded the report designer), find the Stimulsoft Packages for Developers section. After that, a zip archive with Stimulsoft libraries and scripts, which you can use to develop your applications, will be downloaded to your computer.

Did you know that..?

Apart from Stimulsoft Designer, you can use Stimulsoft Designer.JS. The first one works only on the Windows operating system, while a JS version works on all operating systems. By the way, there are separate installation files for macOS and Linux, and you can find them by opening the Downloads page and the More apps point.
In the next article, we will move on to working in the tool and give information about connecting data in the report designer. If you have any questions about downloading our tool, installing it, or choosing a skill level, please contact us or check out our documentation where you can find step-by-step instructions for each item.
We are glad to inform you about the release of a new version of products for creating reports and dashboards 2022.2. In this release, we have added new elements, extended the functionality of existing components, and optimized the work of products for more rapid and convenient data analysis. We will tell you about the main changes in the new version.

Visual design of QR barcode

In this release, we have added the ability to change the visual design of the QR code. You can define the color and shape of various graphic elements of the barcode, and you may set it up in the component editor using properties. Barcode customization is limited only by the functionality of the reader.

QR visual design

Button

New interactive component – Button for dashboards. It allows you to execute a particular script when clicking and depending on a component condition. A script may be executed using a script platform language or Blockly. In addition, the new element has a sufficient number of visual settings, which are available depending on the condition.

Button

Cards

One more component for dashboards – Cards. This is an analysis component, that allows you to group, process and display data by any criterion as a separate card in a dashboard. It supports all types of graphical presentation: Clustered Column, Color Scale, Indicators, Bubbles, Sparklines. It’s able to display text and numeric values, and images, too.

Cards

New chart

New chart type for reports and dashboards – Pictorial Stacked. This chart is used to display the relative share of the value in the overall indicator. Any icon from the list can be presented as a graphical chart element.

New chart

Rounding in charts

This is the new feature for visual chart design. In the previous release, we added an ability to round borders of components in dashboards. Now you can round the following graphical elements in charts - Bars, Clustered Columns, Gantt, etc. To apply rounding, you should use the Corner Radius property. This feature is available for most charts.

Rounding in Charts

ECMAScript 5 (ES5)

Despite the fact that Microsoft promised to stop supporting the Internet Explorer browser completely, many of our clients use it in their applications and projects. That’s why we leave the option to compile script files for the ES5 standard. To do that, you should have access to the source codes of a JS product.

ES5 and Explorer

Publish. Features for JavaScript

In this release, when publishing a report for the JavaScript platform, we have added an ability to select a new type of the React + TypeScript project. In addition, when publishing a report to the JavaScript и Node.js project, now you’re able to enable data adapters for certain source types in a report. Besides, the support of all versions of the popular Angular framework has been added, including the current ones - 10, 11, 12, 13.

Publish and Angular




.NET 6.0 in the Publish

Microsoft will stop supporting the .NET 5.0 framework very soon, and we are gradually preparing a solution to this issue. We told you about the work of our components under the .NET 6.0 framework in the previous release. We have updated the Publish wizard, and you can specify the .NET 6.0 framework version for your project. In the Publish wizard, this option is available in ASP.NET MVC, Winforms, WPF, and Blazor.

Publish for .NET 6.0

Other capabilities of the Publish wizard

In addition to the above, we have added an ability to use a rendered report in mdc format instead of a report template in mrt format in a viewing or export project. To do this, you should check the Use Rendered Report parameter in the Publish Wizard. Another one new feature concerns only export. Now, you can display export settings for a selected platform in the project code.

Publish - Others
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.