We continue to tell you about new features of Stimulsoft products 2022.2, and today you will learn about the most famous browser Internet Explorer and how our reporting tool works in it.

A bit of history

First of all, let us remind you that Internet Explorer history, or simply IE, dates back to 1995 when it was first presented as an additional Plus! package for Windows 95. Later versions were available as free downloads and were used by many people to access websites on the World Wide Web. Over time, Internet Explorer was integrated as a part of the operating system package, and it was being developed till 2016. The last version was Internet Explorer 11 in the Windows 10 operating system. After, it was replaced by a more modern Microsoft Edge web browser.

The future of Internet Explorer 11

IE11 was supported in Microsoft Teams until the end of November 2020 and Microsoft 365 until mid-August 2021. The end of support for Windows 10 editions that are outside of the Long Term Servicing Channel (LTSC) is scheduled for June 15, 2022. However, Internet Explorer became a component of the operating system long ago. For some corporate versions, for example, Windows Server 2019, the security system updates will be released until at least 2029. You should know that now there are a huge number of devices that use this browser as the only solution. Moreover, Internet Explorer 11 is used by many applications that are impossible or impractical to upgrade.

Windows 11 and IE11

Internet Explorer is not supported as a separate application in the new operating system, Windows 11. However, at least until 2029, Microsoft promises support for IE in Edge. This way, Windows users will be able to work with the once most popular browser in the world for a long time.

Internet Explorer 11 and Stimulsoft products

Now, we are coming to the central part of our article. Stimulsoft company releases various products, including reporting tools, which work in the browser. They include Reports.JS and Dashboards.JS. These reporting and data analytics tools are created in pure JavaScript. The products are not connected to an operating system and can work on any system that supports JavaScript in the browser.

In the 2022.2 release, we have added an ability to compile scripts of a product to ECMAScript 5 (ES5), which works in Internet Explorer 11. You can run the ES5 script builder that is included in the licensed product package with a source code.
You can acquire a product license with a source code here:

What next?

Script compilation instructions for ES5:
  • Download source codes of the product you need, Reports.JS or Dashboards.JS. You can do it in a user's account;
  • Extract the archive and go to the following path: ...\ts\;
  • Invoke the command line in this repository;
  • Run the npm install command to install missing dependencies;
  • Compile scripts for ES5, having run the npm run build_js-es5.

The compiled scripts will be located in the path ...\ts\build\es5\. Next, you can use them in your projects and applications by generating reports and creating dashboards. This way, you can get updates and have a modern, fully functional reporting tool that is fully compatible with Internet Explorer 11.
To show you visually the process of scripts compilation for ES5 in Stimulsoft products, we have made a tutorial video:

If you have any questions about compatibility with Internet Explorer 11, contact us, we are always glad to assist you.
Today’s article will tell you about a new dashboard element, which has been available in Stimulsoft products since the 2022.2 release – Cards. This element allows you to display grouped data as cards. You can display values from data columns in each card, including images, and apply graphical analysis to these values. But, first things first. Firstly, you should understand how cards are formed in the element.

Creating cards

When a new data column is added to the Cards element, its card is created for each unique value from this column. When adding other data columns, their values will be compared with the values from the first data column and added to the corresponding cards. This way, data is grouped from a source and displayed on a particular card. Please, note!

If data columns from various data sources, between which there is no connection and data, and they can be compared with, will be added to the element, cards will be formed both for unique values of the first data column and the second one. If there is a connection between the sources, the values from a column of another data source will be compared with and added to the cards formed by the values of the first data column.
Generally, the number of cards depends on the number of unique values in the data which is defined for the element.

Graphical analysis in cards

Data column type is defined automatically as Measure and Dimension when adding. The analysis function is always applied to the columns of the Measure type but not to Dimension. You can change the data field type at any time. In this case, the same principle as for data fields in the Table element works out. Apart from displaying this in the cards, you can apply various types of graphical analysis to them, for example, Data Bars, Color Scale, Indicator, Bubble. These analysis types allow you to display the relative proportion of a value by various graphical means from the sum of all data column values. In addition, you can create Sparklines according to the values of a data column in a card. It’s a little Clustered Bar or Range Bar. You can enable or disable graphical analysis in the element editor by switching a type for each data field.

Data output order

The values from the data columns in the card are displayed consistently. The data columns placement defines this order in the element editor. First, the card shows the value from the topmost data column in the editor, then from the one below, and so on. Thus, to change the data output order in the card, you should change the data columns order in the element editor. By the way, each value from a data column in a card will be displayed in a new row. However, if you need, you may output values in one row. To do this, you should set the Wrap Line property to False for the data column, after which the values should not be wrapped.


The cards are output in the element consistently. Depending on the element size, its height, and width, the number of cards that can be displayed will be calculated automatically. Filling an element with cards by default starts from left to right, after which it moves to the next line in the component. The cards can be output from top to bottom and then in the next column on the right. This behavior is determined by the value of the Orientation property of the element. Lifehack

Suppose you need to output cards strictly in three columns in a horizontal orientation or, for example, three rows in a vertical direction after in our report and dashboard generator. In that case, you can force the number of columns in the element in the Column Count property. In this case, you should understand that the size of the cards themselves will be calculated in such a way as to fit the required number in a column or line.

Cards design

The element and cards are designed using properties or via the Style. When writing the article, the style provides you access to some element design settings, for example, Back Color, Fore Color, Line Color, and a set of colors for the Color Each mode. All other settings are available in the properties. And in this case, you should clearly distinguish between the settings of the Cards element and the settings of the cards in this element. The fact is that some properties may be repeated in name but be different in purpose. For example, you can define a corner radius for both the element and the cards in that element. All element design settings are placed in the Properties panel, and all card design settings are placed in the Properties panel in a separate group - Cards.


Separately, we would like to remind you about the Color Each mode. In this mode, a card gets its own back color from a certain color collection in the element style or the Series Colors property. The mode is enabled or disabled depending on the value of the Color Each property from the Cards group.
Also, we have prepared a video with a description of work a new functionality for you. Watch this and other video tutorials on our YouTube channel.

This way, the cards as dashboard elements have great data visualization and analysis features. We hope that the article was helpful to you.
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.
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.