Forum Stats

  • 3,814,405 Users
  • 2,258,870 Discussions
  • 7,892,699 Comments

Discussions

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

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.

Tagged:

Best Answer

«1

Answers

  • Richard Napier
    Richard Napier Member Posts: 399 Bronze Trophy
    edited Nov 8, 2021 1:47PM

    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
    ManjuBujendra Member Posts: 24 Green Ribbon

    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
    ManjuBujendra Member Posts: 24 Green Ribbon

    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
    Richard Napier Member Posts: 399 Bronze Trophy

    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
    Richard Napier Member Posts: 399 Bronze Trophy

    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

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

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

    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
    ManjuBujendra Member Posts: 24 Green Ribbon

    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
    Richard Napier Member Posts: 399 Bronze Trophy

    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
    ManjuBujendra Member Posts: 24 Green Ribbon

    Hi Richard,

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

  • Richard Napier
    Richard Napier Member Posts: 399 Bronze Trophy

    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
    ManjuBujendra Member Posts: 24 Green Ribbon

    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.