Working Examples for HTML and JavaScript
On this page:
Integration with Scroll Versions
A customer has shared this nifty integration between Live Input macros and the k15t Scroll Versions App. The following macros and code will show all the Pages in a Versioned Space in Draft and Review Workflow states.
Page Contents
On the Confluence page add the following macros:
Macro #1: Live: Dropdown List
| Parameters | Title: “Space”Page Variable: “spaceKey” |
|---|---|
| Body | Versioned Space 1 | VS1Other Versioned Space | OTH |
Macro #2: Live: Dropdown List
| Parameters | Title: “Version”Page Variable: “versionId” |
|---|---|
| Body | 1.0 | 7654321123456672.0 | 7765343235677883.0 | 877543467890976 |
Macro #3: HTML
<script>
$(document).ready(function()
{
function workflow(pageId, action)
{
$.ajaxSetup(
{
beforeSend: function(request)
{
request.setRequestHeader("X-Atlassian-Token", "no-check");
}
});
$.ajax({
url: AJS.params.baseUrl + "/rest/scroll-versions/1.0/workflow/" + pageId + "/transition/" + action,
type: "POST",
dataType: "JSON",
async: false,
success: function(data, statusText, xhr)
{
}
});
}
$(document).on('click', '.approve', function()
{
var pageId = this.getAttribute("pageid");
workflow(pageId, "finished");
workflow(pageId, "approve");
});
function getDrafts(state)
{
var version = window.limPageVariables.get('versionid');
var space = window.limPageVariables.get('spacekey');
var results = "<div class=\"table-wrap\">" +
"<table class=\"wrapped confluenceTable\">" +
"<tr>" +
"<th class=\"confluenceTh\">Counter</th>" +
"<th class=\"confluenceTh\">Page</th>" +
"<th class=\"confluenceTh\">Change</th>" +
"<th class=\"confluenceTh\">Version</th>" +
"<th class=\"confluenceTh\">Last Modifier</th>" +
"<th class=\"confluenceTh\">Workflow</th>" +
"</tr>";
$.ajax(
{
url: AJS.params.baseUrl + "/rest/scroll-versions/1.0/report/" + space + "/change/" + version,
data: { state: state },
type: "GET",
dataType: "JSON",
success: function(data, statusText, xhr)
{
var i = 1;
for(var key in data.reportedPages)
{
results = results +
"<tr>" +
"<td class=\"confluenceTd\">" + i + "</td>" +
"<td class=\"confluenceTd\"><a href=\"" + AJS.params.baseUrl + "/pages/viewpage.action?pageId=" + data.reportedPages[key].confluencePage.id + "\">" + data.reportedPages[key].scrollPageTitle + "</a></td>" +
"<td class=\"confluenceTd\">" + data.reportedPages[key].changeType + "</td>" +
"<td class=\"confluenceTd\">" + data.reportedPages[key].targetVersion.name + "</td>" +
"<td class=\"confluenceTd\">" + data.reportedPages[key].confluencePage.lastModifier + "</td>" +
"<td class=\"confluenceTd\"><a style=\"cursor: pointer;\" class=\"approve\" pageid=" + data.reportedPages[key].confluencePage.id + ">Approve</a></td>" +
"</tr>";
i = i + 1;
}
results = results + "</table></div>";
document.getElementById("results").innerHTML=results;
}
});
}
$("#drafts").click(function()
{
getDrafts("draft");
});
$("#review").click(function()
{
getDrafts("approval");
});
});
</script>
<button id="drafts" class="aui-button" type="button" >Show Drafts</button>
<button id="review" class="aui-button" type="button" >Waiting Review</button>
<p></p>
<div id="results"></div>