Interview moves to top of page when interview.saveData() is triggered

ManjuBujendra

Hi,

I have used interview.saveData() in a custom button action. Whenever a button is clicked, the interview moves to top of page and user has to scroll down again to the previous position.

Is there any way to avoid this behavior?

P.S interview.saveData() is must in my js to proceed with button click actions.

Richard Napier

Hi

You could try using the standard version of window.scrollTo() and set coordinates (https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) or use window.scrollBy() (https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy).

All of these have differing support in different browsers (particularly no support for Internet Explorer) so make sure you test it in a real browser not just the Debugger (Ctrl+Debug to open in another window).

See https://caniuse.com/?search=scrollTo

Richard Napier

Hi Manju

Are you using standard controls or custom Extensions for the user to enter data?

If you are using extensions, can you use (for example with the relevant id) in a mount key somewhere

if(some scenario){
document.getElementById("XXX").scrollIntoView();
}

If you know which id triggers the saveData().

In standard Intelligent Advisor, I do not think there is a way to change / activate a particular tab order.

If you do not want to provide extensions, you might add some simple links and anchors to allow the user to return to the correct position with only one click. Something like a label with

<a href="#city">

That you then use in a link at the top of the Screen.

Hope that helps, if not please do not hesitate to come back.

R

ManjuBujendra

Hi Richard,

We are using custom extensions and standard controls both. Here on clicking button, am setting some values to another attribute and saving the data using saveData() function. I dont think we can use document.getElementById("XXX") here.

Please find my code below. Am using saveData() after setInputValue. Could you please let me know what exactly I should do here?

let arr = [];

let postcode;

let postcodenew;

OraclePolicyAutomation.AddExtension({

   customInput: function (control, interview) {

      var addLovs = [];

      if (control.getProperty("findAddress") == "true") {

         let button;

         interview.getExtensionData();

         return {

            mount: function(el) {

               button = document.createElement("button");

            button.className = "find-button-class";

            button.setAttribute("title", "Find my address");

            button.innerHTML = "Find my address";

               button.onclick = function(evt){

               evt.preventDefault();

               //debugger;

               var text = interview.getValue("postcode").split(" ").join("");

                    var root = "https://api.publicsectormapping.gov.scot/osmao-stirl-c0009-bd562/os/abpri/address?addresstype=dpa&postcode=";

                   $.ajax({

                       type: "GET",

                       url: root + text,

                       method: "GET",

                       dataType: 'json'

                   }).then(function(data) {

                  var addLovs = []

                       for (var key in data.results[0].address) {

                           if (data.results[0].address.hasOwnProperty(key)) {

                        addLovs.push({

                                 text: data.results[0].address[key].summary_address,

                                 value: data.results[0].address[key].summary_address,

                                 uprn : data.results[0].address[key].uprn

                              });

                           }

                       }

                  arr = $.map(addLovs, function (el) {

                                             return el

                                        });

                              interview.setInputValue("showAddress",true);

                              interview.saveData();

                   })

            }

               el.appendChild(button);

           },

           update: function(el) {

         }

         }

      }

   }

});

ManjuBujendra

Hi Richard,

We used scrollIntoView() and its not working as expected. Could you please let us know if it is feasible to use scrollIntoView() in above code?

Thanks in advance

Richard Napier

Hello

what do you mean by “not working as expected?”

do you have a screenshot, an explanation of the behaviour, of what you are expecting.

Richard Napier

Here are three examples of solutions. In all of the below examples, I have inserted a very large image, to simulate having a very large amount of content. It makes the examples easier to see.

1) Using scrollIntoView

Obviously, as you have read in the documentation, scrollIntoview has constraints based on viewport size and document structure. Failing to take those into account will not produce anything

https://youtu.be/gXZSZR_MHYM

2) Using a simple link to provide a user a way to navigate back to the correct element.

https://youtu.be/pfV9f8DD36Q

3) The third example uses some jQuery to scroll to the required item.

https://youtu.be/MwOPzd0OZnc

You may also want to think about alternative navigation paradigms, such as the Progressive Reveal possible through a customVisibility extension. This is documented online https://documentation.custhelp.com/euf/assets/devdocs/unversioned/IntelligentAdvisor/en/Content/Guides/Developer_Guide/Web_Interviews/Styles_and_scripts/Extension_for_control_visibility.htm?Highlight=reveal and there is an article about it here https://intelligent-advisor.com/main/conversations-without-chat-in-oracle-intelligent-advisor/

ManjuBujendra

Hi Richard,

I used scrollTo() function in below script and getting " Uncaught TypeError: $(...).scrollTo is not a function" error.

And focus() is not doing any action.

let arr = [];

OraclePolicyAutomation.AddExtension({

   customInput: function (control, interview) {

      var addLovs = [];

      if (control.getProperty("findAddress") == "true") {

         let button;

         interview.getExtensionData();

         return {

            mount: function(el) {

               button = document.createElement("button");

            button.id = "xFindAddress";

            button.className = "find-button-class";

            button.setAttribute("title", "Find my address");

            button.innerHTML = "Find my address";

               button.onclick = function(evt){

               evt.preventDefault();

               //debugger;

               var text = interview.getValue("postcode").split(" ").join("");

                    var root = "https://api.publicsectormapping.gov.scot/osmao-stirl-c0009-bd562/os/abpri/address?addresstype=dpa&postcode=";

                   $.ajax({

                       type: "GET",

                       url: root + text,

                       method: "GET",

                       dataType: 'json'

                   }).then(function(data) {

                  var addLovs = []

                       for (var key in data.results[0].address) {

                           if (data.results[0].address.hasOwnProperty(key)) {

                        addLovs.push({

                                 text: data.results[0].address[key].summary_address,

                                 value: data.results[0].address[key].summary_address,

                                 uprn : data.results[0].address[key].uprn

                              });

                           }

                       }

                  arr = $.map(addLovs, function (el) {

                                             return el

                                        });

                              interview.setInputValue("showAddress",true);

                              interview.saveData();

                   })   

            }

               el.appendChild(button);

            console.log("Start scroll");

            $('xFindAddress').scrollTo();

            console.log("End scroll");

           },

           update: function(el) {

         }

         }

      }

   }

});

Richard Napier

In the example you give, a jQuery selector is used so make sure you add the # symbol to identify the selector type as an ID :

 $('#xFindAddress').scrollTo();

I assume you have jQuery library present in the resources folder? If not, that can be the source of the error since $ is the symbol for jQuery.

Regards

ManjuBujendra

Hi Richard,

Even after using $('#xFindAddress').scrollTo() its giving same error. I have all jquery library files in resources folder too

Richard Napier

Hi

Have you added the function declaration to the correct location in your file (outside the extension)?

$.fn.scrollTo = function (speed) {
  if (typeof(speed) === 'undefined')
    speed = 1000;

  $('html, body').animate({
    scrollTop: parseInt($(this).offset().top)
  }, speed);
};

ManjuBujendra

Hi Richard,

When there is no HTML element, how can we use scrollto Function?

In my current scenario, using onChange extension I am setting some values to different attributes and using saveData() function to use those values in another js. Here I dont have any HTML element, how can I avoid the screen from moving to top inside onChange extension?

Appreciate your support.