Digital Assistant and Mobile

Get Involved. Join the Conversation.

Topic

    Sharath Chandra Gavini
    Return data from a webview to the botAnswered
    Topic posted January 24, 2019 by Sharath Chandra GaviniBlue Ribbon: 750+ Points, tagged Bots 
    115 Views, 5 Comments
    Title:
    Return data from a webview to the bot
    Summary:
    How do I return the data from a webview to the invoking bot?
    Content:

    Hi Developers,


    I tried the "System.Webview" component but I am unable to understand how the variable can be sent back to the bot. 

    I see a URL to a connector sent to the webview server in the request body when the url is opened from the bot screen. Should I make any POST request to that URL to intimate bot that action is complete? If yes, what parameters should be sent? If no, can you please tell the way to implement this at the server side?

    I am really confused and stuck at this point.

    I even tried to analyse this by invoking an Instant app to see in the browser if the Instant App makes any POST request when the button to 'Return to the bot' is clicked but I ended up finding nothing but minified/encrypted parameters. 

    Thanks in advance.
    Regards, 
    Sharath Chandra.

    Best Comment

    Rohit Dhamija

    To pass the output value back to the bot, the webview can send a POST request to the bot's connector endpoint specified by the callbackUrl property.

    Can you please check the POST payload format. and share with me?

    Comment

     

    • Rohit Dhamija

      Hi Sharath,

      The source parameters and the callback URL are sent to the web app URL as a JSON payload in a POST request.

      The parameter "webview.onDone" will be automatically added to the request payload to pass on the callback URL property.  You need to use this URL to send back the value.

      Thanks,

      Rohit Dhamija

       

       

      • Sharath Chandra Gavini

        Thank you for the quick reply Mr. Rohit.
        What I really don't understand is sending back the value. Can I get to see a full code sample to get some more clarity on the topic please?
        Attaching my code here:
         

        app.post('/recharge', function (req, res) {
        console.log("Request: " + JSON.stringify(req.body))
        postURL = req.body.parameters[1].value;
        console.log("Post URL: " + postURL);
        res.json({
        'webview.url': 'https://311994bb.ngrok.io/recharge?number=7207571895'
        });
        console.log("Request in total: " + JSON.stringify(req, function (key, value) {
        if (typeof value === 'object' && value !== null) {
        if (cache.indexOf(value) !== -1) {
        // Duplicate reference found
        try {
        // If this value does not reference a parent it can be deduped
        return JSON.parse(JSON.stringify(value));
        } catch (error) {
        // discard key if value cannot be deduped
        return;
        }
        }
        // Store value in our collection
        cache.push(value);
        }
        return value;
        }));
         
        });

        I am making a post request to the above mentioned API which sends the actual webview link to the user. What else should I do when the web application request is served? The application hits another api, whose execution when finished should return the control to the bot (included here):

        app.post('/doRecharge', (req, res) => {
        console.log(JSON.stringify(req.body))
        data = { "rechargeData": "success" };
        client.post(postURL, args, (data, response) => {
        console.log("Response: " + JSON.stringify(response.body));
        res.json({
        'test': 'success'
        }).sendStatus(200);
        }); //need to send back the response to bot here
         
        })

         

        A full example or modification to my code is very much appreciated.
        Thanks.

    • Rohit Dhamija

      To pass the output value back to the bot, the webview can send a POST request to the bot's connector endpoint specified by the callbackUrl property.

      Can you please check the POST payload format. and share with me?

      • Sharath Chandra Gavini

        Thank you for the response Mr. Rohit. I could make a POST request successfully now. 

        I can see the data I am sending back in the Test console now. Thank you for your time. 

        The data I sent back is:

        {

        "amount": "120"

        }

         

        I could print the data using the free marker expression: rechargeData.amount.value 

    • Jorge Villalba

      Hi.

      Do you know if there are full examples in somewhere about webview?

      Thanks.