Getting the most out of OpenSocial gadgets

2

Mark HalvorsonDirector of Interactive Marketing, AtlassianBoard Member, OpenSocial Foundationmhalvorson@atlassian.com, @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 Halvorsonmhalvorson@atlassian.comTwitter: @halv0112