Hi,

I am trying to hide URL when you hover over a drill down Link, and once the drill down or Multi drill down report is generated in the browser.

I found the below Java Script which does work as expected for drill down reports, but i am having troubles with Multi drill downs (DRILLDOWNMENUITEM) reports.

Fex:
SET JSURL=/approot/baseapp/changeatoform.js
TABLE FILE CAR
SUM
SALES
BY COUNTRY
HEADING
""
FOOTING
""
ON TABLE SET PAGE-NUM OFF
ON TABLE NOTOTAL
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
UNITS=IN, SQUEEZE=ON, ORIENTATION=PORTRAIT,$
TYPE=REPORT, GRID=OFF, FONT='ARIAL', SIZE=9,$
TYPE=DATA, COLUMN=N1, TARGET='_self', FOCEXEC=car_drillto(COUNTRY=N1),$
TYPE=TITLE, STYLE=BOLD,$
ENDSTYLE
END



The changeatoform.js


function changeAllA() {
var anchorList = document.getElementsByTagName("A");
for (var i = 0; i < anchorList.length; i++) {
if (anchorList[i].target == undefined) {
anchorList[i].setAttribute("href", "JavaScript:submitAasForm(\"" + anchorList[i].href + "\");");
} else {
anchorList[i].setAttribute("href", "JavaScript:submitAasForm(\"" + anchorList[i].href + "\",\"" + anchorList[i].target + "\");");
anchorList[i].setAttribute("target", "");
}
}
}

function submitAasForm(qs) {
// create the form
submit_form = document.createElement("FORM");
submit_form.setAttribute("id", "submit_form");
if (arguments.length > 1)
submit_form.target = arguments[1];
document.body.appendChild(submit_form);

// build the input (hidden) params
var qsValues = qs.split('?');
submit_form.setAttribute("action", qsValues[0]);
submit_form.setAttribute("method", "post");
var keyPairs = qsValues[1].split("&");
for (i=0; i if (keyPairs[i] != "") {
var keyValues = keyPairs[i].split("=");
var input = document.createElement("INPUT");
input.setAttribute("type", "hidden");
input.setAttribute("name", keyValues[0]);
input.setAttribute("value", keyValues[1]);
submit_form.appendChild(input);
}
}
submit_form.submit();
}

if (window.addEventListener) {
window.addEventListener('load', changeAllA, false);
} else if (window.attachEvent) {
window.attachEvent('onload', changeAllA);
} else {
alert("not supported");
}

Any ideas will help!!

thanks in advance

This message has been edited. Last edited by: FP Mod Chuck,

WebFOCUS 7.6, 7.7, 8.1.05
Windows, All Outputs

Well, first off, there is a syntax issue in your for loop in the submitAasForm function:

 for (i=0; i if (keyPairs[i] != "") 

What are you trying to do there?

Hi Hall,

sorry about the mistype in there.

function submitAasForm(qs)
{
// create the form
submit_form = document.createElement("FORM");
submit_form.setAttribute("id", "submit_form");
if (arguments.length > 1)
submit_form.target = arguments[1];
document.body.appendChild(submit_form);

// build the input (hidden) params
var qsValues = qs.split('?');
submit_form.setAttribute("action", qsValues[0]);
submit_form.setAttribute("method", "post");
var keyPairs = qsValues[1].split("&");
for (i=0; i < keyPairs.length; i++)
{
if (keyPairs[i] != "")
{
var keyValues = keyPairs[i].split("=");
var input = document.createElement("INPUT");
input.setAttribute("type", "hidden");
input.setAttribute("name", keyValues[0]);
input.setAttribute("value", keyValues[1]);
submit_form.appendChild(input);
}
}
submit_form.submit();
}

Thanks,

Gotcha. Thanks for the update.

I notice that using your code, you can still see the href when hovering over the link and you can still copy the link when right-clicking on it. The code below will actuall take each anchor element and convert it to a form so that you cannot see anything on hover or in the address bar after you click on the link.

  
-DEFAULTH &COUNTRY='_FOC_NULL';
-* GET THE IBFS PATH OF THIS FEX TO LOOP THE LINK BACK TO THIS FILE FOR THE EXAMPLE.
-SET &THISFEX=&IBFS_FILENAME.QUOTEDSTRING;
TABLE FILE CAR
SUM SALES
BY COUNTRY AS 'target="_self"'
BY COUNTRY AS 'target="_blank"'
BY CAR
BY MODEL
WHERE COUNTRY EQ &COUNTRY.QUOTEDSTRING;
ON TABLE SET PAGE-NUM OFF
ON TABLE NOTOTAL
ON TABLE PCHOLD FORMAT HTML
-* Turn off the generation of a css sheet so it will style in the html element
ON TABLE SET HTMLCSS OFF
ON TABLE SET STYLE *
UNITS=IN, SQUEEZE=ON, ORIENTATION=PORTRAIT,$
TYPE=REPORT, GRID=OFF, FONT='ARIAL', SIZE=9,$
-* Example to show opening in the same page
TYPE=DATA, COLUMN=N1, TARGET='_self', FOCEXEC=&THISFEX(COUNTRY=N1),$
-* Example to show opening in a new tab
TYPE=DATA, COLUMN=N2, TARGET='_blank', FOCEXEC=&THISFEX(COUNTRY=N2),$
TYPE=TITLE, STYLE=BOLD,$
ENDSTYLE
END

-HTMLFORM BEGIN NOEVAL
  <style>
    /* Styling to make the buttons look like links */
    .inline {
      display: inline;
    }
    .link-button {
      background: none;
      border: none;
      color: blue;
      text-decoration: underline;
      cursor: pointer;
      font-size: 1em;
      font-family: serif;
    }
    .link-button:focus {
      outline: none;
    }
    .link-button:active {
      color:red;
    }
  </style>
  <script>
    //wait for window to load
    window.onload = function () {
      //get all anchor elements
      const a = document.querySelectorAll('a'); 
      //loop through each anchor and convert to a form
      for (let i = 0; i < a.length; i++) {
        //get the value showing in the table cell of the anchor
        let aValue = a[i].innerHTML;   
        //get the path of the href for the form action
        let aPath = a[i].pathname;  
        //get all of the parameters within the href 
        let aParams = a[i].search.substring(1); 
        //get the target of the anchor if one was used
        let aTarget = a[i].target === undefined ? '' : 'target="' + a[i].target + '"';
        //start building the form in a variable
        let aForm = '<form id="link_' + i + '" method="post" action="' + aPath + '" ' + aTarget + ' class="inline">\n';
        //put each parameter name=value of the search string into any array [ name=value, name=value, ...]
        aParams = aParams.split('&'); 
        //split each value of the array into a sub-array [ [name,value], [name,value], ...]
        parameterArray = aParams.map(p => p.split('=')); 
        //build hidden input tags from each of the sub-arrays within the main array and add it to the form
        parameterArray.map( subarray => aForm += '<input type="hidden" name="' + subarray[0] + '" value="' + subarray[1] + '">\n');  
        //add the submit button to the form and add in the value to be displayed
        aForm += '<button type="submit" name="submit_param" value="submit_value" class="link-button">\n' + aValue + '\n</button>\n'  
        //close the form 
        aForm += '</form>\n'; 
        //take the entire anchor tag and replace it with the form 
        a[i].outerHTML = aForm; 
      }
    }
  </script>
-HTMLFORM END

As far as the multidrills are concerned, those are built dynamically using an IBI javascript file called ibimultidrill.js and would be difficult to manipulate.

It is possible to build your own multidrills though using javascript. But it is a bit complicated. I'll see if I can post an example.

This message has been edited. Last edited by: Hallway,

Hi Hall,

Thanks for your reply. The code you sent didnt work as expected, with or with out the HTMLFORM the report does the same. Am i missing something? Is there something which was missed?

thanks,

Hmmm... Are you using a modern browser? Or IE? And if you are stuck using IE (shudders), what version of IE?

We are in IE11, and yes we are using IE as our main browser

Sorry. I'm so content "flying first class" using a modern browser, that I forget that some people would rather still use a "horse and buggy." Let me see if I can dumb it down for IE.

Okay, I removed the ES6 arrow functions and replaced them with regular functions. I also added in the decodeURIComponent() function when reading the path and search string of the href bacause IE wanted to re-encode the percent symbols. So I had to decode it first so IE could re-encode it.

I replace the code between the script tags with the code below, and ran it in IE11 and it worked for me. See if it will work for you.

 
//wait for window to load
    window.onload = function () {
      //get all anchor elements
      const a = document.querySelectorAll('a'); 
      //loop through each anchor and convert to a form
      for (let i = 0; i < a.length; i++) {
        //get the value showing in the table cell of the anchor
        let aValue = a[i].innerHTML;   
        //get the path of the href for the form action
        let aPath = decodeURIComponent(a[i].pathname); 
        //get all of the parameters within the href 
        let aParams = decodeURIComponent(a[i].search.substring(1)); 
        //get the target of the anchor if one was used
        let aTarget = a[i].target === undefined ? '' : 'target="' + a[i].target + '"';
        //start building the form in a variable
        let aForm = '<form id="link_' + i + '" method="post" action="' + aPath + '" ' + aTarget + ' style="display:inline;">\n';
        //put each parameter name=value of the search string into any array [ name=value, name=value, ...]
        aParams = aParams.split('&'); 
        //split each value of the array into a sub-array [ [name,value], [name,value], ...]
        parameterArray = aParams.map( function(p) {return p.split('='); });
        //build hidden input tags from each of the sub-arrays within the main array and add it to the form
        parameterArray.map( function(subarray) {
          aForm += '<input type="hidden" name="' + subarray[0] + '" value="' + subarray[1] + '">\n'; 
        });  
        //add the submit button to the form and add in the value to be displayed
        aForm += '<button type="submit" name="TRGT" value="' + a[i].target + '" class="link-button">\n' + aValue + '\n</button>\n'  
        //close the form 
        aForm += '</form>\n'; 
        //take the entire anchor tag and replace it with the form 
        a[i].outerHTML = aForm; 
      }
    }
 

Thanks so much for replying, I still have issues running the code, the const variables is also not working, and there are issues with 'let' too.

thanks,

quote:

Originally posted by kishore:
Thanks so much for replying, I still have issues running the code, the const variables is also not working, and there are issues with 'let' too.

thanks,

*sigh* Try changing both of those to var then

 
//wait for window to load
    window.onload = function () {
      //get all anchor elements
      var a = document.querySelectorAll('a'); 
      //loop through each anchor and convert to a form
      for (var i = 0; i < a.length; i++) {
        //get the value showing in the table cell of the anchor
        var aValue = a[i].innerHTML;   
        //get the path of the href for the form action
        var aPath = decodeURIComponent(a[i].pathname); 
        //get all of the parameters within the href 
        var aParams = decodeURIComponent(a[i].search.substring(1)); 
        //get the target of the anchor if one was used
        var aTarget = a[i].target === undefined ? '' : 'target="' + a[i].target + '"';
        //start building the form in a variable
        var aForm = '<form id="link_' + i + '" method="post" action="' + aPath + '" ' + aTarget + ' style="display:inline;">\n';
        //put each parameter name=value of the search string into any array [ name=value, name=value, ...]
        aParams = aParams.split('&'); 
        //split each value of the array into a sub-array [ [name,value], [name,value], ...]
        parameterArray = aParams.map( function(p) {return p.split('='); });
        //build hidden input tags from each of the sub-arrays within the main array and add it to the form
        parameterArray.map( function(subarray) {
          aForm += '<input type="hidden" name="' + subarray[0] + '" value="' + subarray[1] + '">\n'; 
        });  
        //add the submit button to the form and add in the value to be displayed
        aForm += '<button type="submit" name="TRGT" value="' + a[i].target + '" class="link-button">\n' + aValue + '\n</button>\n'  
        //close the form 
        aForm += '</form>\n'; 
        //take the entire anchor tag and replace it with the form 
        a[i].outerHTML = aForm; 
      }
    }
 

Hi Hall,

Thanks for replying, there are few others which arent working. i replaced 'document.querySelectorAll' with 'document.getElementsByTagName'. But the map() is also not working. Do you think i can use someother function instead of map()?

Thanks,

Weird. Array.map() is part of the ES5 spec that was released 10 years ago and has had support in IE since 2011 when IE9 was released. https://www.caniuse.com/#feat=es5

And querySelector/querySelectorAll has support in IE since IE8 was released in 2009 https://www.caniuse.com/#feat=queryselector

Are you sure that you're using IE11? If so, are you running in compatibility mode back to a older version of IE less than IE8? 😱 😖


Instead of using Array.map() you would have to build a for loop to loop through the array.

For what it's worth...

I really would suggest that if you want modern browser features (including a big one: browser security), that you look into updating your browser to a modern browser. If you still need to use IE for compatibility reasons, I would really suggest looking into the new Edge browser that is built on Chromium. It has an Internet Explorer mode that gives you the security, performance, features and compatibility with the modern web you want, all without impacting access to mission-critical legacy sites. https://www.microsoftedgeinsider.com/en-us/enterprise

Hi Hall,

Thanks so much for replying.

You are correct, as i looked in to deeper, we are running all of our reporting systems in compatibility mode. The code works if it is not under compatibility mode. This looks good. Thanks for this.
If you by happen have the code for Multi drilldowns that would help alot. Our reporting systems have both Multi Drill and single Drill downs in the same report and this code will break the multi drill.

Thanks so much,