nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Include page macro with HTML

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

Accepted answers

Rafael Pinto Sperafico_35quns

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

All comments

Rafael Pinto Sperafico_35quns

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

PGhostek

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!

Rafael Pinto Sperafico_35quns

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

PGhostek

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!

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

server

confluence-server

macro

html