The document discusses how remote apps allow developers to integrate third party applications into Atlassian's OnDemand service. Remote apps use a simple descriptor file to register the app and define things like permissions, pages, and macros. This avoids the complexity of developing plugins and allows apps to be built using any programming language. Examples are provided of how to create a Lucidchart diagramming app using remote apps.

2. Plugins on OnDemand with
Remote Apps
Don Brown
Architect, Atlassian

3. Five years ago. . .

4. And now. . .
• Over 12k active, 9k paid OnDemand accounts
• 5 out of 10 add Greenhopper
• 1.5 out of 10 add Bonfire
• 1 out of 10 add Team Calendars
. . . Instances

5. The Fine Print

6. But isn‟t it just a copy?

7. Plugin Problems: Security
<% String eid = request.getParameter("eid"); %>
...
Employee ID: <%= eid %>

8. Plugin Problems: Performance
java.lang.OutOfMemoryError: Java heap space
at org.apache.xerces.dom.DeferredDocumentImpl.createChunk(Unknown Source)
at org.apache.xerces.dom.DeferredDocumentImpl.ensureCapacity(Unknown Source)
at org.apache.xerces.dom.DeferredDocumentImpl.createNode(Unknown Source)
at org.apache.xerces.dom.DeferredDocumentImpl.createDeferredEntityReference(Unknown Source)
at org.apache.xerces.parsers.AbstractDOMParser.startGeneralEntity(Unknown Source)
at org.apache.xerces.impl.dtd.XMLDTDValidator.startGeneralEntity(Unknown Source)
at org.apache.xerces.impl.XMLDocumentFragmentScannerImpl.startEntity(Unknown Source)
at org.apache.xerces.impl.XMLDocumentScannerImpl.startEntity(Unknown Source)
at org.apache.xerces.impl.XMLEntityManager.startEntity(Unknown Source)
at org.apache.xerces.impl.XMLEntityManager.startEntity(Unknown Source

9. Plugin Problems: Upgrades

10. Product Dev
QA
Everyone‟s Angry
Admins
Plugin Dev

11. Introducing Remote Apps

12. This is a Remote App key: app1
name: Remote App - app1
version: 1
• A single descriptor file display-url: http://example.com
description: This app
vendor:
• Can be in XML, YAML, or JSON name: Atlassian
url: http://atlassian.com
• Contains
permissions:
permission:
• App metadata - scope: browse_projects
• Permissions general-page:
- key: first
• Extension points name: First
url: /first

13. Examples: General Page
Plugin Steps Remote App Steps
1. Add web-item config 1. Add general-page config
2. Add servlet config 2. Implement URL
3. Code servlet
4. Try to get output decorated

14. Examples: React to Event
Plugin Steps Remote App Steps
1. Add component config 1. Add web-hook config
2. Dig through code to find 2. Implement URL
event to listen for
3. Register for events
4. Handle event
5. Make sure to unregister

15. Examples: Custom Macro Editor
Plugin Steps Remote App Steps
1. Add web-resource and rest 1. Add custom-macro-editor
config config
2. Find and call JavaScript 2. Implement URL
API to override edit button
3. Create AUI dialog
4. Implement REST
resources

16. Shipping….Now.

17. Apps: Dropbox by AppFusions
• Share your documents
• Written in Java, deployed
at Contegix
• Provides a custom page
macro, and macro editor
with MS Office edit

20. Apps: TFS4JIRA by Spartez
• Integrate JIRA with your
Team Foundation Server
• Written in Java, deployed
at Heroku
• Uses project and issue
tabs, and an admin page

22. Apps: Lucidchart by . . .

23. Steps to create Lucidchart app
• Establish Trust
• Register App
• Implement General Page
• Implement macro

24. Establish Trust

25. Steps to create Lucidchart app
• Establish Trust
• Register App
• Implement General Page
• Implement macro

26. Register the app
• Receive from OnDemand as Request params:
• OAuth consumer key
• OAuth RSA public key
• Base URL

27. Register the app
• Return to OnDemand description of the remote app
• Can be in XML, JSON or YAML

28. Provide OAuth consumer key and
RSA public key
<remote-app key=“xxxxxxx"
name="Lucidchart"
version="1"
icon-url="http://www.lucidchart.com/favicon.ico"
display-url="https://www.lucidchart.com/ondemand">
<vendor name="Lucidchart" url="http://www.lucidchart.com" />
<description>Lucidchart example</description>
<oauth …>
<public-key>yyyyyy</public-key>
</oauth>
...

29. Request permissions
...
<permissions>
<permission scope="read_users_and_groups" />
<permission scope="read_content" />
<permission scope="modify_attachments" />
<permission scope="modify_content" />
</permissions>
...

30. General Page
...
<general-page
section="system.content.add/space"
key="lucidAppGeneral"
link-name="Lucidchart Diagram"
name="Select or create a diagram"
url="/doclist"
width="1200"
height="800"
icon-url="/icon">
<description>Insert or Create a Lucidchart Diagram</description>
<context-param name="page_id" />
</general-page>
...

31. General Page
...
<general-page
section="system.content.add/space"
key="lucidAppGeneral"
link-name="Lucidchart Diagram"
name="Select or create a diagram"
url="/doclist"
width="1200"
height="800"
icon-url="/icon">
<description>Insert or Create a Lucidchart Diagram</description>
<context-param name="page_id" />
</general-page>
...

32. General Page
...
<general-page
section="system.content.add/space"
key="lucidAppGeneral"
link-name="Lucidchart Diagram"
name="Select or create a diagram"
url="/doclist"
width="1200"
height="800"
icon-url="/icon">
<description>Insert or Create a Lucidchart Diagram</description>
<context-param name="page_id" />
</general-page>
...

33. General Page
...
<general-page
section="system.content.add/space"
key="lucidAppGeneral"
link-name="Lucidchart Diagram"
name="Select or create a diagram"
url="/doclist"
width="1200"
height="800"
icon-url="/icon">
<description>Insert or Create a Lucidchart Diagram</description>
<context-param name="page_id" />
</general-page>
...

34. Macro
...
<macro key="lucidchart" url="/macro" output-type="block" body-type="none">
<description>Create a Lucidchart Diagram</description>
<category name="development" />
<image-placeholder url="/imagePlaceHolder" width="140" height="140" apply-
chrome="true"/>
<parameters>
<parameter name="width" title="Width" type="string" default=“700"/>
<parameter name="height" title="Height (if blank, image ratio is
preserved)" type="string" />
<parameter name="align" type="enum" default="Left">
<value name="Left"/>
<value name="Right" />
</parameter>
</parameters>
</macro>

35. Macro
...
<macro key="lucidchart" url="/macro" output-type="block" body-type="none">
<description>Create a Lucidchart Diagram</description>
<category name="development" />
<image-placeholder url="/imagePlaceHolder" width="140" height="140" apply-
chrome="true"/>
<parameters>
<parameter name="width" title="Width" type="string" default=“700"/>
<parameter name="height" title="Height (if blank, image ratio is
preserved)" type="string" />
<parameter name="align" type="enum" default="Left">
<value name="Left"/>
<value name="Right" />
</parameter>
</parameters>
</macro>

36. Macro
...
<macro key="lucidchart" url="/macro" output-type="block" body-type="none">
<description>Create a Lucidchart Diagram</description>
<category name="development" />
<image-placeholder url="/imagePlaceHolder" width="140" height="140"
apply-chrome="true"/>
<parameters>
<parameter name="width" title="Width" type="string" default=“700"/>
<parameter name="height" title="Height (if blank, image ratio is
preserved)" type="string" />
<parameter name="align" type="enum" default="Left">
<value name="Left"/>
<value name="Right" />
</parameter>
</parameters>
</macro>

37. Macro
...
<macro key="lucidchart" url="/macro" output-type="block" body-type="none">
<description>Create a Lucidchart Diagram</description>
<category name="development" />
<image-placeholder url="/imagePlaceHolder" width="140" height="140"/>
<parameters>
<parameter name="width" title="Width" type="string"
default=“700"/>
<parameter name="height" title="Height" type="string" />
<parameter name="align" type="enum" default="Left">
<value name="Left"/>
<value name="Right" />
</parameter>
</parameters>
</macro>

38. Steps to create Lucidchart app
• Establish Trust
• Register App
• Implement General Page
• Implement macro

39. Any language can be used
• Lucidchart is using PHP

40. Add Diagram (general page)
function doclist() {
if (!$this->_hasValidOAuthSignature()) {
$this->set("oauthValid", false);
return;
}
$userId = @$_REQUEST['user_id'];
$pageId = @$_REQUEST['page_id'];
$redirectURL = "https://" . $_SERVER['SERVER_NAME'] .
'/ondemand/attachDocument?page_id=' . $pageId . "&user_id=" . $userId;
$this->layout = „ondemand';
$this->set("baseUrl", $this->_getBaseURL());
$this->set("callback", urlencode($redirectURL));
}

41. Add Diagram (general page)
function doclist() {
if (!$this->_hasValidOAuthSignature()) {
$this->set("oauthValid", false);
return;
}
$userId = @$_REQUEST['user_id'];
$pageId = @$_REQUEST['page_id'];
$redirectURL = "https://" . $_SERVER['SERVER_NAME'] .
'/ondemand/attachDocument?page_id=' . $pageId . "&user_id=" . $userId;
$this->layout = „ondemand';
$this->set("baseUrl", $this->_getBaseURL());
$this->set("callback", urlencode($redirectURL));
}

42. Add Diagram (general page)
function doclist() {
if (!$this->_hasValidOAuthSignature()) {
$this->set("oauthValid", false);
return;
}
$userId = @$_REQUEST['user_id'];
$pageId = @$_REQUEST['page_id'];
$redirectURL = "https://" . $_SERVER['SERVER_NAME'] .
'/ondemand/attachDocument?page_id=' . $pageId . "&user_id=" . $userId;
$this->layout = „ondemand';
$this->set("baseUrl", $this->_getBaseURL());
$this->set("callback", urlencode($redirectURL));
}

43. Add Diagram (general page)
function doclist() {
if (!$this->_hasValidOAuthSignature()) {
$this->set("oauthValid", false);
return;
}
$userId = @$_REQUEST['user_id'];
$pageId = @$_REQUEST['page_id'];
$redirectURL = "https://" . $_SERVER['SERVER_NAME'] .
'/ondemand/attachDocument?page_id=' . $pageId . "&user_id=" . $userId;
$this->layout = „ondemand';
$this->set("baseUrl", $this->_getBaseURL());
$this->set("callback", urlencode($redirectURL));
}

44. Make API calls to attach diagram
function attachDocument() {
...
$fullUrl = $baseURL . "/rpc/xmlrpc?user_id=" . $userId;
$auth_header = $this->_getAuthHeader($fullUrl);
xmlrpc_set_type($imageBytes, "base64");
$attachmentMetaData = array("fileName"=>$attachmentName,
"contentType"=>"image/png",
"comment"=>"Imported from Lucidchart (do not deleted)");
$addAttachmentBody= xmlrpc_encode_request(
"confluence2.addAttachment",
array("", $pageId, $attachmentMetaData ,$imageBytes));
$this->_sendXMLRPCRequest($fullUrl, array(
"Content-Type: text/xml",
$auth_header),
$addAttachmentBody);
...
}

45. Make API calls to attach diagram
function attachDocument() {
...
$fullUrl = $baseURL . "/rpc/xmlrpc?user_id=" . $userId;
$auth_header = $this->_getAuthHeader($fullUrl);
xmlrpc_set_type($imageBytes, "base64");
$attachmentMetaData = array("fileName"=>$attachmentName,
"contentType"=>"image/png",
"comment"=>"Imported from Lucidchart (do not deleted)");
$addAttachmentBody= xmlrpc_encode_request(
"confluence2.addAttachment",
array("", $pageId, $attachmentMetaData ,$imageBytes));
$this->_sendXMLRPCRequest($fullUrl, array(
"Content-Type: text/xml",
$auth_header),
$addAttachmentBody);
...
}

46. Make API calls to attach diagram
function attachDocument() {
...
$fullUrl = $baseURL . "/rpc/xmlrpc?user_id=" . $userId;
$auth_header = $this->_getAuthHeader($fullUrl);
xmlrpc_set_type($imageBytes, "base64");
$attachmentMetaData = array("fileName"=>$attachmentName,
"contentType"=>"image/png",
"comment"=>"Imported from Lucidchart (do not deleted)");
$addAttachmentBody= xmlrpc_encode_request(
"confluence2.addAttachment",
array("", $pageId, $attachmentMetaData ,$imageBytes));
$this->_sendXMLRPCRequest($fullUrl, array(
"Content-Type: text/xml",
$auth_header),
$addAttachmentBody);
...
}

47. Make API calls to attach diagram
function attachDocument() {
...
$fullUrl = $baseURL . "/rpc/xmlrpc?user_id=" . $userId;
$auth_header = $this->_getAuthHeader($fullUrl);
xmlrpc_set_type($imageBytes, "base64");
$attachmentMetaData = array("fileName"=>$attachmentName,
"contentType"=>"image/png",
"comment"=>"Imported from Lucidchart (do not deleted)");
$addAttachmentBody= xmlrpc_encode_request(
"confluence2.addAttachment",
array("", $pageId, $attachmentMetaData ,$imageBytes));
$this->_sendXMLRPCRequest($fullUrl, array(
"Content-Type: text/xml",
$auth_header),
$addAttachmentBody);
...
}

48. Steps to create Lucidchart app
• Establish Trust
• Register App
• Implement General Page
• Implement macro

49. Macro
• Receive macro params
• Return HTML
• Will be cached (caching header can be returned)
• No CSS, inline styles or JavaScript

50. Macro : Receive macro params
function macro() {
$userId = $_REQUEST['user_id'];
$name = $_REQUEST['name'];
$pageId = $_REQUEST['pageId'];
$docId = $_REQUEST['id'];
$width= $_REQUEST['width'];
$height = $_REQUEST['height'];
$align = $_REQUEST['align'];
$outputType = $_REQUEST['ctx_output_type'];
...

51. Macro: Return HTML
<div style="float: “ . $align . "; margin: 0 auto; width: " . (intVal($width)
+ 2) . "px;">
<img
src=“$pageAttachment['url']”
width=“$width”
height=“$height”/>
<div style="text-align: center">
<a href='sign://"$host/editDocument/$docId?attachment= $name'>Edit
Diagram</a> |
<a href=$baseUrl/plugins/servlet/remoteapps/lucidchart-
app/lucidAppRemove?page_id=$pageId&doc_id=$docId&attachment=$name'>Remove
Diagram</a>
</div>
</div>

52. That‟s it!
Straightforward approach to get your
app available for OnDemand

53. We‟re taking Apps to the next level

54. What if you could . . .
• Tap into our 12k+
OnDemand customer base
• Register your app with one
click
• Have full control over your
app

55. If you want to integrate, call us!
• Currently targeted towards
SaaS integrations
• Feature set in early stages Diagram here
• Working on solution for
“extensions”

56. You can finally integrate your site into OnDemand
with Remote Apps
#summit12

57. Thank you!

58. Getting started
https://remoteapps.jira.com