HTML Button

hatra
edited February 11, 2022 in Analytics #1

Hi All,
I have got an urgent requirement where I have to create 2 HTML Buttons
1: when clicking first HTML Button ( Order Table ) to order column ( in this example CUSTOMERNUMBER from classic car database and customer table
2. When clicking second HTML Button ( Hide Phone ) hide PHONE column.
what syntax and java script would I use for above action please

Cheers

Comments

  • jfranken
    edited August 9, 2019 #2

    If you are using OpenText commercial BIRT, the built-in Interactive Viewer does hiding, sorting, filtering, etc. For OS BIRT, I have attached two examples that show options for hiding.

    Hide_example.rptdesign simply passes in a value to the hidden parameter and reloads the report when the button is clicked. The Credit column has a visibility rule based on the parameter. You need to modify the Text element on the upper right of the report before the button will work. It needs the url for your page.

    Hide.rptdesign uses CSS to hide the element without reloading the report. The example hides a chart, but it will also work for a table. In the element's properties, a bookmark must be added. It automatically gets added as a tag ID property and can be referenced in JavaScript code. Unfortunately, table 'columns' do not have bookmarks. Therefore, the column to be hidden would need to be a separate table. It's not an ideal solution for your scenario, but I thought I'd mention it as a possibility.

    Another option for OS is to add a JS library to the report that has the functionality you need. Here is a helpful post on adding 3rd party libraries. It focuses on HighCharts, but the same is true for the Interactive Viewer functionality like sorting and hiding:

    https://forums.opentext.com/forums/discussion/59678/any-possibility-of-using-highchart-driven-charts-with-birt

    Warning No formatter is installed for the format ipb
  • Hi Jeff ,
    Thanks for the replay,
    Hide_example.rptdesign : when I modify the text element i would only have the copy of report out put with credit column to add to text element therefore the click reload the same report with credit column, or did you mean to create a copy of report and delete credit column and take a copy of that page and add it to the text element as a second report ?

    Hide.rptdesign ; I am sorry but I am not sure if I understand this part, could you elaborate please?

    regards

  • jfranken
    edited August 12, 2019 #4

    @hatraatrin said:
    Hi Jeff ,
    Thanks for the replay,
    Hide_example.rptdesign : when I modify the text element i would only have the copy of report out put with credit column to add to text element therefore the click reload the same report with credit column, or did you mean to create a copy of report and delete credit column and take a copy of that page and add it to the text element as a second report ?

    Run the report without making any changes. Copy the URL from the browser address bar. Replace the text in the button code with the copied URL where indicated.

    _ Hide.rptdesign ; I am sorry but I am not sure if I understand this part, could you elaborate please?_

    Add a bookmark to a report element. In Hide.rptdesign, "myChart" was added to the chart as shown below:

    The bookmark automatically adds an ID to the chart element in the report document as shown below:

    The ID is used in the button code on the report to change the visibility property value of the chart's style. Here is a short tutorial:
    https://w3schools.com/jsref/prop_html_style.asp

    As I mentioned in my previous post, you want to hide a table column and table columns do not have a bookmark property. Therefore this technique might not be useful in this case. However, it is another way to hide elements on a button click so I thought I would share it. There might be a way to make it work for a table column by referencing parent or child nodes in the DOM.

    regards

    Warning No formatter is installed for the format ipb
  • Hey Jeff,
    not sure where am I missing ,
    so I have " Run the report without making any changes. Copy the URL from the browser address bar. Replace the text in the button code with the copied URL where indicated."
    but when I run the report and click the button, it will not change anything since i have copied the link without changes, should it not have to make the creditlimite column invisible ? or am I missing something. :)

    Hide.rptdesign, perfect worked fine, I was running on web viewer which doesn't seem to work, but when i tried it as HTML it worked fine
    regards

  • Clicking the button after pasting the URL should hide the last column in the table. Try adding an alert(url + param) to the button code prior to location.replace. It will display the new url in a popup window. It should be the same url you copied but it should have "&hide_credit=true" added to the end of the url.

    Warning No formatter is installed for the format ipb
  • jfranken
    edited August 30, 2019 #8

    Different versions of the product use different syntax for the URL. Looking at your URL, I believe you need to use a different URL. Try replacing the button code with the following:

    <button onclick="hide_c()">Hide Credit</button> 
    
    <script>
    
    function hide_c() {
    
    var rpt = "<insert report with path>";  
    // example: C:/Birt/workspaces/project1/myreports/hide_example.rptdesign
    // right click report and select Properties from the menu to see the path
    // replace back slashes (\) with forward slashes (/)
    
    var addr = "executereport.do?invokeSubmit=false&__executableName=";
    var addr2 = "&__masterpage=true&__locale=en_US&__timezone=PST&hide_credit=true"; 
    
    var url = addr + rpt + addr2;
    
    window.location.replace(url); 
    }
    
    </script>
    
    Warning No formatter is installed for the format ipb
  • Thanks Jeff worked fine,
    Regards