Page 1 of 1
Accessing rendered text values in JS
Posted: Wed Apr 12, 2017 8:04 am
by SergiShy
Hello!!
I'm trying to add some code when generating a report with the js viewer.
I have a text field in my report which contains data from a column in a database table. In this case, the column has integer values, but they represent three possible states of a document. I have a function in my own JS library that translates these values into readable text, for example 0 equals "Ready" while 1 equals "Processed".
In order to use my function to "translate" those integer values into text, I need to access the text component, but not the pre-render instance.
Code: Select all
var text=viewer.report.getComponents().getByName("StateText");
This returns the {} expression I used in the DesignerJS to get the values from the Database in my DataBand. Is there a way to access the rendered value of this text component in JS (0,1,2...)? Also, how can I replace the value of the rendered component with the text returned from my translate function?
I also have another question.
I'm using this to quickly check all the variables in a report. Is there a similar function to access all the text elements in the report? (Without checking their parent elements, like data bands and such). I would like to filter all the text elements in the report, that have a particular prefix in their names, in order to determine if I need to apply my translation function or not.
Thanks in advance.
Re: Accessing rendered text values in JS
Posted: Sun Apr 16, 2017 9:35 am
by Alex K.
Hello,
The report.getComponents() retrieve component from report template. To get the component from rendered report you can use the following code:
report.renderedPages.getComponentByName()
Thank you.
Re: Accessing rendered text values in JS
Posted: Mon Apr 17, 2017 6:37 am
by SergiShy
Thank you very much. Now I can access the components in my rendered pages and read their values to call my custom translations and so on.
But now I have some more questions. Since I'm using viewer.renderHtml to render my report inside html elements, is there a way to alter the text of the rendered elements? I figured out a workaround: first rendering the original report inside a hidden div, then replacing the rendered pages' components with the correct text values and rendering again inside a visible div allows me to get the correct output.
However, unlike report.render() which allows instant access to rendered pages and their components, report.renderHtml takes some time, and I can't access the components I need to modify unless I'm using some timeout function.
Is there a way to determine the time taken by viewer.renderHtml() to render? I would like to render again with the correct texts as soon as possible.
If not, is there a way to alter the post-render component values before they are shown in the screen?
Thank you again.
Re: Accessing rendered text values in JS
Posted: Tue Apr 18, 2017 8:25 pm
by Alex K.
Hello,
Please try to use the report.renderAsync() method.
Thank you.
Re: Accessing rendered text values in JS
Posted: Tue Apr 25, 2017 7:22 am
by SergiShy
Thanks for the reply.
I haven't had much time to test it until now, but now I'm getting these console errors:
Code: Select all
stimulsoft.reports.js:155 The database type is not supported by pure JavaScript. Please read <a href="http://www.stimulsoft.com/en/documentation/online/programming-manual/index.html?using_js_connect_to_mysql_and_ms_sql_database.htm">documentation</a>.
stimulsoft.reports.js:293 Uncaught TypeError: e is not a function
at e._finallyFunction (stimulsoft.reports.js:293)
at e.callFinally (stimulsoft.reports.js:155)
at e.callCatch (stimulsoft.reports.js:155)
at stimulsoft.reports.js:265
at e.callCatch (stimulsoft.reports.js:155)
at stimulsoft.reports.js:259
at e.callCatch (stimulsoft.reports.js:155)
at e.catch (stimulsoft.reports.js:155)
at e._tryFunction (stimulsoft.reports.js:259)
at e.callTry (stimulsoft.reports.js:155)
Also, if I remove the JS setTimeout, I get the same error directly in an alert.
This is my code in the moment of rendering:
Code: Select all
viewer.report.renderAsync();
//The code I was using earlier for the first "fake render"
// viewer.renderHtml("falseViewer");
// var falseViewer=document.getElementById("falseViewer");
// falseViewer.parentNode.removeChild(falseViewer);
setTimeout(function(){
viewer.report.renderedPages.list.forEach(function(page,i,arr) {
var components=page.getComponents().list;
components.forEach(function(component,x,arr) {
//My translation functions
});
});
viewer.renderHtml("viewerContent");
}, 1000);
If I use the "false rendering" approach the report works correctly, it just takes too long due to the timeout. However I don't know why report.renderAsync(); is giving me those errors. Is this method dependant on the type of database connection? I'm using Firebird.
Thank you for the help.
Re: Accessing rendered text values in JS
Posted: Thu Apr 27, 2017 7:24 am
by Alex K.
Hello,
We couldn't reproduce this bug. Please try to check the last prerelease build.
If the issue still present, please send us a simple project which reproduces the issue for analysis.
Thank you.