In the 2022.4 release packages of Reports.JS, Reports.PHP, Dashboards.JS, and Dashboards.PHP were restructured.

---

Backstory

Everything started with the decision to add a new interface theme in the Microsoft Office 2022 style to our products. However, it would considerably enlarge the number of CSS files, which would essentially increase the size of product packages. As a result, we decided to change the design models of JS components to solve the following tasks:

• add a new interface theme with various color accents;


• remain backward compatibility for our users;


• avoid increasing the size of product scripts.

Let’s go deeper in detail.

---

New theme

As it was noted before, one of the main tasks of the 2022.4 release was to add a new interface theme for JS components in the Microsoft Office 2022 style with various color accents and the use of this theme by default as well as keeping of backward compatibility that is an ability to change the theme to the Microsoft Office 2013 with a necessary color shade any time.

---

Getting rid of CSS files

Adding a new interface theme with the old design would have increased the number of CSS files. We found a solution to this problem and moved all style settings and controls to script files, completely getting rid of CSS files.

Now, the stimulsoft.viewer.js contains all necessary component style settings to view reports and dashboards, and the stimulsoft.designer.js file includes all component style settings to create and edit reports and dashboards. Thus, CSS files are not required for the product to work at all.

---

The new method and the new option

To save backward compatibility, we provided the ability to use a component option or a special method. The new theme option has been added to JS components to set interface themes by default. It is placed in the appearance settings group. The option can be set by one of the StiViewerTheme (StiDesignerTheme) enumerations. For example, options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022WhiteBlue.

In addition, to change the theme of the component, a special setTheme method has been added. It allows you to change the theme while working with the JS component. As an argument, the method takes the same enumeration, for example, viewer.setTheme(Stimulsoft.Viewer.StiViewerTheme.Office2022WhiteTeal).

---

The display of icons in various scales

We added additional images of component controls in several sizes to display icons in various screen scales. Naturally, the increase of the number of images caused an enlargement of script size. To avoid this, we converted all images to the WebP format, and it allowed us to save the previous product script size. Now all JS components, the designer, and the viewer look correctly at different user screen scales.