Set up Google Alerts/ Rss Feed in DronaHQ App

This is a help post for anyone who wants to set up Google Alerts/ Rss feed in DronaHQ app. My use case was – on my CRM I wanted to integrate google alerts on Low code right into the app. So here is what I did.

Step 1) Set up google alerts and got my RSS feed link and you should have a link like below: Google Alert – nocode
In case if you need help on [how to setup google alerts as Rss feed https://www.howtogeek.com/444549/how-to-create-an-rss-feed-from-a-google-alert/

Step 2) Goto DronaHQ Studio and goto connectors and add the url
Quick help to register API: How to register an API

Step 3) You need to add a custom function to parse XML and transform it into a format that will go well with your control. In my case I would use a simple table grid control which will have two columns a) news headlines b) urls

Here is the custom XML parser that I built for my use case:

                fmParser.setFunction("xmlRSSParser", function (args) {
                    return Promise.all(args).then(function (values) {
                               var txt = values[0];
                               console.log(typeof txt);
                               "firstElementChild" in txt? console.log("Yes exists"): console.log("No it doesnt");
                               parser = new DOMParser();
                               console.log(typeof txt.firstElementChild.outerHTML);
                    xmlDoc = parser.parseFromString(txt.firstElementChild.outerHTML, "text/xml");
                    var len = xmlDoc.getElementsByTagName("entry").length;
                    //console.log((xmlDoc.getElementsByTagName("entry")[1].getElementsByTagName("link")[0].innerHTML));
                     var regex = /(<([^>]+)>)/ig;
                    // down.innerHTML = str2.replace(regex, "");
                    var obj = [];
                    for(var i=0;i<len;i++)
                    {
                        //console.log((xmlDoc.getElementsByTagName("entry")[i].getElementsByTagName("link")[0].innerHTML));
                       // console.log((xmlDoc.getElementsByTagName("entry")[i].getElementsByTagName("title")[0].innerHTML));
                        obj.push({"title":xmlDoc.getElementsByTagName("entry")[i].getElementsByTagName("title")[0].innerHTML, "link": xmlDoc.getElementsByTagName("entry")[i].getElementsByTagName("link")[0].getAttribute("href")});
                       // console.log(JSON.stringify(obj));
                    }
                    return(JSON.stringify(obj));
      
                    });
                });

Now the above function helps us in creating an object with a JSON array of news items from the given XL feed.

Step 4) Goto your app and add a table grid and a data store

Step 5) Open screen open action: this is needed as we want to load the Rss feed on app open itself.

Step 6) add the connector call as 1st step in the action.

Step 7) Ensure to add a variable and map it to “output” to store the XML content for further use

Step 8) Now that we have the XML available as an output of the api call, all we need to do is pass the XML to the function to get the needed JSON object. So we use compute block and call the function we created and pass the xml feed as an argument to the function

Step 9) Now that we have the needed JSON object – lets set the data store with the transformed object using “set control value” block in action

Step 10) Now we have datastore with the needed data. All we have to do is use the value of datastore and bind it to the tablegrid control with a simple formula

Great – we are all set to have news from google alerts in our application

Hope you find this useful to add any Rss feed into your application!

Important Notes:

1.Ensure datastore has all rows selected in its option

3. On Tablegrid options → set up an action to open url and give an icon of your choice. In my case, I have set the icon on hover as I wanted my users to get to the news item in a single click.

Originally posted at- https://community.dronahq.com/