Creating reports and dashboards | Stimulsoft community forum

Subject: Assistance Required: Issue with Dynamically Filling Components and DataSource in Stimulsoft JS Report

Hello Stimulsoft Support Team,

I hope this message finds you well. I am currently encountering challenges while working with Stimulsoft JS for generating reports in my Angular application. I am reaching out for your guidance and assistance in resolving the following issues:

Project Details:

Tool Version: Stimulsoft JS 2023.3.3
Framework: Angular
Tool Initialization: I have initialized Stimulsoft in my Angular application as follows:



import Stimulsoft from 'stimulsoft-reports-js';

// Initialize Stimulsoft
Stimulsoft.System.StiLicense.init(/* license key */);
Stimulsoft.System.StiOptions.initialize();
Code and Report Design Overview:
I have a report design file (res?.reportDesign) that I am loading dynamically. In this report, I am attempting to dynamically fill components and update the DataSource based on the provided data. Here is a snippet of my code:

if (res?.reportDesign != null && res?.reportDesign != "") {
originalReport.loadDocument(res?.reportDesign);

//const clonedPage = originalReport.pages.getByIndex(0).clone();
let data = this.payloadObject as DeliveryStatementConfig;

const targetPage = this.getPageByType(originalReport, data.options.printType);
originalReport.pages.list.splice(0,3); // Clear all pages after cloning

data.pages.forEach((page) => {
let clonedPage = targetPage.clone();
let pageTable = this.preparePageTable(page.rows);

let tableComponent = clonedPage.components.list.find((component) => component.name == 'Tableds1');
if (tableComponent) {
tableComponent.data = pageTable;
clonedPage.components.list[2] = tableComponent;
}

originalReport.pages.add(clonedPage);
});

//originalReport.pages.list.splice(0, 3);
viewer.report = originalReport;

await originalReport.renderAsync(()=>{
viewer.renderHtml("viewerContent");
});



getPageByType(originalReport:any, type) {
...
return originalReport.pages.getByIndex(0)
}

preparePageTable(rows: []) {
let items:[] = [];
.....
return items;
}


My primary objective is to populate an array of objects. This array contains a series of page objects, where each page object encompasses multiple rows. In the provided code snippet, the data for each page is represented by 'page.rows'. My goal is to have this data dynamically displayed within a table in the generated report.

array signature:

data : {
pages: [
prop1: ...
propN: ...
rows: [
prop1: ...
propN: ...
etc
]
]
}

Issues Faced:

Component Data: I am unable to dynamically fill the data of the Tableds1 component.
DataSource/ DataStore: I am facing challenges in dynamically updating the DataSource or DataStore.
Use of 'new Stimulsoft': The usage of 'new Stimulsoft' commands in my Angular environment seems problematic.
Request for Assistance:
I kindly request your assistance in providing guidance on how to correctly fill component data, update the DataSource, and use 'new Stimulsoft' commands in an Angular environment. Additionally, if there are any best practices or specific approaches I should consider, please advise.

Thank you in advance for your prompt attention to this matter. I appreciate your expertise and support in resolving these issues.

Best regards,
[Mahmoud Nasser]
[m.nasser@t2.sa]

Hello,

In your code is used loadDocument method which loads an already rendered report and does not contain any data sources, data.
originalReport.loadDocument(res?.reportDesign);

Thank you.

Dear Lech,

I hope this email finds you well. My name is Lech, and I am reaching out to you regarding an issue I am currently facing. Whenever I use the following lines of code:

//=============================
// Instantiate a new table component
let newTableComponent = new Stimulsoft.Report.Components.StiTable();

// Instantiate a new data row
let dataRow = new Stimulsoft.Report.Components.StiDataRow();

// Instantiate a new text cell
let cell = new Stimulsoft.Report.Components.StiTextCell();
//=============================

I encounter the following error message:

''ERROR Error: Uncaught (in promise): TypeError: stimulsoft_reports_js_Scripts_stimulsoft_viewer_pack__WEBPACK_IMPORTED_MODULE_4__.Stimulsoft.Report.Components.StiTable is not a constructor''

I would greatly appreciate your assistance in resolving this matter. If you could provide guidance or any insights on how to address this issue, it would be immensely helpful.
Thank you for your time and consideration.

Hello,

Please check the following sample:
https://www.stimulsoft.com/en/samples/r ... -from-code

Thank you.

Hello,

If I have a dataset in my report designer and need to fill it, how can I do this?

Example:

var jsonData = JSON.parse(jsonString.value);

var dataSet = new Stimulsoft.System.Data.DataSet();
dataSet.readJson(jsonData);
var data = dataSet.tables.getByIndex(0);

var report = new Stimulsoft.Report.StiReport();

// Add data to datastore
report.regData("data", "data", dataSet);

// Fill dictionary
var dataSource = new Stimulsoft.Report.Dictionary.StiDataTableSource(data.tableName, data.tableName, data.tableName);
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Column1", "Column1", "Column1"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Column2", "Column2", "Column2"));
report.dictionary.dataSources.add(dataSource);

Description: In the code above, I declare a new dataset and load the data from the 'jsonData' variable. However, in my case, I don't need to do this. Instead, I need to fill the dataset that already exists in my report design and show the impact on the TableBand. Please check the designer there and help me.

Please take a look at the attached images

After that, How I can add tables to dataSet, I know dataSet can be contains multiple table alright??

Hello,

Try to use
// Add data to datastore
report.regData("data", "data", dataSet);
report.dictionary.synchronize();

https://www.stimulsoft.com/en/documenta ... _files.htm

Thank you.