The new Confluence editor brings never before seen capabilities to our developers to extend the editor. During this session, Klaus Ihlberg will explain how users use Confluence today and how to use this information and the new capabilities, to develop apps that supercharge Confluence pages.

1. KLAUS IHLBERG | ENGINEERING MANAGER | ATLASSIAN
Supercharge Your Pages
New Ways to Extend the Confluence Editor

3. Consumers

4. Consumers Content
creators

5. Consumers Content
creators
Super users

6. Consumers Content
creators
Super users Admins

8. WHO ARE SUPERUSERS?

11. SUPERUSERS
Templates
Automate the creation of
complex pages
Keyboard
shortcuts
/- menu to create, // for date,
@ for mentions etc
Advanced Macros
Excerpt / Include, Page Properties,
3rd party integrations

12. SUPERUSERS
Templates
Automate the creation of
complex pages
Keyboard
shortcuts
/- menu to create, // for date,
@ for mentions etc
Advanced Macros
Excerpt / Include, Page Properties,
3rd party integrations

13. SUPERUSERS
Templates
Automate the creation of
complex pages
Keyboard
shortcuts
/- menu to create, // for date,
@ for mentions etc
Advanced Macros
Excerpt / Include, Page Properties,
3rd party integrations

14. SUPERUSERS
Templates
Automate the creation of
complex pages
Keyboard
shortcuts
/- menu to create, // for date,
@ for mentions etc
Advanced Macros
Excerpt / Include, Page Properties,
3rd party integrations

15. SUPERUSERS
Templates
Automate the creation of
complex pages
Keyboard
shortcuts
/- menu to create, // for date,
@ for mentions etc
Advanced Macros
Excerpt / Include, Page Properties,
3rd party integrations

16. SUPERUSERS
Templates
Automate the creation of
complex pages
Keyboard
shortcuts
/- menu to create, // for date,
@ for mentions etc
Advanced Macros
Excerpt / Include, Page Properties,
3rd party integrations

26. "modules":
"dynamicContentMacros": [
{
"key": "splunk-integration",
"name": {
"value": "Splunk Report"
},
"url": "/splunk-macro",
"description": {
"value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"

27. "modules":
"dynamicContentMacros": [
{
"key": "splunk-integration",
"name": {
"value": "Splunk Report"
},
"url": "/splunk-macro",
"description": {
"value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"

28. "modules":
"dynamicContentMacros": [
{
"key": "splunk-integration",
"name": {
"value": "Splunk Report"
},
"url": "/splunk-macro",
"description": {
"value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"

29. "modules":
"dynamicContentMacros": [
{
"key": "splunk-integration",
"name": {
"value": "Splunk Report"
},
"url": "/splunk-macro",
"description": {
"value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"

30. "modules":
"dynamicContentMacros": [
{
"key": "splunk-integration",
"name": {
"value": "Splunk Report"
},
"url": "/splunk-macro",
"description": {
"value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"

31. Confluence
Editor
GET <baseUrl>/splunk-macro
Product
Server

32. Confluence
Editor
Product
Server

33. Confluence
Editor
Product
Server

34. Confluence
Editor
Product
Server
iFrame Contents

36. "modules":
"dynamicContentMacros": [
{
"key": "splunk-integration",
"name": {
"value": "Splunk Report"
},
"url": "/splunk-macro",
"description": {
"value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"

37. Block macros
• "outputType": "block"
• "bodyType": "none"
Types of macros

38. Block macros
• "outputType": "block"
• "bodyType": "none"
Inline macros
• "outputType": "inline"
• "bodyType": "none"
Types of macros

39. Block macros
• "outputType": "block"
• "bodyType": "none"
Inline macros
• "outputType": "inline"
• "bodyType": "none"
Plain text macros
• "outputType": "block"
• "bodyType": “plain-text”
Types of macros

40. Block macros
• "outputType": "block"
• "bodyType": "none"
Inline macros
• "outputType": "inline"
• "bodyType": "none"
Plain text macros
• "outputType": "block"
• "bodyType": “plain-text”
Bodied macros
• "outputType": "block"
• "bodyType": “rich-text”
Types of macros

42. "modules":
"dynamicContentMacros": [
{
"key": "splunk-integration",
"name": {
"value": "Splunk Report"
},
"url": "/splunk-macro",
"description": {
"value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"

43. "value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"
},
"width": "640px",
"height": "300px",
"chrome": false
},
"parameters": [
{
"identifier": "report",
"name": {
"value": "Report"

44. "value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"
},
"width": "640px",
"height": "300px",
"chrome": false
},
"parameters": [
{
"identifier": "report",
"name": {
"value": "Report"

45. "value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"
},
"width": "640px",
"height": "300px",
"chrome": false
},
"parameters": [
{
"identifier": "report",
"name": {
"value": "Report"

48. "value": "Show splunk reports on your Confluence page."
},
"outputType": "block",
"bodyType": "none",
"editor": {
"url": "/splunk-editor",
"editTitle": {
"value": "Choose a report"
},
"insertTitle": {
"value": "Choose a report"
},
"width": "640px",
"height": "300px",
"chrome": false
},
"parameters": [
{
"identifier": "report",
"name": {
"value": "Report"

49. "chrome": false
},
"parameters": [
{
"identifier": "report",
"name": {
"value": "Report"
},
"description": {
"value": "Allows switching between view types"
},
"type": "string",
"required": true,
"multiple": false,
"defaultValue": "1",
"hidden": false
}
]
}
]

50. "chrome": false
},
"parameters": [
{
"identifier": "report",
"name": {
"value": "Report"
},
"description": {
"value": "Allows switching between view types"
},
"type": "string",
"required": true,
"multiple": false,
"defaultValue": "1",
"hidden": false
}
]
}
]

52. Aggregate and
control data
Superusers create complex
pages for other people to
consume and collaborate on.
Customize their
workflow
Superusers use templates
and add ons to make
Confluence work their
way.
Champion
Confluence!
Superusers spread the
message of Confluence to
new users!
What superusers do?

53. Consumers Content
creators
Super users Admins

55. WHO ARE ADMINS?

56. ADMINS
Customize the
instance
Install apps, set permissions
Analytics
How is the instance being
used

57. ADMINS
Customize the
instance
Install apps, set permissions
Analytics
How is the instance being
used

58. CUSTOM MACRO CREATOR

61. "modules": {
"adminPages": [
{
"url": "/#/app/custom-macro-admin",
"name": {
"value": "Custom Macros"
},
"key": "custom-macro-admin-page"
}
]
}

62. "modules": {
"adminPages": [
{
"url": "/#/app/custom-macro-admin",
"name": {
"value": "Custom Macros"
},
"key": "custom-macro-admin-page"
}
]
}

63. DYNAMIC MODULES

64. ConfluenceApplication
POST /rest/atlassian-connect/1/app/module/dynamic

65. submit() {
const requestOptions = {
url: "/rest/atlassian-connect/1/app/module/dynamic",
type: "POST",
data: {
dynamicContentMacros: [
{
"key": "confidential-macro",
"name": {
"value": "Confidential Macro"
},
"url": "/#/app/confidential-macro",
"description": {
"value": "Adds a confidential stamp on your page."
},
"outputType": "block",
"bodyType": "plain-text",
"parameters": [
{
"identifier": "body",

66. submit() {
const requestOptions = {
url: "/rest/atlassian-connect/1/app/module/dynamic",
type: "POST",
data: {
dynamicContentMacros: [
{
"key": "confidential-macro",
"name": {
"value": "Confidential Macro"
},
"url": "/#/app/confidential-macro",
"description": {
"value": "Adds a confidential stamp on your page."
},
"outputType": "block",
"bodyType": "plain-text",
"parameters": [
{
"identifier": "body",

67. type: "POST",
data: {
dynamicContentMacros: [
{
"key": "confidential-macro",
"name": {
"value": "Confidential Macro"
},
"url": "/#/app/confidential-macro",
"description": {
"value": "Adds a confidential stamp on your page."
},
"outputType": "block",
"bodyType": "plain-text",
"parameters": [
{
"identifier": "body",
"name": {
"value": "Body"
},
"description": {

68. }
const responseHandler = (errorOrData, response, xhrOrErrorThrown) => {
if (errorOrData === false) {
AP.flag.create({
title: 'Request sent successfully',
body: 'status = ' + response.status + ', ' + response.statusText + '
(length = ' + response.responseText.length + ')',
type: 'success',
close: 'auto'
});
} else {
AP.flag.create({
title: 'Request failed to send',
body: 'status = ' + response.status + ', ' + response.statusText + '
(' + xhrOrErrorThrown + ')',
type: 'error',
close: 'auto'
});
}
};
AP.request(requestOptions, responseHandler);

69. });
} else {
AP.flag.create({
title: 'Request failed to send',
body: 'status = ' + response.status + ', ' + response.statusText + '
(' + xhrOrErrorThrown + ')',
type: 'error',
close: 'auto'
});
}
};
AP.request(requestOptions, responseHandler);
};

70. ConfluenceApplication
POST /rest/atlassian-connect/1/app/module/dynamic

73. Allowed modules
• Dynamic content macros
• Webhooks
• Webpanels
Dynamic Modules

74. Allowed modules
• Dynamic content macros
• Webhooks
• Webpanels
Limit of Ten
for each app on each instance
Dynamic Modules

76. ConfluenceApplication
GET /rest/atlassian-connect/1/app/module/dynamic

77. ConfluenceApplication
DELETE /rest/atlassian-connect/1/app/module/dynamic

78. Allowed modules
• Dynamic content macros
• Webhooks
Limit of Ten
for each app on each instance
Dynamic Modules

79. Allowed modules
• Dynamic content macros
• Webhooks
Limit of Ten
for each app on each instance
Dynamic Modules
AVAILABLE SOON!

80. Create the
Confluence
instance!
Admins set up the spaces,
the users and global
patterns.
Install
add ons
Admins install
marketplace and their
own add ons.
Configure
Confluence
The better the admin, the
more successful Confluence
is.
What admins do?

82. https://developer.atlassian.com/cloud/

83. https://atlaskit.atlassian.com/
https://developer.atlassian.com/cloud/

84. https://bitbucket.org/atlassian/atlassian-connect-js-refapp
https://atlaskit.atlassian.com/
https://developer.atlassian.com/cloud/

85. Consumers Content
creators
Super users Admins

86. Thank you!
KLAUS IHLBERG | ENGINEERING MANAGER | ATLASSIAN