Logic for Scrolling using Actuate BIRT

Hello everyone,

Good morning!
I have got a requirement to write a logic for Auto-Scrolling in the viewer from the client. I am new to this topic. Could anyone of you please give me any suggestion how to write the logic for this 'auto-scrolling' and 'scrolling time'. Thanks in advance.

Find more posts tagged with

Comments

Hi Sai,

Could you please clarify? Is the scroll bar on the browser window? What action do you want to take to scroll?

Hello Jeff,

I have to display two tables with different queries in a single report. And where both the resultsets contains huge amount of data. So definitely we get scroll bars in two tables.
Here, my requirement is, if the scroll bars enabled, then they have to move automatically to up or down. It means the data in the table will move till the end of the table.

If I understand correctly, when the web page first opens displaying the report, you want the table data to be scrolled to the bottom row. From the other thread, it sounds like you are putting the table in a grid cell and adding scrollbars to the cell. If these assumptions are correct, please try the following:

Put each table in a 1X1 grid. If you want the tables side by side, place these grids inside a two column grid.
Add a scrollbar to the 1X1 grids by setting the Advanced Overflow property equal to "Scroll" for the grid, grid row, and grid cell as described in the other thread.
Go to the Bookmark property for each of the 1X1 grids and add a unique name (the bookmark must be in quotes).
Add a Text element to the top of the report and set its type to "HTML".
Add script tags in the Text element editor and write code to scroll the grids to the bottom.

Here is a page that talks about how to scroll via JavaScript code:
https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page

The reason to add a bookmark to the grid is because the bookmark gets converted to an ID for the bookmarked element when the report page is generated making the grids with the scrollbars easier to reference in the JavaScript code. The naming is slightly different between Commercial and OS BIRT. For example, if the bookmark value is set to "myGrid1", the ID for the element in the generated web page will be:

OS BIRT: "myGrid1"
BIRT Pro: "container_myGrid1"

I haven't tested this, but I'm guessing the code to scroll to the bottom would be something like:

window.scrollTo(0,document.querySelector("#myGrid1").scrollHeight);
window.scrollTo(0,document.querySelector("#myGrid2").scrollHeight);

I hope this helps.

Hello Jeff,

Thanks for your reply. I have tried as suggested. I have got the report result set side by side but the data was not scrolling.
And the scroll box was expanding as per the resultset. Please view the snapshot attached below.
How to set a height and width for the scroll box and how to make it scroll automatically. Could you please provide me a sample example if possible. Thanks in advance.

Hi Sai,

This code works in a web page:

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
}

#content {
  height: 800px;
  width: 2000px;
  background-color: #bbddff;
}
</style>
</head>
<body>

<div id="myDIV">
  <div id="content"></div>
</div>

<p id="demo"></p>

<script>
  var grid = document.getElementById("myDIV");
  grid.scrollTop = grid.scrollHeight;
</script>

</body>
</html>

I tried adding a Text element to a report with the following code (bookmark = "myGrid1"):

<script>
var grid = document.getElementById("myGrid1");
grid.scrollTop = grid.scrollHeight;
</script>

It isn't working. I can see the scroll bar but it isn't scrolled down. I can also reference the grid and get the correct scrollHeight, but the scrollTop value is not getting set. I haven't figured out what the issue is yet.

Hello Jeff,

Thanks for your reply. I am trying to use tag in Text. But I am unable to get the grid value there in Text element. Could you please tell me how to get the access of the grid element in Text using tags.
Thanks in advance.

Hello Jeff,

Thanks for your reply. I am trying to use "marquee" tag in Text. But I am unable to get the grid value in Text element. Could you please tell me how to get the access of the grid element in Text using "value-of" tags.
Thanks in advance.

I'm not sure what you mean regarding accessing the grid using "value-of" tags. Attached is an example that might answer your question. I was able to get the grid to scroll down. The code to scroll the grid is in the red Text element beneath the grid (only visible in the designer). When you run the report, the code causes the table to automatically scroll to the bottom when the report is first displayed. I added a bookmark property to the Table element on the report and referenced its closest parent "div" where the scroll bar gets added. I tried to reference the "div" directly, but I couldn't figure out how to add a bookmark to it because various layers of divs get added to the page.

I also added the red Text element in the table that uses a "marquee" tag and a "value-of" tag to scroll the text continuously. Note that the "marquee" tag is deprecated in some browsers. I tested in Firefox and Chrome. The marquee tag works in both.

Hello Jeff,

Wow!! it was working!! the whole table was scrolled down. Thanks Jeff.
Could you please clarify my following doubts:
a) In the text you have written
var grid = document.getElementById("myTable").closest("div"); // what is meant by "closest("div")"?
grid.scrollTop = grid.scrollHeight;
b) Could you please explain the logic in the script I am unable to understand the logic behind.
c) I have added a new line in the script as follows:
" window.setTimeout(scrollPannel(), 2000); " // after 2 seconds the table was scrolled to bottom.
Can we scroll down the table in a smooth way. I mean like "marqee"? so that the we can see the table is moving up. Hope you got
my point.
d) Can we move the table " Top to Bottom" and " Bottom to Top " by considering parameter value ? If so could you please tell me how
to make it happen.

If you run the report and press the F12 key with your browser selected, you can inspect the code for the web page. I added a Bookmark property to the Table element in the report set to "myTable". I searched for it in the web page source code as shown above. The emitter added it as an ID to an HTML table element on the page. The "div" element directly above it has the scroll bar.

I tried to add a bookmark to the div with the scrollbar, but I could not find a way to do it. There is no documented way to map Birt elements to web page elements. The emitter handles each layout differently. That is fine though. There are many ways to reference elements using JavaScript. I used "closest" which you can google for more info, but there are many other ways to reference DOM elements that could have been used. It's just standard web programming. The same goes for grid.scrollTop. I searched the web to see how to scroll.

I don't know how to do an animated smooth scroll in JavaScript, but it should only take a few minutes of searching to find numerous code examples. I believe the amount of scrolling is specified in pixels. "scrollHeight" is the full height of the element, so the scrolling goes all the way to the bottom. To use a parameter and scroll to the middle of the table, change the code to something like:

grid.scrollTop = params["param_name"].value;

Set the parameter value to an integer, say 400.

Hello Jeff,

The "Overflow: Scroll" is working in BIRT Open source but now in BIRT pro. It didnt showing any scroll bars to the grid. Its simply displaying the table.

In BIRT Pro, the prefix "container_" is added to the ID. If your bookmark is "myGrid1", the code is:

var grid = document.getElementById("container_myGrid1");

I have already tried that but still it was not showing any scroll bars there.

I tested the attached report in OpenText Analytics Designer Version: 24.4.0, Build id: v20180424. It scrolls properly.

Hello Jeff,

Thanks for sharing the sample report. I have tried and applied small changes to the text element and added a Click button in Open Source. When we click on it only the displayed table is getting scrolled up instead of whole data. I have attached the report below please view it and please let me know if you have found any updates. Thanks in advance.

It looks like the issue is related to setting "style.bottom". It changes the position of the element on the page. To scroll inside the element, replace that one line of code with:

elem.scrollTop = pos;

Hello Jeff,

I have replaced as suggested it worked!! Thanks. Could you please explain I am not getting scrollbars to the grid in Commercial tool. I have given Overflow:Scroll to Grid, Column, Row, Cell as well. But i am not getting any scrollbars. Any idea please.
Thanks in advance.

Is the grid row height set?

Hello Jeff,

The above scroll logic is working in Commercial tool as well. But I am facing two new issues:
a) After scrolling to bottom, I am unable to scroll to top manually ( by moving the scroll bar).
b) I have tried to scroll Top by modifying the scroll logic(please find the code in the attachments). But it was not working. Could you please help me on these issues.

Thanks in advance.

@Sai Krishna said:
Hello Jeff,

The above scroll logic is working in Commercial tool as well. But I am facing two new issues:
a) After scrolling to bottom, I am unable to scroll to top manually ( by moving the scroll bar).
b) I have tried to scroll Top by modifying the scroll logic(please find the code in the attachments). But it was not working. Could you please help me on these issues.

Thanks in advance.

@Sai Krishna said:
Hello Jeff,

The above scroll logic is working in Commercial tool as well. But I am facing two new issues:
a) After scrolling to bottom, I am unable to scroll to top manually ( by moving the scroll bar).
b) I have tried to scroll Top by modifying the scroll logic(please find the code in the attachments). But it was not working. Could you please help me on these issues.

Thanks in advance.

Hello Jeff,

I have added the "return" statement at the end of the logic and now i am able to move the scroll bar manually.
But only issue is with scrolling back to top is not working.

Hi Sai,

Try adding a "clearInterval" in the "else" statement after the scrolling code. I haven't tested the code, but I suspect that setInterval(frame, 5) is resetting the scroll position every 5 milliseconds and it is not getting cleared when pos != 0.

Hello Jeff,

Thanks for your response. I have changed the code as follows:
function frame() {
if (pos == 1) {
clearInterval(id);
} else {
pos--;

  elem.scrollTop = pos; 

  if((elem.scrollTop <= 1)&&(elem1.scrollTop <= 1)){
  return(0);
  }

}

}
}

And it worked!! But i have a doubt when I have changed the overflow to scroll, the table was showing in a fixed size. How to make it into flexible size. If you have any ideas please help me. Thanks in advance.

@Sai Krishna said:
Hello Jeff,

Thanks for your response. I have changed the code as follows:
function frame() {
if (pos == 1) {
clearInterval(id);
} else {
pos--;

elem.scrollTop = pos;

if((elem.scrollTop <= 1)&&(elem1.scrollTop <= 1)){
return(0);
}

}
}
}

And it worked!! But i have a doubt when I have changed the overflow to scroll, the table was showing in a fixed size. How to make it into flexible size. If you have any ideas please help me. Thanks in advance.

Hi Jeff,

I simply changed the grid row height and it was displaying in big size. Issue is that at present I am using with buttons but the user wants to scroll automatically after scroll the report and in a loop.. Is there any option to scroll the report in a loop continously.

If I understand correctly, you have "setInterval" in the button onClick event. The click initiates scrolling but you want the scrolling to happen automatically. Move the setInterval method to the top of the script so that it runs when the report is generated. If the current scroll position equals the bottom position, reset the scroll position to the top in order to loop.

Hello Jeff,

I have tried like this :
**

var max = 0; var elem = document.getElementById("myTable").closest("div"); var pos = 0; var id = setInterval(frame, 1); function frame() { pos++; elem.scrollTop = pos; max = elem.scrollTop; if(elem.scrollTop >= 1035){ pos = 0; } }

**

But it was restarting the scroll in the middle of the table data. I am unable to find the bottom position. Could you please tell me how to find the bottom position value.

I suggest adding some debugging code. I found this example that displays the scroll position:

https://w3schools.com/jsref/tryit.asp?filename=tryjsref_element_scrollleft

Maybe if you increase the interval to slow down the scrolling and display the position, it will be easier to see what is happening.

Hello Jeff,

Good evening!
I have tried to get the bottom position of the element by giving the below:
alert(document.getElementById("myTable").scrollHeight+" Scroll Height"); - It was showing value = "459".
But the actual bottom position of the elem.scrollTop = "387".
I may get the lot of data from the database which we cannot estimate the bottom position.
Could you please tell me if there any possibility to crack this issue. Thanks in advance.

CSS has borders, margins, and boxes within boxes within more boxes. Getting and setting the correct positions is always difficult.

I don't think elem.scrollTop can be set above its max. Try something like this:

var prev = elem.scrollTop;
elem.scrollTop += 1;
if (elem.scrollTop == prev) { // hit the max
elem.scrollTop = 0;
}

I have tried with your logic but it was not happening . The only thing I required is the bottom value of the "elem.scrollTop" element Jeff. I am struggling to get this since a week. Could you please help me on this issue.

Here is a discussion of the code to get the max scrollTop position (I haven't tested these suggestions):

https://stackoverflow.com/questions/17244828/finding-the-maximum-bottom-value-of-scrolltop-on-a-div/17244962

Also, here is an example I created showing the code from my previous post as an alternative solution:

https://jsfiddle.net/m4bsuf5v/