We Keep Coding

Tab order on prompt page

Using Cognos Analtyics 11.1.7IF9.
I have a user who, oddly enough, wants Cognos to make his workflow more efficient. (The nerve!) He thinks that if he can use the TAB button to navigate a prompt page, he'll be faster because he never needs to reach for the mouse.
To test this I created a simple report with a very simple prompt page using only textbox prompts. As I tab I notice it tabs to everything in the browser: browser tabs, the address bar, other objects in Cognos, ...even the labels (text items) I created for the prompts. Oh... and yes, at some point focus lands on a prompt control.
Within Cognos, I see that the tab order generally appears to be from the top down. (I haven't tried multiple columns of prompts in a table yet.) I must tab through the visual elements between the prompts. Also, while value prompts get focus, there is no visible indication of this.
Is there a way to set the tab order for the prompts on a prompt page?
Can I force it to skip the non-prompt elements?
Can the prompts be made to indicate that they have focus?
I tagged this question with javascript because I figure the answer will likely involve a Custom Control or a Page Module.
Of course, then I'll need to figure out how all this will work with cascading prompts and conditional blocks.
I found a similar post complaining about this being a problem in Cognos 8. The answer contains no detail. It just says to go to a non-existent web page.

I had the same frustration as your user and I made a solution a while back that could work for you. It's not the most elegant javascript and I get a weird error in the console but functionally it works so I haven't needed to fix it.
I created a custom control script that does 2 things on a prompt page.
First, it removes the ability to "select" text item elements on the page. If you only have text items and prompts on the page it sets it's "Tabindex" to "-1". This allows you to tab from one prompt field to the next without it selecting invisible elements or text elements between prompts.
Secondly, if you press "Enter" on the keyboard it automatically submits the form. I am pasting the code below which you can save as a .js and call it in a custom control on a prompt page. Set the UI Type to "None"
define( function() {
"use strict";
function AdvancedControl()
{
};
AdvancedControl.prototype.initialize = function( oControlHost, fnDoneInitializing )
{
function enterSubmit (e)
{
if(e.keyCode === 13)
{
try {oControlHost.finish();} catch {}
}
};
function setTab () {
let nL = [...document.querySelectorAll("[specname=textItem]")]
//console.log(nL)
nL.forEach((node) =>{
node.setAttribute('tabindex','-1')
})
};
setTab();
let exec_submit = document.addEventListener("keydown", enterSubmit, false);
try {exec_submit;} catch {}
fnDoneInitializing();
};
return AdvancedControl;
});

Ways to protect buttons from being pressed?

For example: In my Google Spreadsheets document there is a timer with a start and stop button. So far everything works. But if someone clicks on the 'stop' button by mistake although the timer is currently not running, it will causes issues and let the timer display a large and incorrect time. So I'm searching for methods to gray out the 'stop' button until 'start' was pressed. After, 'start' should be grayed out and 'stop' now available.
Has anybody ideas?
And then there's that I'm a total beginner in terms of scripting so the best bet would be if someone could help me out with the the script code.

Best method to prevent a script to run in parallel is to use the Lock Service.
When your button is pressed, you run a method that will acquire a lock and release it when finished. If you happen to click the button while previous task is still running, the lock acquire will fail and you can for example show an alert or just ignore the error.
function onButtonClick(){
const lock = LockService.getDocumentLock()
try{
lock.waitLock(1000)
// do some work
} catch(e){
if(e.message.indexOf('Lock')>=0){
SpreadsheetApp.getUi().alert(e.message)
}
} finally{
lock.releaseLock()
}
}

There is a method in Class Sheet call getDrawings() which returns all of the drawings on a sheet and that reveals the Class Drawing which has methods that allow you to reset the macro so you could set it to a dummy macro that doesn't do anything which should in effect disable the button.

Tracking multiple clicks on the same element

Looking for a way to track if an element has been clicked multiple times (for example, a user clicks "Submit" button several times to place an order).
We are doing some work redeveloping a website and in our UX research we found that people don't download PDFs from the site because the link behind the button is broken. We noticed that people tend to click the button several times before giving up, yet some still manage to download the PDF.
In order to show our changes to code have improved site performance and user experiences, we want to show that these "multiple clicks" have decreased.
Since the site uses Google Analytics, I have tried to create a variable in GTM that counts clicks on the same click element (which doesn't work):
function() {
var the_div = {{Click Element}};
var clickCount = 0;
return clickCount;
}
I expect the output to be a count of the times I've clicked on the Click Element (1, 2, 3, etc....)

Try like this.
Define a varable for count. and on each click increment it.
var i = 1;
$('#elem').on('click',function(){
console.log(i);
i++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elem">click here</div>

sorry for the delay in responding.
We found a solution.
As Piertstorff pointed out, the variable sets clickCount to zero every time it is called. The solution, was to build a custom HTML tag (that runs JS) - not a variable - that fires on a Page Load Trigger and listens for multiple clicks within a 2-second timeframe. The HTML tag then passes an event to the DataLayer and stored in a variable.
That variable (signalling multiple clicks occurred) activates a trigger for another tag that passes the {{Click Classes}} variable to GA

Use javascript variable with global scope
<script>
countClicks = 0;
function clickCountFunction() {
countClicks++;
}
</script>
Add onClick attribute in button and call clickCountFunction() in it

Attaching an event listener for left or right click - onclick doesn't work for right click

I am currently applying for an Internship Internship Link
One of the things that I noticed right away is that you click on upload cover letter or paste cover letter, you're redirected to the home page of the job invite site Job Invite and sadly you can't upload your cover letter. On the other hand, the upload resume works perfectly fine but paste resume has the same issue.
Does anyone know how to resolve this issue and and be able to submit a cover letter?
I am not a web guru but since I am applying for an engineering position, I am trying to find a way around this. I right clicked the upload cover letter link and inspected the link with the inspect element tool. I found that this function
onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')
was going to get called when the button is clicked. Now going into the JavaScript file for this html page, Inspect Element -> Sources -> *careers_8.js?v=303, I tried to do a basic alert statement, from alert dialog, to do some debugging to see what the issue is. Here's the code now
function jvAddAttachment2(id, companyId){
alert("I got here");
....
}
I then did control s and the Inspect Element console outputted "Recompilation and update succeeded." so I am assuming the JavaScript file has been updated. However when I click the link(via right click, open new window), no alert box shows up. Does anyone know how to get the alert dialog to show up? I think I've done as much as I can with my working knowledge from one web development course haha.

You're looking for the contextmenu event for right click:
element.addEventListener('contextmenu', function() {
// code here
});
Please don't use inline js, like onclick in your html. The above sample is the proper way to attach event listeners.
You should get your element reference in javascript with var myElem = document.getElementById('the-id') or some similar function like document.querySelector, etc.
Then, you can easily attach both events like this:
// left click
myElem.addEventListener('click', myFn);
// right click
myElem.addEventListener('contextmenu', myFn);
If you're adamant to do this with inline js, that would be:
<div onclick="myFn()" oncontextmenu="myFn()"></div>
Full demo of both approaches for ya:
var myElem = document.getElementById('my-element');
myElem.addEventListener('click', myClickFn);
myElem.addEventListener('contextmenu', myClickFn);
function myClickFn() {
console.log('this is myClickFn!');
}
function someFn() {
console.log('this is someFn!');
}
<div id="my-element" onclick="someFn()" oncontextmenu="someFn()">Left or Right click me!</div>
Also, since you're wanting to pass parameters to the function you'll be calling on click, it is good to use an intermediary function for the event, and have that function call the other function, passing the parameters, like this:
function myClickFn() { // this is called on click
myOtherFunction('some', 'params');
}
That prevents you having to repeat the same function call, passing those same parameters in both places.

Make sure to close your onclick string at the end with a ":
onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"
And left click instead of right clicking.

onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"
I think that double quotation was absent.
demo

How do I discover which function is called when I press a button?

I'm stuck modifying someone else's source code, and unfortunately it's very strongly NOT documented.
I'm trying to figure out which function is called when I press a button as part of an effort to trace the current bug to it's source, and I"m having no luck. From what I can tell, the function is dynamically added to the button after it's generated. As a result, there's no onlick="" for me to examine, and I can't find anything else in my debug panel that helps.
While I prefer Chrome, I'm more than willing to boot up in a different browser if I have to.

In Chrome, type the following in your URL bar after the page has been fully loaded (don't forget to change the button class):
var b = document.getElementsByClassName("ButtonClass"); alert(b[0].onclick);
or you can try (make the appropriate changes for the correct button id):
var b = document.getElementById("ButtonID"); alert(b.onclick);
This should alert the function name/code snippet in a message box.
After having the function name or the code snippet you just gotta perform a seach through the .js files for the snippet/function name.
Hope it helps!

Open page with your browser's JavaScript debugger open
Click "Break all" or equivalent
Click button you wish to investigate (may require some finesse if mouseovering page elements causes events to be fired. If timeouts or intervals occur in the page, they may get in the way, too.)

Inspect the buttons markup and look at its class / id. Use that class or id and search the JavaScript, it's quite likely that the previous developer has done something like
document.getElementById('someId').onclick = someFunction...;
or
document.getElementById('someId').addEventListener("click", doSomething, false);

You can add a trace variable to each function. Use console.log() to view the trace results.
Like so:
function blah(trace) {
console.log('blah called from: '+trace);
}
(to view the results, you have to open the developer console)