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;
});

How to handle Unsaved Changes in LWC component?

I am trying to implement unsaved changes functionality in the LWC component. Tried various approaches including using javascript & jquery and tried to fire it onbeforeunload but things don't seem to work. The same works on the HTML page but not as expected in LWC.
I tried using the below code in a util class:
const handleUnsavedChangesValidation = (hasModifiedData, updateClicked) => {
console.log('>>>:::INN::hasModifiedData::', hasModifiedData);
console.log('>>>:::INN::updateClicked::', updateClicked);
var modified = hasModifiedData && !updateClicked ? true : false;
if(modified) {
addEventListener("beforeunload", (evt) => {
const unsaved_changes_warning = "Changes you made may not be saved.";
evt.returnValue = unsaved_changes_warning;
return unsaved_changes_warning;
});
}
else
{
removeEventListener("beforeunload", () => {
return true;
});
}
}
On any changes to the input field I tried calling the following method with these params :
handleUnsavedChangesValidation(true, false)
On save button click I tried calling this
handleUnsavedChangesValidation(true, true);
On trying the above, it works partially fine:
On load -> alert is not displayed (as expected)
On input updates -> If refresh is pressed (alert displays - expected)
On input updates -> If the tab is clicked is pressed (alert displays - expected)
On input updates -> If browser back button is clicked (it fails to display alert)
On input updates -> If update button is clicked (it still displays alert stating unsaved changes and then on click of Ok it saves. This is also not expected. Alert should not display here)
Post save -> On page refresh -> Now alert displays which is also not expected.
Once again if I click refresh it does not display an alert.
I am looped and tried finding many ways to handle this via static resource and other ways but could not do anything here. Tried to pass blank to the return value of unload yet no result. Tried passing return true as well as return false. Yet it seems to display an alert when we click on save.
Anyone knows any alternative or can someone please help me out here. I am looking for a solution that works for LWC implementation and not just html javascript.
Please help geeks. Any help is highly appreciated.
Thanks in advance, stay safe.
Regards,
Rajesh

Setting document.activeElement.value shows value on screen but fails to accept

There is this web page: https://www.comed.com/Pages/default.aspx
with a "Sign In" button in the top right corner. I am displaying this page from a UWP app (this is actually a JavaScript question) in a WebView control, and run a dynamic JavaScript script on this page (via a call to InvokeScriptAsync()) to automatically insert the login or password in the currently selected field. The script that runs is simply this:
document.activeElement.value='" + value + #"';
This works in the sense that the login or password shows correctly on the screen BUT when I click on the "Sign In" button the page is telling me "Username (Email Address) is required." and "Password is required.".
If instead I manually type in the SAME value (or use copy/paste) then I get no errors!
I get the same type of error on the MS Channel 9 login page, but most other login web pages do NOT have that issue.

Use this code $(document.activeElement).trigger('change') after setting the value.

In addition to the above answer, and to support different web pages, I ended up using some Javascript from Correct Way to Programatically Trigger Change Event of ASP.net CascadingDropDown using JavaScript:
if ("createEvent" in document)
{
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
document.activeElement.dispatchEvent(evt);
}
else
{
document.activeElement.fireEvent("onchange");
}

Server side alert disturbs page styling

I needed to show a message on web page. I'm using ASP.Net and C#. I added below code in the back-end code to show message to the user
protected void btnRenew_Click(object sender, ImageClickEventArgs e)
{
//other code removed for clarity on where and how this alert is triggered
if (newExpiryDate.Date == memberDetails.ExpiryDate.Date)
{
Response.Write("<script>alert('Invalid renewal date');</script>");
}
}
This works fine as expected on the event call. But, the moment I click OK button on the alert message, the font-size of the text increases. It looks like somehow this alert message is disturbing my styles on the page.
Does anyone know a safe method to display alert from ASP.Net code behind page?

It is hard to tell what is causing the font shift based on what you posted, but your design can be vastly improved by 1. not making a server call just to validate a date, and 2. not using alert() which locks the whole browser until someone clicks "ok".
You could change your approach to set a few variables in javascript on page load, and then trigger a function on say change of your input or even on button click. your check function could look something like this
_memberExpiryDate = new Date('#memberDetails.ExpiryDate.Date'); // or whatever the notation is to write out server variable here
function validate() {
if (new Date($('#myDateInput').value()) >= _memberExpiryDate.getTime()))
$('#invalidDateLabel').show();
}
this way you're not making unnecessary postbacks, validation can autocorrect as users adjust dates, and there are no alerts in your face.
you can also use a library such as Toastr to show a more graceful message which disappears after a few seconds. but ideally you want to show something right next to the input field like asp.net date validator even
toastr.error('date is expired');
Also you could just use the asp.net range Validator.

See if
<script>setTimeout(function(){alert('Invalid renewal date');},1000);</script>
fixes your issue
Using ClientRegisterScriptBlock
protected void btnRenew_Click(object sender, ImageClickEventArgs e)
{
//other code removed for clarity on where and how this alert is triggered
if (newExpiryDate.Date == memberDetails.ExpiryDate.Date)
{
ClientScript.RegisterClientScriptBlock
("".GetType(), "s", "<script>alert('Invalid renewal date');</script>");
}
}
This renders the script in the HEAD section

placing focus on input box in IE

I have the following situation in a web application I am working on:
I have a form with a set of index field values that a user enters information into and then submits the form to the server. Field validation takes place on the server. If any field is found to be invalid, the form is redisplayed and I want to the input focus to automatically go to the first invalid field. I have the code in place to make it happen but the problem is that the focus is not being placed on the field in IE 10 (yet it is being placed in Firefox).
placefocusonfirstinvalidindexfield();
// After an attempt to upload has failed due to one or more invalid fields, then place the input focus automatically on the first
// invalid field:
function placefocusonfirstinvalidindexfield() {
var hasattemptedupload = '#Model.HasAttemptedUpLoadNumeric';
if (hasattemptedupload == 1) {
var indexfirstinvalidfield = '#Model.GetIndexOfFirstInvalidField()';
// focusIndexField(indexfirstinvalidfield);
setTimeout(focusIndexField(indexfirstinvalidfield), 100);
}
}
function focusIndexField(fieldindex) {
var control = document.getElementById("field" + fieldindex);
control.focus();
}
In the code above, I have confirmed that the correct field is being referenced. Everything appears to be as it should, except at the end of process, IE10 does not place the focus on the referenced field. Why not and what would I have to do to make that happen?

Just attempted this in the console to test in IE. The following code worked fine when testing focus on the "Post your answer" text area on this page.
setTimeout(function() { document.getElementById("wmd-input").focus() }, 5000);
Maybe there is something else in your code interfering with the focus? Have you tried extending the timeout value to see if it has something to do with that?

You are trying to haxx around the DOM loading with this row right?
setTimeout(focusIndexField(indexfirstinvalidfield), 100);
That row doesn't work as you expect. The focusIndexField is executed instantly and the response of the function is delayed 100 ms by the setTimeout function.
This would work as you expect:
setTimeout(function() {focusIndexField(indexfirstinvalidfield)}, 100);
However, it's not a good solution. The code should be executed when the document is ready instead.