Search code examples
nativescriptangular2-nativescriptsurveyjs

Integrating Surveyjs with Nativescript + Angular


I am trying to merge surveyjs along with my NativeScript application. I have referred URL for merging the same with Angular application

From the Angular demo code given on website, we have to add event handler for Complete button where we can get the response from surveyjs. Is it possible to integrate similarly for Nativescript Mobile application? Here is the approach which i feel can be taken.

Display

  • Create a HTML as provided by SurveyJS with required CSS and JS referenced and add them as a file in project.

  • Modify HTML once i get the survey question json back from server.

  • Show the HTML as part of WebView. This will take care of displaying
    the survey on my Application.

Here are my challenges during Submission

  • As per the process given on SurveyJS, i need to add handler for oncomplete which will get the result json for me. How can i add handlers for Complete button click in my code? Also please note that there is a possibility that there may be multiple surveys on a single page.
  • Apart from Survey, there are other fields also on the page and user will submit them all in one go by clicking submit button of the page. Hence i am planning to hide Complete button provided by SurveyJS page. This needs to be triggered via code. Can this be done?

If someone can give directions on whether this scenario can be handled in nativescript application with Angular,it would help immensely.


Solution

  • yes it can be done using nativescript-webview-interface plugin.

    add jS code inside WebView to handle oncomplete event from surveyJS. and on that function call emit some event to native app. after that add nativescript code to listen for that event and get the JSON back.

    inside webView JS function

    var oWebViewInterface = window.nsWebViewInterface;
    // emit event to native app
    oWebViewInterface.emit('anyEvent', jsonData);
    

    inside native App

    oWebViewInterface.on('anyEvent', function(jsonData){
            // perform action on event
        });
    

    for more details on this you can check plugin readme file https://github.com/shripalsoni04/nativescript-webview-interface