Suggestions for linking checkboxes in confluence

[Jordan Hauser]

Hi all,

My users had a request to take some large tables with checkboxes, and create smaller linked tables where 1 of the checkboxes in the smaller table would link to the 2 or more in the larger table

As a visual example, this is similar to what I am trying to get a working proof of concept for


Info: We have the table filters/charts plugin

If anyone has tried this and could provide some pointer I would greatly appreciate it
-Jordan

[Stiltsoft support]

Hi @Jordan Hauser ,

We can suggest counting checkboxes for your large tables.

I mean that if your large table consists of many stages of the same big project, you may wrap it into the Pivot Table macro and count how many steps are left there to the whole project to be completed.

If you wrap this Pivot Table in the Chart from Table macro, you can visualize the data as a pie chart.

As you've mentioned that sometimes you need to reference not one large source table but several tables, then you need to wrap each of these tables in the Table Excerpt macro, collect them on the master page via the Table Excerpt Include macro, tick the "Show as a report" option and your tables will be shown as a combined report.

Then you wrap your Table Excerpt Include macro in the Pivot Table macro and count empty/non-empty checkboxes for the whole combined table.

[Jordan Hauser]

We already have the graphs working using this method, and is not what I was asking about

I was asking about clicking one checkbox to click off 2/3/4 others

[Stiltsoft support]

If you need to connect tables vise versa, you may use the Table Transformer macro:

Here the first table is your big table and the 2nd&3rd tables are your smaller tables.

The big table doesn't have the column with checkboxes but the smaller tables do have checkboxes.

To connect these tables, they should have a common column - for my example, it is 'Project Name'. On your screenshot there is no such column. so you need to add it (for example, add the 'ConsolidatedTaskName' in the big table).

Now we can look up these tables by the common column 'Project name' and list the columns that we want to see in a result table:

SELECT 'Complete', 'Task', 'Comments'
FROM (
SELECT *
FROM T1 LEFT JOIN T* ON T1.'Project Name' = T*.'Project Name')

As you can see, the checkboxes from the smaller tables are mirrored in the big table.

As the second option, you may use the Table Spreadsheet macro with Excel-like cell formulas, set statuses in the smaller tables and refer to them (mirror them) in the big table.

And you may use native tasks with tabulation and when checking the parent task all the sub-tasks will become gray (inactive) automatically:

Hope this helps.

[Jordan Hauser]

Thank you Stiltsoft,

This is a great idea that I may use for another project, however I ended up going with a html macro and javascript to handle this as I realized I needed to send a post request to the individual task boxes in order to persist the changes

Seeing as the taskboxes for the actual project are among many different pages, and the difficulties associated with changing configuration when there are too many macro's, I went for the solution where configuration could be changed in a single place.

This ended up being a mixture of jQuery and regular javascript, where I keep an object containing the page#, consolidated task box id, and the linked task box id's for purposes of generating the url for the '/rest/inlinetasks/1/task/109020466/13/' route


For others trying to figure this out:

<script type="text/javascript">   
(function ($) { 
AJS.toInit(function() { 
//format ---- consol item 
//page num 
//linked items 

let links = {"109020466":{"28":["13", "14"]}} 
//links["28"] how to retrieve data from this object 

let firstTable = document.querySelectorAll("table")[0].querySelectorAll("li") 
//going to use this format for now, will need to put the consolidation table at the very top of the page 

let status = "" let URL = "/rest/inlinetasks/1/task/" 
firstTable.forEach((listElement) => { 

listElement.addEventListener('click', e => { 
e.preventDefault()     
let page = listElement.parentElement.dataset["inlineTasksContentId"]     
let consolidatedId = listElement.dataset.inlineTaskId 
let checkFlag = listElement.ariaChecked checkFlag == 'true' ? status = 'UNCHECKED' : status = 'CHECKED';     
let dArr = links[page][consolidatedId] dArr.forEach((task) => { 
let tempDataObj = {
  type: "POST", 
  url: `${URL}${page}/${task}/`, 
  data: JSON.stringify({status: status, trigger: "VIEW_PAGE",}), 
  dataType: "json", contentType: "application/json", timeout: 30000, 
} 

jQuery.ajax(tempDataObj) 
})


//I kept running into problems where the page reload after wouldnt display the latest
//so essentially ended up making this setTimeout to be a synchronous function
//so it has to run after those POST requests
 
setTimeout(() => { 
  location.reload() }, 2500) 
}) 
}) 
}); 
})(AJS.$); 

</script>

[Stiltsoft support]

@Jordan Hauser Thank you for sharing, it may really help other Community members!