Today, we will discuss how to change the appearance of the Report Viewer and Dashboard Viewer components. Customizing the appearance of these components is a common requirement for many of our product users, for both personal and business purposes. In this article, we will provide a guide on how to achieve this.

---

Customizing the appearance of the Report Viewer

The Report Viewer component has built-in CSS styles that determine its appearance. Both the Report Viewer and Designer components have the property named CustomCss, which can be described as follows: Gets or sets a path to the custom css file. This property enables you to specify the path to a CSS file that will override the inline styles and serve as the foundation for the appearance of the components. Note!
These instructions apply to the Report and Dashboard Viewers for all platforms, except for the JavaScript version. Please refer to this article for information on changes to the Reports.JS and Dashboards.JS products, including the elimination of CSS files. Customizing the appearance involves altering the visual aspects of the panel elements, including color, border, size, and many more.

---

How do I specify a custom CSS file for the report viewer?

The best way to download the contents of the CSS file that will be used as the base file is directly in the browser. To do this, press F12 and go to the Source tab. You will be able to find the styles of the designer and viewer and then download them as a file.

After replacing the necessary classes, you should specify the path to the custom CSS file through the CustomCss property, which we wrote about earlier.

---

Examples of advanced viewer customization

As previously mentioned, changing the base CSS file will enable you to alter the appearance of the components. You will need to utilize JavaScript code for more advanced customization, such as swapping buttons, regrouping elements, adding menu items, etc. You can find examples of these modifications in our documentation for the viewer.

We have important news regarding changes to our subscription and licensing model in 2023. These changes will be effective from February 14, 2023.

---

Description of changes and their primary goals:

• The COVID-19 pandemic has increased the demand for remote work. As a result, the notion of an office as a licensing requirement has become obsolete. As such, we are removing the office restriction for Single, Team, and Site subscriptions for embedded solutions and Stimulsoft Designer. Your developers can now work from any location, be it home, another city or country, etc.


• We have decided to rename the Site subscription to Enterprise and update its terms of use. The Enterprise subscription now enables up to 15 developers in your company to use the product without being limited to a specific physical location. The price for the Enterprise subscription remains the same as the Site subscription.

For current Site subscription owners, the terms will remain unchanged, and you can continue to utilize it with the original benefits, including the use of the product by an unlimited number of developers within your organization at the same physical location.

Today we will tell you about the most important updates in version 2022.4 of our products – new components Electronic Signature and PDF Digital Signature. Electronic signature allows signing reports during their creation, editing, and viewing in our product. When exporting to PDF, the PDF Digital Signature component adds an "Unsigned Signature Field" which can be signed in Adobe Acrobat using a digital certificate.

---

How do I add a signature to a report?

You can add signature components to a report just like any other component. Go to the Insert tab, and, in the Signature group, select the component - Electronic Signature or PDF Digital Signature, and drag it to the report template.

---

Electronic signature

There are two ways to sign a report using the Electronic Signature component.
The first way allows you to enter the first name, last name, and initials and then set the style using the available signature styles.

The second way is to draw a signature and add an image, text, or a combination of them.

All signature settings you may find in the component editor. Also, when using the Electronic Signature component, the report can be signed both in editing mode and when viewing it in the viewer. In addition, signatures can be saved and then used when you need them.

---

Creating an electronic signature when editing a report

As noted above, you may modify signature settings in the component editor. You may call the Electronic Signature editor by double-clicking on a component or selecting the Design command from the context menu. Important!
When creating a signature in the report designer, you can do this without calling the editor using the component properties in the properties panel. They completely duplicate all signature settings. Let's go back to the editor. After calling it, you can choose one of the ways to create a signature. If we are talking about specifying the full name/initials, then on the Type tab, you should enter values in the Full Name and Initials fields. Then, using the Change Style control, select the appropriate font. Press the Ok button in the component editor.

You may use these three tools to create a unique signature individually or together. After the signature is created, click the Ok button in the component editor. Your report is now signed. Note!
You may save the created signatures. To do this, click the Save button in the component editor. In the future, you can use them in other reports.

---

Changing the signature when viewing a report

You may change the electronic signature after it has been added when viewing the report. Call the editor - click Sign on the options panel of the viewer. Then you can do the same as in the report editing mode - sign the report in one of two ways, save the used signature or select the saved signature from the list. After that, press the Ok button in the component editor - your report will be signed.
Note!
If the Electronic Signature component is added to the report, but when viewing the report, the Sign control on the toolbar is not displayed, then most likely this element is disabled in the Preview Settings of the report template.Important!
One crucial thing you should remember when using a signature in a report.
For example, the Electronic Signature component is put on the Data band. After the report is rendered, then when viewing it, the number of signature components is equal to the number of Data bands. This is not a mistake, but the principle of building reports in our report writer. In this case, to change the signature while viewing the report, all signatures should be changed. The Next and Back buttons will be available to navigate through the components in the component editor. These buttons are displayed if the rendered report contains more than one Electronic Signature component. At the same time, it provides flexibility when, for example, each report page needs to use its signature.

---

PDF digital signature

A digital signature verifies that a signed document has not been altered by third parties without the author's consent. A digital signature is typically used to ensure the authenticity of document content. A PDF document signature is based on a digital certificate issued by a trusted certification center.
When exporting to PDF, the PDF Digital Signature component adds an "Unsigned Signature Field" which can be signed using a digital certificate in Adobe Acrobat. This is usually used to send the document for signing by another person. If the document should be signed by a group of individuals, then multiple components are placed in the report.
In reality, this component in the report has no settings except for formatting and placeholder options.

So, to sum up: when designing, viewing, and editing a report, you may sign it visually using the Electronic Signature component. When exporting a report to PDF, you can use the PDF Digital Signature component to determine where the digital signature will be placed. This is how you can sign and verify reports in Stimulsoft.

Recently, we released the new version of Stimulsoft Reports and Dashboards (version 2022.4), in which we implemented new ways to visualize data - 3D charts. Let's talk about this in more detail.

---

So, we have added the following types of 3D clustered column charts to Stimulsoft - 3D Clustered Column, 3D Stacked Column, and 3D Full-stacked Column. In terms of data analysis, 3D charts have no difference from 2D charts. Compared to regular charts, the difference is only in a way the chart element is visualized in space.

---

What products include 3D charts?

3D charts have been added to reports and dashboards in all products except Reports.JAVA. All 3D charts you may find in the Clustered Columns category in the list of component types or the Chart element.

---

How do I add 3D charts to reports and dashboards?

Adding 3D charts to a report or dashboard is done the same way as any other type of diagrams. When editing or creating reports, the required type of three-dimensional chart is selected from the Clustered Column category on the Insert or Toolbox tab in the report designer, and then the component is placed in the report template. Next, you should specify data column values and row arguments. The number of rows in 3D charts is not limited.

To use three-dimensional histograms in dashboards, you need to place the Chart element on the dashboard. Then, in the element editor, you should specify data columns for the value and argument fields and select the required type of 3D diagram from the Clustered Column category.

---

Types of graphic elements

When using 3D charts in reports and dashboards, you can use different shapes to draw the graphical elements of the chart series. It can be a rectangle, pyramid, or partial pyramid. Moreover, different rows of the diagram can be of different shapes. To change the shape of a graphic element in reports, select a row in the component editor and change the value of the Column Shape property on the Properties panel.

In dashboards, the parameter for specifying the shape of a graphic element is located in the element editor on the More Options panel. Note!
When manually entering data in the dashboard, it is impossible to change the shape of the chart.

---

Side-by-side

Using diagrams of the 3D type, you may change the arrangement of the graphic elements of the values for the argument along the X axis or in space, in fact, along the Z axis. The arrangement mode of the graphic elements depends on the value of the Side-by-Side property. This property of a component in reports or an element in dashboards is located in the Area group on the properties panel. Also, in the reports, with the extended editor, you can go to the Area tab and change this property on the Properties panel.

By default, the Side-by-Side property is set to False. Thus, the graphic elements for each argument of the chart are located one after the other, in fact, along the Z axis. If the Side-by-Side property is set to True, then, as in two-dimensional graphs, the graphic elements for each argument of the chart will be located next to each other.
You may use 3D charts not only to display data in space but also to open up new opportunities like using various figures for their drawing, the arrangement of argument values, etc. All this provides many different options to diversify user reports and dashboards.

---

We have prepared a video tutorial on how to use 3D charts in reports.

Recently, we have written quite often about the QR сode and how to work with it in our products:

• the article about the QR сode in Stimulsoft Reports;
• QR сode customization options;
• embedding images.

However, we practically did not touch the technical aspects of using the QR code. So, today let's talk about data encoding in QR сode and possible problems associated with it.

---

The general algorithm for applying encodings

The QR code supports various modes of recording information. Typically, the mode selection algorithm works as follows - the input data is analyzed and checked whether it can be written in one of the compact modes (Numeric, Alphanumeric, Kanji). If they cannot be written, the Byte mode is used.
In the Byte mode, the input data is encoded using one of the encodings in the ECI (Extended Channel Interpretation) list. The algorithm checks each encoding in turn and determines whether it can be used to encode all characters of the input data. If none is suitable, the universal encoding "UTF-8" is used.
This is all done to ensure that the barcode is as small as possible, because in the UTF-8 mode the barcode has a maximum size.
The list of ECI standard encodings for the QR code that are supported in our product:

• "Cp437";
• "ISO-8859-1";
• "ISO-8859-2";
• "ISO-8859-3";
• "ISO-8859-4";
• "ISO-8859-5";
• "ISO-8859-6";
• "ISO-8859-7";
• "ISO-8859-8";
• "ISO-8859-9";
• "ISO-8859-11";
• "ISO-8859-13";
• "ISO-8859-15";
• "Shift_JIS";
• "Windows-1250";
• "Windows-1251";
• "Windows-1252";
• "Windows-1256";
• "UTF-8".

Note: fewer encodings are supported for the JS version (this is due to technical limitations of technologies):

• "ISO-8859-1";
• "Windows-1250";
• "Windows-1251";
• "Windows-1252";
• "Windows-1256";
• "UTF-8".

---

Incorrect encoding problem

Different barcode readers may support different sets of encodings for decoding QR codes. For example, barcode readers in some countries only support certain encodings most commonly used in that country.
Also, many mobile applications for reading barcodes only support certain encodings, and some applications do not support the ECI standard at all.
Luckily, nowadays, most scanners are able to handle UTF-8 encoding.
Some of the encodings in this list are similar. For example, ISO-8859-5 and Windows-1251 contain Cyrillic characters. Therefore, it depends only on the input data which of these encodings will be used for the text. Some scanners, for example, do not work with ISO-8859-5 encoding and require Windows-1251 to be used.

Solution

When it is necessary to specify the encoding with which the selection will start, you may use the static property - StiOptions.Engine.BarcodeQRCodeDefaultByteModeEncoding.
For example, let's set Windows_1251 encoding by default:
StiOptions.Engine.BarcodeQRCodeDefaultByteModeEncoding = Stimulsoft.Report.BarCodes.StiQRCodeECIMode.Windows_1251;

---

The problem of "three extra characters at the start of the barcode"

Sometimes users complain that extra characters appear at the start of the scanned information. This is not a mistake but a feature of encoding information in a barcode. If the input data is encoded using UTF-8, then many programs (and our reporting tool) prefix the data with a BOM (Byte Order Mark). This label is a marker for some applications that helps in determining the encoding. However, not all scanners recognize the BOM mark, and then three extra  characters appear at the beginning of the text.

Solution

Set the StiOptions.Engine.BarcodeQRCodeAllowUnicodeBOM option to false to avoid this and do not add a BOM label to the input data.