Include page macro with HTML
Asked by PGhostek:

Hi folks,

I have a HTML macro that creates styled button and when you click it, it shows some paragraph. What I would like to achieve is when user clicks on the button it will show him confluence page included using "include macro" (macro id: "include") but I have no idea how to do it.

Code I'm using for my HTML button is below:

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ``` <style>/* Style the button that is used to open and close the collapsible content */.collapsible {  background-color: #eee;  color: #444;  cursor: pointer;  padding: 10px;  width: 100%;  outline: none;  font-size: 32px;  font-variant-caps: all-small-caps;  margin-bottom: 10px;  margin-top:30px;  border: 1px;  border-top-style: dashed;  border-bottom-style: dashed;  display: block;  text-align: left;}/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */.active, .collapsible:hover {  background-color: #ccc;}/* Style the collapsible content. Note: hidden by default */.content {  padding: 0 18px;  max-height: 0;  overflow: hidden;  transition: max-height 0.2s ease-out;  background-color: #f1f1f1;</style><button class="collapsible">Open Collapsible</button><div class="content">  <p>Lorem ipsum dolor sit amet,.....</p></div><script type="text/javascript">var coll = document.getElementsByClassName("collapsible");var i;for (i = 0; i < coll.length; i++) {  coll[i].addEventListener("click", function() {    this.classList.toggle("active");    var content = this.nextElementSibling;    if (content.style.maxHeight){      content.style.maxHeight = null;    } else {      content.style.maxHeight = content.scrollHeight + "px";    }   });}</script> ``` |

Right now the code above will show this: "Lorem ipsum dolor sit amet,....." when you click the button. But I what to show included confluence page instead.

Any help will be most appreciated :)


Answers:
author: Rafael Pinto Sperafico
body: Hi [@PGhostek](/t5/user/viewprofilepage/user-id/435972) ,

Based on the description, it seems the "include macro" you are referring to relates [Include Page Macro.](https://confluence.atlassian.com/doc/include-page-macro-139514.html "Include Page Macro") If so, here is an example on how to accomplish that including a page from the same Space:

There is a page located on http://localhost:8090/confluence/display/MAC/SamplePage

And to include the content of this page into another from a User Macro, I have used:

```
<button id="my-include-macro">Include</button>

<div id="my-placeholder">Page Include goes here</div>

<script>
AJS.toInit(function() {
  document.getElementById('my-include-macro').onclick = function(event) {
    // Confluence 5.8 or below
    //document.getElementById('my-placeholder').innerHTML = '$helper.renderConfluenceMacro("{include:SamplePage}")';
    // Confluence 5.9 or above
    document.getElementById('my-placeholder').innerHTML = '$action.getHelper().renderConfluenceMacro("{include:SamplePage}")';
  }
})

</script>
```

As a result, the page gets included.

If you want to include a page from a different Space, you need to provide the Space key to the argument:

```
{include:SPACEKEY:SamplePage}
```

Hope the above helps.

Kind regards,  
Rafael

comments: author: PGhostek
body: Hi Rafael,

thanks a lot for quick reply.

I've tried the solution as you've described it (included page that is called "Dashboard" and sits in the same space (my personal)) above but for some reason when I click on the button it shows me this:

$action.getHelper().renderConfluenceMacro("{include:Dashboard}").

Am I missing something? Thanks again in advance!


author: Rafael Pinto Sperafico
body: Hi [@PGhostek](/t5/user/viewprofilepage/user-id/435972) ,

Please, create a sample page manually and in edit mode **type in** {inclu - this will be enough to display the "*Include Page*" macro so you can select it. Once you do, try to find your "Dashboard" by typing in the input field.

If you have the same page in multiple spaces, you might need to specify from which space the data should be retrieved.

Kind regards,  
Rafael


author: PGhostek
body: Hi [@Rafael Pinto Sperafico](/t5/user/viewprofilepage/user-id/2286143) ,

I've tried to put there also Confluence space key but no luck with that too. When I try to manually add the macro to the page it recognizes the "include page" macro without problem. Just for reference I'm adding the complete code (updated after your comments).

```
<style>
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 10px;
width: 100%;
outline: none;
font-size: 32px;
font-variant-caps: all-small-caps;
margin-bottom: 10px;
margin-top:30px;
border: 1px;
border-top-style: dashed;
border-bottom-style: dashed;
display: block;
text-align: left;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>

<button class="collapsible" id="collapsible-button">Open Collapsible</button>
<div class="content" id="content-placeholder"></div>

<script type="text/javascript">

AJS.toInit(function() {
document.getElementById("collapsible-button").onclick = function(event) {
document.getElementById("content-placeholder").innerHTML = '$action.getHelper().renderConfluenceMacro("{include:LE Team Sample Page}")';
}
})

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
} 
});
}
</script>
```

Thanks again for your help and patience!


author: PGhostek
body: Hi [@Rafael Pinto Sperafico](/t5/user/viewprofilepage/user-id/2286143) ,

I've tried to put there also Confluence space key but no luck with that too. When I try to manually add the macro to the page it recognizes the "include page" macro without problem. Just for reference I'm adding the complete code (updated after your comments).

```
<style>
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 10px;
width: 100%;
outline: none;
font-size: 32px;
font-variant-caps: all-small-caps;
margin-bottom: 10px;
margin-top:30px;
border: 1px;
border-top-style: dashed;
border-bottom-style: dashed;
display: block;
text-align: left;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>

<button class="collapsible" id="collapsible-button">Open Collapsible</button>
<div class="content" id="content-placeholder"></div>

<script type="text/javascript">

AJS.toInit(function() {
document.getElementById("collapsible-button").onclick = function(event) {
document.getElementById("content-placeholder").innerHTML = '$action.getHelper().renderConfluenceMacro("{include:LE Team Sample Page}")';
}
})

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
} 
});
}
</script>
```

Thanks again for your help and patience!


author: PGhostek
body: Hi [@Rafael Pinto Sperafico](/t5/user/viewprofilepage/user-id/2286143) ,

I've tried to put there also Confluence space key but no luck with that too. When I try to manually add the macro to the page it recognizes the "include page" macro without problem. Just for reference I'm adding the complete code (updated after your comments).

```
<style>
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 10px;
width: 100%;
outline: none;
font-size: 32px;
font-variant-caps: all-small-caps;
margin-bottom: 10px;
margin-top:30px;
border: 1px;
border-top-style: dashed;
border-bottom-style: dashed;
display: block;
text-align: left;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>

<button class="collapsible" id="collapsible-button">Open Collapsible</button>
<div class="content" id="content-placeholder"></div>

<script type="text/javascript">

AJS.toInit(function() {
document.getElementById("collapsible-button").onclick = function(event) {
document.getElementById("content-placeholder").innerHTML = '$action.getHelper().renderConfluenceMacro("{include:LE Team Sample Page}")';
}
})

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
} 
});
}
</script>
```

BTW I'm adding the HTML code to HTML macro on the page so in edit mode it basically looks like this:

![LEC Team dashboarding.png](https://community.atlassian.com/t5/image/serverpage/image-id/65050i4D7C3C6D6940EC7C/image-size/large?v=v2&px=999 "LEC Team dashboarding.png")Thanks again for your help and patience!


author: Rafael Pinto Sperafico
body: Hi [@PGhostek](/t5/user/viewprofilepage/user-id/435972) ,

I am away from my laptop just now, but if I am not mistaken you need to separate Space key from Page using colon, e.g

```
{include:LE:Team Sample Page}
```

I will be able to test that later on, in the meantime, if you could run a simple test it would be great.

Kind regards,  
Rafael


author: Rafael Pinto Sperafico
body: Hi [@PGhostek](/t5/user/viewprofilepage/user-id/435972) ,

In the User Macro you have attached, there is an issue on line:

```
content.style.maxHeight = null;
```

Regardless of that, the User Macro works but it does not display the content due to the Javascript error from above. If you Inspect HTML content, you will notice *div#content-placeholder* has the DOM included.

Anyway, is there any particular reason for you not to use <https://confluence.atlassian.com/doc/expand-macro-223222352.html> ? Here is an example:

```
## Macro title: My Macro 4 Community
## Macro has a body: N
## Body processing: Rendered
## Output: HTML
##
## Developed by: Rafael Pinto Sperafico
## Date created: 04/09/2019
## Installed by: Rafael Pinto Sperafico

## This is an example macro
## @noparams

<style>
/* change the style for expand macro title text */ 
#com-atlassian-confluence .expand-control-text {
  color: #800;
  font-weight: bold;
}
</style>

<script>
AJS.toInit(function(){
  AJS.$('.expand-control-text').text('Expand');
  AJS.$('.expand-control-text').on('click', function(event) {
    var display = event.target.parentNode.nextSibling.style.display;
    if (display == 'block') {
      event.target.innerText = 'Expand';
    } else {
      event.target.innerText = 'Collapse';
    }
  });
})
</script>

<ac:macro ac:name="expand">
 <ac:rich-text-body>$action.getHelper().renderConfluenceMacro("{include:FOO:Page A}")</ac:rich-text-body>
</ac:macro>

<ac:macro ac:name="expand">
 <ac:rich-text-body>$action.getHelper().renderConfluenceMacro("{include:BAR:Page B}")</ac:rich-text-body>
</ac:macro>
```

As a result, you would have:

![user-macro-expand-include.png](https://community.atlassian.com/t5/image/serverpage/image-id/65113iE136D77C420C001D/image-dimensions/547x143?v=v2 "user-macro-expand-include.png")

*Content A comes from FOO:Page A*   
*Content B comes from BAR:Page B*

Hope the above helps.

Kind regards,  
Rafael


author: PGhostek
body: Thinking about that - no specific reason. It was just easier for me to put it together as button but expand macro could be used to. Is there a way how I can not show the arrow that indicates whether the content is collapsed or expanded?

Thanks again for your support here!


author: Rafael Pinto Sperafico
body: Hi [@PGhostek](/t5/user/viewprofilepage/user-id/435972)

"Is there a way how I can not show the arrow that indicates whether the content is collapsed or expanded?" Yes, there is.

Simply navigate in the DOM using Javascript and manipulate the icon (*aui-iconfont-chevron-down, aui-iconfont-chevron-up* ) by removing the class from span tag or replacing it with something else (<https://docs.atlassian.com/aui/8.5.1/docs/icons.html>)

```
<span class="aui-icon aui-icon-small aui-iconfont-chevron-down">Insert meaningful text here for accessibility</span>
```

Kind regards,  
Rafael


author: PGhostek
body: [@Rafael Pinto Sperafico](/t5/user/viewprofilepage/user-id/2904254) thank you very much!

I finally managed to achieve what I wanted - I really appreciate all the help you've provided :)


Tags: confluence-server

html

macro

server