[{"id":"5efffa63-6bf4-4819-8af7-0f6b8e1c53a4","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"dfd416a6-eef9-49a0-bb8b-2e739da5cc1c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"3b1e4fc6-fe58-48c3-b090-4335186ca05c","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"7f93f7b9-9f7f-46b2-b05f-494017b34eae","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"95079239-11e6-44bd-8e3f-4c5b9f8e172c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"43ece935-4016-4eb3-a3f8-5951257cb2a7","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"b2fdc309-b91f-42a8-b6f5-5c04d366748e","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"bb982598-dc4e-4495-884c-64f4338def46","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"c632c625-e3a4-4a10-abfa-66bf4a2cd520","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"8fc7bf9e-d24f-43cd-a915-6f8a991152c4","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"7e488fdd-64d8-4c8f-9f96-7a9590f02070","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"4d93a50e-208e-44ef-8ea6-8e81d4c8f339","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"e77dbdc2-200d-4c9c-9bf7-907a453eccb0","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"eecc4b5c-431b-4677-887b-a523a0d10cfd","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"ba126ca3-9e37-4aed-b486-a79bd39b3d86","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"5792319e-7207-4871-a69d-aa3b6eabad63","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"eb1cc175-3766-46e9-9659-c125771a58d4","tags":[{"name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3"}]},{"id":"212b23f1-4bfe-46f9-91cf-f24eca55418d","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]}]
DEMO DOCS THEME EDITOR API
DOWNLOAD
(Showing Draft Content)

ActiveReportsJS: What's New in version 4.0

Modern Front-End tools support

ActiveReportsJS included support for React, Angular, and Vue frameworks since the beginning. Front-end development trends, though, brought new frameworks and tools which are now supported by ActiveReportsJS.

Vite

Vite.js is a build tool that provides fast and lean development experience for modern web projects. You can now build your React or Vue projects that utilize the React Report Viewer and Designer or Vue Report Viewer and Designer, respectively, with Vite v2 or v3.

Next.js

Next.js is a React-based framework that provides a well-defined structure for your application and optimizations that make the development process and final application faster. You can now use the React Report Viewer and Designer in your Next.js v13 projects. Kindly note, that ActiveReportsJS components work only on the client-side, and thus they have to be dynamically loaded. You can check this blog post for more information.

Nuxt.js

Nuxt.js is Vue-based framework that provides a well-defined structure for your application along with optimizations that make the development process and final application faster. You can now use the Vue Report Viewer and Designer in your Nuxt.js 3x Single Page Applications.

Svelte

Svelte is a radically new approach to build web applications. It's a compiler that converts components into efficient JavaScript that surgically updates the DOM. You can now use the Pure JavaScript Viewer and Designer components in your Svelte v3 projects.

New Layout Features

Multi-Section Continuous Page Layout

Continuous Page Layout has been updated to support multiple sections, each with distinct page size, orientation, and margins. This feature enables you to seamlessly integrate various types of content into a single report. You can experience the versatility of the Multi-Section Layout feature by visiting the demo.

Advanced Layout Options for the List

The List data region can now be configured to produce a grid-like representation of your data by using advanced layout options. You can visit the Configuring List Layout for more information and check the demo on the web-site.

Advanced Interactivity

You can now configure the Apply Parameters interactive action to implement the Runtime Filtering in your reports. You can check the demo on the web-site to see the new interactive capabilities in action.

New API and Expressions

IndexOf function

You can use the newly introduced IndexOf function to determine whether a given element can be found in the array or string.

Viewer.showParametersOnOpen property

The Report Viewer component now exposes the showParametersOnOpen property that indicates whether the Parameters Panel should open automatically upon report loading, even if the report's parameters have default values.

Designer.documentChanged event

The ReportDesigner component has been updated to include the ability to register a documentChanged event handler. This event is triggered whenever a user modifies a report that is currently loaded into the designer instance. This new API can be utilized to implement the AutoSave functionality and other scenarios.

UI improvements