In this blog I will show you how to create a cool Twitter widget for on your ServiceNow homepage.
I want the Twitter widget to save all the tweets into a custom table. This because the Twitter RSS feed API will only return the tweets from a few days in the past.
Also the Twitter widget needs to be maintainable from a preferences screen, therefore I will create some preferences in the System Properties (sys_properties)
The user must be able to fill in an search query for the tweets, the maximum results that must be showed in the widget and the maximum age of a tweet.
I will use the Google API to read out the RSS from Twitter.
We will walk through the following steps for this cool widget:
- Create a custom table
- Create the form and table fields
- Create the System preference variables
- Create a System property category for our preferences screen
- Create a Script Include that can parse XML records for our UI Page
- Create UI Script to load the Google API
- Create UI Page to build our HTML with the Twitter feeds
- Make a new widget for showing our Twitter Widget
- Place the widget on the homepage
Create custom table
Create a table with the label “Twitter Widget”, check “Create new application” with name “Twitter Widget” and create a new module in the new application, see picture above.
Navigate to the new created application, open the form view and edit the Form layout.
Create some field we need on the table
Add the following fields:
- Author (String 100)
- Tweet date (String 40)
- Tweet URL (String 1000)
- Search URL (String 1000)
- Tweet (String 1000)
Create the Twitter System preferences
I would like to save the following preferences for our widget into the system properties, so create the following preferences:
- twitter_widget.search_query (string)
- twitter_widget.max_results (integer default value: 20)
- twitter_widget.max_age_date (string)
Create a System Properties category
If we want to maintain our preferences we can group them in a category under System Properties.
In the System Property Category we can add some HTML content to give some extra information to the user, and off course we select the three properties we have created earlier.
Create the Twitter widget settings module
Create a new module under the Twitter Widget application with the following data:
- Title: Widget settings
- Link type: URL (from Arguments)
- Hint: Preferences for the Twitter Widget
- Arguments: /system_properties_ui.do?sysparm_title=Twitter%20Widget%20Settings&sysparm_category=Twitter%20widget
/system_properties_ui.do?sysparm_title=Your Title&sysparm_category=Category Name
Create Script Include “TwitterWidget”
Now let’s create our Script Include that will be callable from GlideAjax and will return XML with our Twitter feeds from our custom table
Create UI Script
We must create a global UI Script to load the Google API library. If we don’t do this our UI Page will not work on the homepage.
Create UI Page
We need to create a UI Page, this UI Page will generate our tweets for in the widget.
In the HTML I have add some CSS mark-up and the HTML div that will contain our Tweets.
In the Client Script I have created the logic that will retrieve the Twitter tweets with the Google API from the twitter website, after retrieving the tweets it will be pushed to the custom table with the GlideRecord function if not already exists.
After that the loadTweets() function will do a GlideAjax to the Script Include that will give us all the tweets we need from the table and parse the HTML for in the div.
Test the UI Page
Now let’s try the UI Page by clicking on the “Try it” button from the UI Page form
Create a widget for our homepage
Let’s create a widget in our instance
Fill in the following fields:
- Name: Twitter Widget
- Active: true
- Render type: Javascript
- Script:
[cc lang=”javascript”]
function sections() {
return {
‘Twitter feed’ : { ‘type’ : ‘TwitterWidget’ }
};
}
function render() {
var url = “/render_gadget_” + renderer.getPreferences().get(“type”)+”.do”;
return ‘‘;
}
function getEditLink() {
return “system_properties_ui.do?sysparm_title=Twitter%20Widget%20Settings&sysparm_category=Twitter%20widget”;
}
[/cc]
I am returning the UI Page in a HTML iframe. This was the only way to make it work in Chrome and Internet Explorer 7+
Add the cool widget to your Homepage
The result!
For some reason I can’t show the small pencil icon on the upper right of the box.
Maybe because I am using an iframe to display the UI Page in the widget.
Now you can play with the Widget settings module to get some tweets from Twitter.
Good luck!
Update set for this tutorial
You can download a zip file containing the Twitter Widget Update Set using the download button below.
[download id=”5″]
Please load and commit this update set to view the final product in your instance.
If you have any questions you can email me at [at]
May 10th, 2016 at 10:23
Hi,
I can’t download the update set, is it possible to send it to me by email?
Regards,
Morgane AUXERRE