Back

The Document Management example shows how you can use JavaScript Button for Confluence to create a Document Management System that allows managing the states for different kinds of documents.

Setup

To set up the example, create a new empty page and add a JavaScript Button at the very top with the following configuration:

function setup(page) {

    const body = JSON.parse(page.body.atlas_doc_format.value);

    const extensionKey = body.content[0].attrs.extensionKey;

    return {
        id: page.id,
        title: page.title,
        status: page.status,
        spaceId: page.spaceId,
        parentId: page.parentId,
        version: {
            number: page.version.number + 1,
            message: "Setup DMS Example"
        },
        body: {
            representation: "atlas_doc_format",
            value: "{\"type\":\"doc\",\"content\":[{\"type\":\"extension\",\"attrs\":{\"layout\":\"default\",\"extensionType\":\"com.atlassian.confluence.macro.core\",\"extensionKey\":\"children\",\"parameters\":{\"macroParams\":{\"all\":{\"value\":\"true\"}},\"macroMetadata\":{\"macroId\":{\"value\":\"205c1925a1a332e84b53ce365fc8f762\"},\"schemaVersion\":{\"value\":\"2\"},\"title\":\"Children Display\"}},\"localId\":\"826d4971-a713-4c84-9735-015c7b01bc75\"}},{\"type\":\"paragraph\",\"content\":[{\"text\":\"This is an example showing how you can implement a document management system with the help of the JavaScript Button add-on for Confluence. Descendants of this page have a type of either Memo or Instruction. Each type has a state with the following transitions:\",\"type\":\"text\"}]},{\"type\":\"bulletList\",\"content\":[{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"content\":[{\"text\":\"Memo: draft → done\",\"type\":\"text\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"content\":[{\"text\":\"Instruction: draft → done → approved\",\"type\":\"text\"}]}]}]},{\"type\":\"paragraph\",\"content\":[{\"text\":\"Memos don’t need to be approved, Instructions do.\",\"type\":\"text\"}]},{\"type\":\"paragraph\",\"content\":[{\"text\":\"Invoking the following button shows the state of all descendants:\",\"type\":\"text\"}]},{\"type\":\"extension\",\"attrs\":{\"layout\":\"default\",\"extensionType\":\"com.atlassian.ecosystem\",\"extensionKey\":\"" + extensionKey + "\",\"text\":\"Javascript Button (Development)\",\"parameters\":{\"guestParams\":{\"resultLocation\":\"$dialog\",\"code\":\"$('Code', $page(" + page.id + "))\",\"functionName\":\"getStatus\",\"cqlQuery\":\"ancestor = " + page.id + "\",\"caption\":\"👁 Show Status\",\"parameters\":\"$('Status'),$('Type')\"},\"localId\":\"01b90f64-7187-4226-8958-b8af27fec0d8\",\"extensionId\":\"ari:cloud:ecosystem::extension/" + extensionKey + "\",\"extensionTitle\":\"Javascript Button (Development)\"},\"localId\":\"6697f4b3-b3e1-48f4-933b-b562be5af29c\"}},{\"type\":\"paragraph\",\"content\":[{\"text\":\"To batch-approve all done Instructions invoke the flowing action:\",\"type\":\"text\"}]},{\"type\":\"extension\",\"attrs\":{\"layout\":\"default\",\"extensionType\":\"com.atlassian.ecosystem\",\"extensionKey\":\"" + extensionKey + "\",\"text\":\"Javascript Button (Development)\",\"parameters\":{\"guestParams\":{\"resultLocation\":\"$('Status')\",\"code\":\"$('Code', $page(" + page.id + "))\",\"functionName\":\"approve\",\"cqlQuery\":\"text ~ \\\"\\\\\\\"Status: Done\\\\\\\"\\\" and text ~ \\\"\\\\\\\"Type: Instruction\\\\\\\"\\\" and ancestor = " + page.id + "\",\"caption\":\"✓ Approve Instructions\",\"parameters\":\"$('Status')\"},\"localId\":\"01b90f64-7187-4226-8958-b8af27fec0d8\",\"extensionId\":\"ari:cloud:ecosystem::extension/" + extensionKey + "\",\"extensionTitle\":\"Javascript Button (Development)\"},\"localId\":\"038627b3-7d1e-4b0d-a6f5-33c049612d21\"}},{\"type\":\"paragraph\",\"content\":[{\"text\":\"To create a new draft Instruction page, use this button:\",\"type\":\"text\"}]},{\"type\":\"extension\",\"attrs\":{\"layout\":\"default\",\"extensionType\":\"com.atlassian.ecosystem\",\"extensionKey\":\"" + extensionKey + "\",\"text\":\"Javascript Button (Development)\",\"parameters\":{\"guestParams\":{\"resultLocation\":\"$page\",\"code\":\"$('Code')\",\"functionName\":\"create\",\"cqlQuery\":\"\",\"caption\":\"⊕ Create Instruction\",\"parameters\":\"$page, \\\"Instruction\\\"\"},\"localId\":\"32b6b769-0249-47e2-a74c-400f64946f21\",\"extensionId\":\"ari:cloud:ecosystem::extension/" + extensionKey + "\",\"extensionTitle\":\"Javascript Button (Development)\"},\"localId\":\"a1b75185-332c-44e4-9b40-e7d1bcd83761\"}},{\"type\":\"extension\",\"attrs\":{\"layout\":\"default\",\"extensionType\":\"com.atlassian.ecosystem\",\"extensionKey\":\"" + extensionKey + "\",\"text\":\"Javascript Button (Development)\",\"parameters\":{\"guestParams\":{\"resultLocation\":\"$page\",\"code\":\"$('Code')\",\"functionName\":\"create\",\"cqlQuery\":\"\",\"caption\":\"⊕ Create Memo\",\"parameters\":\"$page, \\\"Memo\\\"\"},\"localId\":\"32b6b769-0249-47e2-a74c-400f64946f21\",\"extensionId\":\"ari:cloud:ecosystem::extension/" + extensionKey + "\",\"extensionTitle\":\"Javascript Button (Development)\"},\"localId\":\"96421399-7e00-4d73-af25-b35a1f72d788\"}},{\"type\":\"paragraph\",\"content\":[{\"text\":\"Code:\",\"type\":\"text\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"javascript\"},\"content\":[{\"text\":\"function getStatus(status, type) {\\n return status + \\\" (\\\" + type + \\\")\\\";\\n}\\n\\nfunction approve(currentStatus) {\\n return \\\"Approved\\\";\\n}\\n\\nfunction next(status, type) {\\n if (type == \\\"Memo\\\") {\\n if (status == \\\"Draft\\\") {\\n return \\\"Done\\\";\\n } else {\\n return status;\\n }\\n } else if (type == \\\"Instruction\\\") {\\n if (status == \\\"Draft\\\") {\\n return \\\"Done\\\";\\n } else if (status == \\\"Done\\\") {\\n return \\\"Approved\\\";\\n } else {\\n return status;\\n }\\n }\\n}\\n\\nfunction toDraft() {\\n return \\\"Draft\\\";\\n}\\n\\nfunction create(page, type) {\\n return {\\n parentId: page.id,\\n spaceId: page.spaceId,\\n title: `New ${type}`,\\n body: {\\n representation: \\\"atlas_doc_format\\\",\\n value: \\\"{\\\\\\\"type\\\\\\\":\\\\\\\"doc\\\\\\\",\\\\\\\"content\\\\\\\":[{\\\\\\\"type\\\\\\\":\\\\\\\"layoutSection\\\\\\\",\\\\\\\"content\\\\\\\":[{\\\\\\\"type\\\\\\\":\\\\\\\"layoutColumn\\\\\\\",\\\\\\\"attrs\\\\\\\":{\\\\\\\"width\\\\\\\":50.0},\\\\\\\"content\\\\\\\":[{\\\\\\\"type\\\\\\\":\\\\\\\"paragraph\\\\\\\",\\\\\\\"content\\\\\\\":[{\\\\\\\"text\\\\\\\":\\\\\\\"Status: Draft\\\\\\\",\\\\\\\"type\\\\\\\":\\\\\\\"text\\\\\\\"}]},{\\\\\\\"type\\\\\\\":\\\\\\\"paragraph\\\\\\\",\\\\\\\"content\\\\\\\":[{\\\\\\\"text\\\\\\\":\\\\\\\"Type: \\\" + type + \\\"\\\\\\\",\\\\\\\"type\\\\\\\":\\\\\\\"text\\\\\\\"}]}]},{\\\\\\\"type\\\\\\\":\\\\\\\"layoutColumn\\\\\\\",\\\\\\\"attrs\\\\\\\":{\\\\\\\"width\\\\\\\":50.0},\\\\\\\"content\\\\\\\":[{\\\\\\\"type\\\\\\\":\\\\\\\"extension\\\\\\\",\\\\\\\"attrs\\\\\\\":{\\\\\\\"layout\\\\\\\":\\\\\\\"default\\\\\\\",\\\\\\\"extensionType\\\\\\\":\\\\\\\"com.atlassian.ecosystem\\\\\\\",\\\\\\\"extensionKey\\\\\\\":\\\\\\\"" + extensionKey + "\\\\\\\",\\\\\\\"text\\\\\\\":\\\\\\\"Javascript Button\\\\\\\",\\\\\\\"parameters\\\\\\\":{\\\\\\\"guestParams\\\\\\\":{\\\\\\\"resultLocation\\\\\\\":\\\\\\\"$('Status')\\\\\\\",\\\\\\\"code\\\\\\\":\\\\\\\"$('Code', $page(\\\" + page.id + \\\"))\\\\\\\",\\\\\\\"functionName\\\\\\\":\\\\\\\"next\\\\\\\",\\\\\\\"cqlQuery\\\\\\\":\\\\\\\"\\\\\\\",\\\\\\\"caption\\\\\\\":\\\\\\\"➡ Next state\\\\\\\",\\\\\\\"parameters\\\\\\\":\\\\\\\"$('Status'),$('Type')\\\\\\\"},\\\\\\\"localId\\\\\\\":\\\\\\\"a9ea7a36-2559-4bd3-a563-e19de0a4157c\\\\\\\",\\\\\\\"extensionId\\\\\\\":\\\\\\\"ari:cloud:ecosystem::extension/" + extensionKey + "\\\\\\\",\\\\\\\"extensionTitle\\\\\\\":\\\\\\\"Javascript Button\\\\\\\"},\\\\\\\"localId\\\\\\\":\\\\\\\"38c0c296-60c8-462e-80cf-bb3de3969308\\\\\\\"}},{\\\\\\\"type\\\\\\\":\\\\\\\"extension\\\\\\\",\\\\\\\"attrs\\\\\\\":{\\\\\\\"layout\\\\\\\":\\\\\\\"default\\\\\\\",\\\\\\\"extensionType\\\\\\\":\\\\\\\"com.atlassian.ecosystem\\\\\\\",\\\\\\\"extensionKey\\\\\\\":\\\\\\\"" + extensionKey + "\\\\\\\",\\\\\\\"text\\\\\\\":\\\\\\\"Javascript Button\\\\\\\",\\\\\\\"parameters\\\\\\\":{\\\\\\\"guestParams\\\\\\\":{\\\\\\\"resultLocation\\\\\\\":\\\\\\\"$('Status')\\\\\\\",\\\\\\\"code\\\\\\\":\\\\\\\"$('Code', $page(\\\" + page.id + \\\"))\\\\\\\",\\\\\\\"functionName\\\\\\\":\\\\\\\"toDraft\\\\\\\",\\\\\\\"cqlQuery\\\\\\\":\\\\\\\"\\\\\\\",\\\\\\\"caption\\\\\\\":\\\\\\\"↩ Make draft\\\\\\\",\\\\\\\"parameters\\\\\\\":\\\\\\\"\\\\\\\"},\\\\\\\"localId\\\\\\\":\\\\\\\"d53741a4-4000-43a8-9d6f-4f300417e56e\\\\\\\",\\\\\\\"extensionId\\\\\\\":\\\\\\\"ari:cloud:ecosystem::extension/" + extensionKey + "\\\\\\\",\\\\\\\"extensionTitle\\\\\\\":\\\\\\\"Javascript Button\\\\\\\"},\\\\\\\"localId\\\\\\\":\\\\\\\"67089362-29c1-42df-a930-60b5a236cbbc\\\\\\\"}},{\\\\\\\"type\\\\\\\":\\\\\\\"paragraph\\\\\\\"}]}]},{\\\\\\\"type\\\\\\\":\\\\\\\"rule\\\\\\\"},{\\\\\\\"type\\\\\\\":\\\\\\\"paragraph\\\\\\\",\\\\\\\"content\\\\\\\":[{\\\\\\\"text\\\\\\\":\\\\\\\"This \\\" + type + \\\" describes….\\\\\\\",\\\\\\\"type\\\\\\\":\\\\\\\"text\\\\\\\"}]}],\\\\\\\"version\\\\\\\":1}\\\", \\n }\\n }\\n}\",\"type\":\"text\"}]}],\"version\":1}"
        }
    }
}

Invoke the button and after your page reloads the DMS example should look like this:

DMS

Create children

You can now create children using the template buttons Create Instruction and Create Memo. This will create pages with two fields at the very beginning, one field for the type of the page, and one field for the current state of the page:

Subpage

It also provides two buttons, one to move the page to the next state, and one to move the page to the initial state.

Show Status

The Show Status button searches for all children and shows the state and type in a dialog:

Show Status

Approve Instructions

The Approve Instructions button transitions the states of all Instruction pages from Done to Approved:

Approve

Back