getting the most out of opensocial gadgets
TRANSCRIPT
Getting the most out of OpenSocial gadgets
2
Mark HalvorsonDirector of Interactive Marketing, AtlassianBoard Member, OpenSocial [email protected], @halv0112
Agenda
3
• What it is a Gadget
• Why Atlassian chose OpenSocial
• Why you should too!
What is OpenSocial?
4
Social Data Model
5
Web Service APIs
6
Gadgets
7
8
Our Problem
Before
• Enterprise Apps are Silos
9
FishEye Source Code
JIRA Issues & Tasks
Confluence Wiki
Emphasize Teams, Projects & Tasks over Tools
10
11
Too Many Dashboards
Cross-Product Sharing
12
Integration with non-Atlassian apps
13
14
Solution: OpenSocial Gadgets
Gadgets are a Great Solution for Dashboards
15
After
• Open standard for enterprise application connection
16
view complete projectsingle activity streamcomment & interact
Managers Do Email
• Not just about portals, or internal applications.
17
view activity & statuscreate issues
18
Why Write Gadgets?
• They’re easy!
• They use stable, widely accessible and understood technologies
• Write once, display in multiple containers
19
20
The Hello World Example
Anatomy of a Gadget
• XML Spec File
•Metadata, HTML Content, and JavaScript
• Core JavaScript API
•Access Preferences, Make Requests
• Gadget Features
•Additional, Optional Capabilities & APIs
21
22
XML Spec File
23
<ModulePrefs>
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="JIRA Issues" author="Atlassian" thumbnail="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira-issues-thumbnail.png" description="A list of recently created Issues">
<Require feature="minimessage" /> <Require feature="dynamic-height" />
</ModulePrefs>
24
<UserPref>
<UserPref name="show_date" display_name="Show Dates?" datatype="bool" default_value="true"/> <UserPref name="show_summ" display_name="Show Summaries?" datatype="bool" default_value="true"/> <UserPref name="num_entries" display_name="Number of Entries:" default_value="5" required="true"/>
25
<Content>
<Content type="html"><![CDATA[ <link rel="stylesheet" href="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira-issues.css">
<div id="content_div"></div>
<script type="text/javascript" src="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira-issues.js"></script> ]]></Content></Module>
26
Views - DEFAULT view
27
Views - DEFAULT view
28
Views - CANVAS view
29
Views - DEFAULT view (Gmail)
Views - CANVAS view (Gmail)
30
Inline Contextual Gadget
31
+
32
Views - Custom view
Wallboards
• Gadgets go beyond the JIRA Dashboard onto your wall!
33
Wallboard – Default View
34
Wallboard – Wallboard View
35
36
JavaScript
// Create minimessage factoryvar msg = new gadgets.MiniMessage();// Show a small loading message to the uservar loadMessage = msg.createStaticMessage("loading...");
// Get configured user prefsvar prefs = new gadgets.Prefs();var showDate = prefs.getBool("show_date");var showSummary = prefs.getBool("show_summ");var numEntries = prefs.getInt("num_entries");
// Fetch issues when the gadget loadsgadgets.util.registerOnLoadHandler(fetchIssues);
Requesting Data from Web Services
• AJAX + DOM
• OAuth
• Request Proxy
37
38
gadgets.io.makeRequest()
Requesting Data from Web Services
What Can You Call?
• Any URL
• XML and JSON are the most useful
39
40
Fetching Issues
function fetchIssues() { var url = "http://jira.atlassian.com/sr/" + "jira.issueviews:searchrequest-xml" + "/temp/SearchRequest.xml?" + "created%3Aprevious=-1w&resolution=-1" + "&sorter/field=issuekey&sorter/order=DESC" + "&sorter/field=created&sorter/order=DESC" + "&tempMax=20";
var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
gadgets.io.makeRequest(url, handleResponse, params);}
41
Handling the Response
function handleResponse(obj) { var domData = obj.data;
var jiraIssues = { title : getTitle(domData), items : getItems(domData) }; renderJiraIssues(jiraIssues);
msg.dismissMessage(loadMessage); gadgets.window.adjustHeight();}
Summary - Why write gadgets?• Easy!
•Simple web based technologies mean anyone can write a gadget.
• Reusable!
•Use in any OpenSocial Container. iGoogle, Gmail, JIVE, more every day.
• Fun!
•Thinking about applications as atomic units of work add a new dimension to application design.
42
#summit11
Building #opensocial gadgets is the easiest way to integrate external content into JIRA & Confluence. Join the #openapprevolution !
43
Questions?
Mark [email protected]: @halv0112