How to set up Google alerts/ feed in DronaHQ App
This is a help post for any one who wants to set up google alerts/ Rss feed into their 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 a google alerts and got my Rss feed link and you should have a link like below: Google Alert — nocode
Incase 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) Go to DronaHQ Studio and go to 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) Go to 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:
- Ensure data-store has all rows selected in its option
2. MAPKEYS is important here as it lets the tablegrid know what to expect in what column.
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 published at https://community.dronahq.com on May 9, 2021.
