It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Include page macro with HTML

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 :)

 

 

1 answer

1 accepted

1 vote
Answer accepted

Hi @PGhostek ,

Based on the description, it seems the "include macro" you are referring to relates 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

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!

Hi @PGhostek ,

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

Hi @Rafael Pinto Sperafico ,

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!

Hi @Rafael Pinto Sperafico ,

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!

Hi @Rafael Pinto Sperafico ,

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.pngThanks again for your help and patience!

Hi @PGhostek ,

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

Hi @PGhostek ,

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

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

Hope the above helps.

Kind regards,
Rafael

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!

Hi @PGhostek 

"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

Like PGhostek likes this

@Rafael_Pinto_Sperafico thank you very much!

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

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

How is your team having fun and bonding, remotely, utilizing Confluence?

Thanks everyone for answering last week’s question. The winner of the random drawing from those who commented is: @LarryBrock I’ll contact you separately with your prize details. This wee...

327 views 9 7
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you