Sorting order of child pages in Confluence

Sujata March 9, 2016

I am creating the minute minutes in confluence everyday.

I prefix the title with the current date.

It lists all the meeting pages in an ascending order under the parent page. For example, today's meeting page will be at the end of the list.

How do I change order of the children under this page in descending order so I get the today's meeting page on the top of the list?

5 answers

1 accepted

8 votes
Answer accepted
NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 9, 2016

https://confluence.atlassian.com/doc/move-and-reorder-pages-146407727.html

Reorder pages within a space

You can change the location of a page within its space, and reorder pages in the hierarchy. This allows you to:

  • Move a single page, or a family of pages, to a different parent within the space.
  • Reorder pages that are children of the same parent.

All links to the page are maintained. When you move a parent page, the entire hierarchy of child pages will move too.

To move or reorder a page:

  1. Go to the space and choose Space tools > Reorder pages from the bottom of the sidebar
  2. Expand the branches to locate the page you want to move
  3. Drag the page to a new position in the tree

If you're using the Documentation theme go to Browse > Pages > Tree and then drag the pages to a new position as above.

Alternatively, you can choose to order a group of child pages alphabetically by choosing the Sort Alphabetically (A-Z) icon. The Sort Alphabetically (A-Z) icon only appears next to the parent page if the page family is currently sorted manually.

If you change your mind, you can use the Undo Sorting icon to revert back to the previous manual page order. This option is only available immediately after sorting the page, while you're still on the Reorder Pages tab, and haven't performed any other action.

Sujata March 9, 2016

Thank you, I am aware about the reorder pages, I dont want to reorder manually because I will have to do this manually on a daily basis. I want to auto sort this in descending order. 

 

Like # people like this
NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 9, 2016

Simple way to do this would be to start the page name with a date value and adjust the sort order to descend.

Sujata March 9, 2016

Yes, the page name is started with the date already, I have been doing this from jan 15th on a daily basis, so you can imagine how many pages I have.

i dont know how to sort in descend.

 

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 9, 2016

You can use the page tree macro to give you the list of pages, the use the Reverse Order option:

https://confluence.atlassian.com/doc/page-tree-macro-163414255.html

Reverse Order
(reverse

false

Select to show the pages in reverse (descending) natural order. Must be used in combination with the Sort Pages By parameter.

Like # people like this
Sujata March 9, 2016

I already have a page tree on the left nav and lots of sub folders pages and child pages. The sorting I am looking for is under the page tree in the left nav. This is where i need the sorting option & I dont see anywhere. 

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 9, 2016

I am looking into how to do this on the sidebar.

Like Michael Goll likes this
Sujata March 9, 2016

Thank you, appreciate your help.

 

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 9, 2016

Found it, you can do it in CSS.

Within your space admin, Navigate to the Look and Feel, then Stylesheet. Once there, edit the Space Stylesheet and insert the follow CSS:

.plugin_pagetree_children_list{
 display:flex;
	flex-direction:column-reverse;
}

The above should reverse sort the pages.

Sujata March 9, 2016

Great, thanks Stephen, where do I specify the parent name int he code because I want just the meeting children to be sorted in reverse.

Sujata March 9, 2016

I tried this and it didnt work

.plugin_Daily Standup Meeting Notes_children_list{
display:flex;
flex-direction:column-reverse;
}

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 9, 2016

Can you please upload a screenshot of what you are wanting to change so I may attempt to re-create and test? This will allow me to view and discover the elements in questions.

Thanks!

Sujata March 10, 2016

 

Please take a look at the screen shot below, this is my sidebar, it has other stuff under page tree that I dont want to sort but I want to sort the children under the "Daily standup meeting notes" in descending order so the latest meeting show on the top and not the meeting from Jan 12th. I do not want to change the order of the other pages that I have under the page tree except for Daily standup meeting notes. Thanks.

Capture.PNG

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

Ok, perfect. Testing what you need now.

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

Ok, this should work. (At least it works in my test environment.)

You will need to inspect the element of your list, look for the UL listing (The UL listing will be a child the DIV for the list itself) and use that for the list, 

Use the ID listed in the UL, example:

<ul class="plugin_pagetree_children_list" id="child_ul1234-0">
 
Use the ID, such as
#child_ul1234-0

 

Here is the CSS code:

ul#child_ul1234-0{
display:flex;
flex-direction:column-reverse;
}
Sujata March 10, 2016

Sorry, I dont understand what a UL listing or DIV means and where to find the ids. Can you give me direction how to find the id?

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

(Assuming you are using Chrome)

  1. Open the page in question and expand the list in question
  2. Right click on the list parent page and select "Inspect" 
  3. An element inspector should appear within your browser
  4. The The parent page you click on should be highlight within the element inspector
  5. There should be a an arrow to the left of the parent list, you will need to click on that arrow
  6. Under the parent, once expanded, you should see a line similar to this:
    1. <ul class="plugin_pagetree_children_list" id="child_ul1234-0">
  7. What you need to grab out of that line is the id at the end, which is your child list you are wanting to reverse sort.
  8. Once you have the id, edit the CSS code above to reflect the id from your element.

Example screen shot:

image2016-3-10 9:51:23.png

Sujata March 10, 2016

Thank you for patiently explaining this to me, greatly appreciate it. I cannot find anything that has the tag "plugin_pagetree_children_list" in the code. I looked in the parent and the child code.

 

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

Are you inspecting the element or vising the source code?

Can you inspect the element of the parent page, expand a few child elements and post a screen shot of it (don't copy and paste the text, it will script our items.)

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

in IE, it will look like this:

image2016-3-10 10:32:25.png

Sujata March 10, 2016

I am using chrome. Yes, i tried both inspecting the element and visiting source code. Here is a snippet from the inspecting...

Capture.PNG

 

 

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

Perfect, you are almost there. You need to expand a few more:

From <div class="ia-splitter-left">, expand out to the following:

image2016-3-10 10:56:42.png

Sujata March 10, 2016

Couldnt find the lines after tipsy-enabled...

Capture.PNG

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

Well, there would be an option to do a screen share to further look into the issue. I do know the CSS works on my end, but unsure as to why you can't see all of the elements.

Sujata March 10, 2016

Thank you Stephen for patiently going over this with me. It is strange why I dont see the same options. Unfortunately, I will not be able to share the screen. Thank you so much for all your help in trying to resolve this for me. 

 

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

Ok, I found the issue. You are clicking on the Page and then going into inspect element. I need you to click on the Page Tree link itself on the left, and then select inspect element. I was just able to re-create your element view on my end, sadly, you're in the wrong place when inspecting.

Sujata March 10, 2016

Coincidently, I realized as soon as I sent you the message and I guess while you were typing, I was already updating the stylesheet smile. So, now I have updated and saved but the sort order didnt change, am i supposed to logout and log back in?

ul#children362767-0{
display:flex;
flex-direction:column-reverse;
}

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

Please copy and paste your code and your stylesheet view so I can ensure you have it setup properly.

Thanks!

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

Try this:

ul#child_ul362767-0{
display:flex;
flex-direction:column-reverse;
}

Sujata March 10, 2016

image2016-3-10 13:56:14.png

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

You are almost there, you just need to go one more element deeper.

However, I have enough to go off of. Try this within your stylesheet:

 

ul#child_ul362767-0{
display:flex;
flex-direction:column-reverse;
}

Sujata March 10, 2016

ok, it worked but it sorted everything under the page tree (which didnt want) not just the Daily standup meeting notes, which is what I want.

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

You will have to find that element child and then put it within the CSS Stylesheet. Each page and instance will have a unique child_id which I can't know without inspecting the elements. The good news is it worked, but its not at the right level yet.

Sujata March 10, 2016

I went to that particular page and got the id and tried using that id, it didnt work

Sujata March 10, 2016

This is the id for the daily meeting notes page

<div id="children71794717-0" class="plugin_pagetree_children_container">
</div>

 

ul#children71794717-0{
display:flex;
flex-direction:column-reverse;
}

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

It needs to be in this format:

ul#child_ul71794717-0{
display:flex;
flex-direction:column-reverse;
}

Sujata March 10, 2016

YES..it worked finally! It works like a charm. Thank you so much for being so patient. You will be my contact for any issue I face in confluence:). I have never come across anyone who would have so much patience as you to make it work! Thanks again, greatly appreciate it!

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 10, 2016

Glad it worked for you. It was a learning experience for both of us.

If you would please, accept this thread as the answer so this may help others in the future attempting to do what you have done.

Thanks!

Sujata March 10, 2016

I accepted it, thank again!

Deleted user September 11, 2017

I'm wondering whether confluence has changed its UI recently, as I'm not able to edit the css in the Look and Feel section. Any advice on how I can solve this exact problem? Thanks!

Naim Larbi October 10, 2018

What is the A-Z sorting button doing there if we need to program this in CSS? I am really lost...

Naim Larbi October 10, 2018

I am reading:

Alternatively, you can choose to order a group of child pages alphabetically by choosing the Sort Alphabetically (A-Z) icon. The Sort Alphabetically (A-Z) icon only appears next to the parent page if the page family is currently sorted manually.

Why does it only appear the page family is currently sorted manually? If the page is already sorted, i don't need the A-Z icon, right?

Like # people like this
Nikki Anderson November 6, 2019

I closely read and followed this 2016 conversation between "abc" and "NotTheRealStephen..." and was able to solve the same exact issue. THANK YOU very much! This thread is priceless. But what is annoying that this isn't a simple button-feature on Confluence still. lol

Like Sven Schmid likes this
Kajsa July 6, 2020

I was just going to try this in my spaces but there is no Stylesheet in my Look and Feel section, only for PDF exportsScreenshot_2020-07-06_14-43-21.png

Luis Jorge Contreras June 15, 2021

The missing step is this:  You have to click and drag one link in the group to another spot, then the Sort Alphabetically (A-Z) icon will appear. 

marcosxsilva June 15, 2021

This is related to "side bar", not a page list... 

Add option for descending sort page tree in the sidebar for alphabetical in revert order (Z-A)

4 votes
Andreas Immler November 23, 2018

Please vote feature request for this use case: CONFSERVER-57562

1 vote
marcosxsilva November 9, 2019

Atlassian should allow the user (space admin) to choose the sorting option in tree menu in Reorder Page.

This request was done several years ago and until now this feature was not implemented.

Remark: The only option is to request to server admin to add a hacking code to CSS template, affecting everybody... This is not a real solution! Every space or page subtree has its own needs.

1 vote
丘麗娟 November 23, 2017

Hi Stephen,

After expanding the parent of the Page Link Tree of myDaily Meetings,  I could not find a line similar to this:

  1. <ul class="plugin_pagetree_children_list" id="child_ul1234-0">

Did I not look into the right place?

Thank you in advance for your kind assistance.

Cheers,

Christie

Inspect element of Daily Meetings parent page.png

NotTheRealStephenSifersNOPENOPENOPENOPE
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
May 25, 2018

This was from back in 2016, since then confluence has gone through multiple updates. I would suggest posting a new question in regards to this so it can be looked at through newer versions.

Like Nana Wauters likes this
0 votes
Yukyoung Yang April 12, 2022

inserting the following code worked for me

 

ul#child_ulXXXXXX-X.plugin_pagetree_children_list{
display:flex;
flex-direction:column-reverse;
}

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events