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

I think it’s very cool that you can easily create a System property category with one or more System Properties and can create an link to a default UI Page with your category. And the result is a nice edit form.
/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 ‘