How to set focus of a layout upon clicking on a hyperlink ?

User Experience Knowledge Share
, ,
1

Paste below code in user work form .

Lets say we have 2 links write function as below

<script>

function Fun1() {

   var element = document.querySelector('.pass-1');

    if (element) {

      element.setAttribute('tabindex','0');

      element.focus();

}

}

 

 

  function Fun2() {

    var element = document.querySelector('.pass-2');

    if (element) {

      element.setAttribute('tabindex','0');

      element.focus();

    }

}

</script>

Now open section and go to hyperlink and add action ->run script ->give function name as Fun1.

Similarly on 2nd hyperlink as Fun2.

Now go to layouts which need focus to be set upon clicking hyperlink and open cell settings or layout settings in that layout and under presentation tab->Content css class add that word used in above code for query selector like Pass-1 etc. thats it save and test.

2

add a small JavaScript function in the user work form that finds the target layout by its CSS class, sets tabindex="0", and then calls focus() on it. For example, use document.querySelector() to select the layout class and focus it when the hyperlink is clicked. Then, on the hyperlink, configure an action to run that script function. In the target layout, add the same CSS class in the layout or cell presentation settings so the script can find it correctly. This makes the focus move to that layout as soon as the user clicks the link. Save the section and test the behavior