What Changed
We redesigned our JavaScript framework components to be platform-independent. The JavaScript Report Viewer no longer relies on the Knockout.js library and uses native rendering mechanisms. This enables us to develop a native Document Viewer for Angular components.
Reasons for Change
- Our current implementation relies on the KO (Knockout.js) library — a library that is no longer maintained. The use of unsupported libraries may lead to undesired maintenance issues for both our customers and the development team.
- Lack of native development methodologies: customers may be unable to take full advantage of JavaScript framework capabilities, resulting in reduced performance, or integration challenges.
Impact on Existing Apps
These changes may affect applications with client-side customizations related to:
- ReportPreview and TabPanel properties
- Parameters and Edit Field values
- Custom editor templates
- Toolbar actions with Knockout-computed properties
How to Update Existing Apps
Since the Document Viewer component no longer uses the Knockout library, model properties can now be accessed directly without using a ko.Observable
function call.
If you want to subscribe to property changes, you must use the event mechanism:
JavaScriptconst disposableSubscription = model.events.on('propertyChanged', (args) => {
if(args.propertyName === 'propertyName') {
const newVal = args.newValue;
***
}
});
If the editor template that uses our model with observable properties has been changed in the application, the onValueChanged
event must now be added because the editor will no longer automatically update the value.
HTML<script type="text/html" id="custom-parameter">
<div data-bind="dxNumberBox: { value: value, onValueChanged: onValueChanged, showSpinButtons: true, min: 1, max: 8 }"> </div>
</script>
How to Revert to Previous Behavior
The following code shows how to revert the previous behavior:
Properties
JavaScriptfunction beforeRender(sender, args) {
const reportPreview = sender.GetReportPreview();
reportPreview.zoom(0.5);
reportPreview.showMultipagePreview(true);
const tabPanel = sender.GetPreviewModel().tabPanel;
tabPanel.width(600);
}
Parameters
JavaScriptfunction ParametersInitialized(sender, args) {
var parameter1 = args.ActualParametersInfo.filter(
x => x.parameterDescriptor.name == "Person1")[0];
var parameter2 = args.ActualParametersInfo.filter(
x => x.parameterDescriptor.name == "Person2")[0];
var preValue = null;
parameter1.value.subscribe(function (newVal) {
var lookUps = parameter2.lookUpValues().filter(
x => x.value != newVal);
preValue && lookUps.push(preValue);
preValue = parameter2.lookUpValues().filter(
x => x.value == newVal)[0];
parameter2.lookUpValues(lookUps);
});
parameter1.value('Tom');
args.Submit();
}