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.

Thanks & Regards,
Sai

Comments

  • Hi Sai,

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

    Jeff F.
    Customer Support Engineer I
    OpenText
  • 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.

    Thanks & Regards,
    Sai
  • edited April 25

    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.

    Jeff F.
    Customer Support Engineer I
    OpenText
  • 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.

    Thanks & Regards,
    Sai
  • edited April 29

    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.

    Jeff F.
    Customer Support Engineer I
    OpenText
  • 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.

    Thanks & Regards,
    Sai
  • 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.

    Thanks & Regards,
    Sai
  • edited April 30

    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.

    Jeff F.
    Customer Support Engineer I
    OpenText
  • 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.

    Thanks & Regards,
    Sai
  • 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.

    Jeff F.
    Customer Support Engineer I
    OpenText
  • 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. :neutral:

    Thanks & Regards,
    Sai
  • 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");

    Jeff F.
    Customer Support Engineer I
    OpenText
  • I have already tried that but still it was not showing any scroll bars there.

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

    Jeff F.
    Customer Support Engineer I
    OpenText
  • 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.

    Thanks & Regards,
    Sai
  • 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;

    Jeff F.
    Customer Support Engineer I
    OpenText
  • 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.

    Thanks & Regards,
    Sai
  • Is the grid row height set?

    Jeff F.
    Customer Support Engineer I
    OpenText
Sign In or Register to comment.