Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

sites.html console, add another view button for sorted columns

Avatar

Level 7

I found out how to sort the sites.html console Column View by modified date and name (and some other options are available too) from

http://aem-dev.blogspot.com/2016_08_01_archive.html

 

However I wish to allow the user the options of a Column view sorted by modified date AND a Column view sorted by name.

I tried copying /libs/wcm/core/content/sites/jcr:content/views/column to the same place in /apps and changing the name to columnSorted, the jcr:title to "Column View(Sorted by name)" and adding sortDir and  sortName to the datasource.

 

It did show up as an option, but it didn't seem to show the child pages sorted as I expected.

 

Any ideas from anyone on what I'm missing ?

 

thanks

Fiona

 

sort2.png

1 Accepted Solution

Avatar

Correct answer by
Level 7

Thanks Arun,

I figured out that on my "new" view columnSortedMain, I needed to change

the copied src parameter to the new one.

Now my new view (which has the appropriate sortDir and sortName set on the datasource) is good.

src=/mnt/overlay/wcm/core/content/sites/jcr:content/views/columnSortedMain.html

View solution in original post

11 Replies

Avatar

Correct answer by
Level 7

Thanks Arun,

I figured out that on my "new" view columnSortedMain, I needed to change

the copied src parameter to the new one.

Now my new view (which has the appropriate sortDir and sortName set on the datasource) is good.

src=/mnt/overlay/wcm/core/content/sites/jcr:content/views/columnSortedMain.html

Avatar

Level 7

hi Arun,

Do you know where the datasource file that does the sorting is ?

I can't find it.

There is a snippet from the file here.

thanks

Fiona

 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/sort-page-in-alphabatical-...

Avatar

Community Advisor

Hi,

I think the code is moved to Servlet in 6.4 and above, you can decompile the bundle com.adobe.cq.com.adobe.cq.ui.commons and can check the servlet code com.adobe.cq.ui.wcm.commons.internal.servlets.ContentResourcesDataSourceServlet



Arun Patidar

Avatar

Level 7

Thanks Arun, that is great.  Have you ever seen a blog or article on anyone doing a similar thing with the dialog path browser ?

i.e. sorting the folders and images on name or modified date ?

 

thanks

Fiona

Avatar

Level 7

Thanks Arun,

That looks great.

I have it almost working, but my asset picker does not have the selector 

below. Can you give me some other way to identifiy the input element

to which I must assign the selectedItem ?

thanks

Fiona

document.querySelector(SELECTORS.PATHFIELD_SELECTOR).value = selectedItem;

 

' input[aria-controls="asset-selector-launcher-setting"]'

 

Avatar

Community Advisor

Hi,

You can add selectors like

granite:class

granite:id

granite:data

 

Yes below is also a valid selector

'input[aria-controls="asset-selector-launcher-setting"]'


Arun Patidar

Avatar

Level 7

Thanks Arun, I know it is a valid selector but the 6.5.12 AEM (not cloud) that I work on doesn't have any "aria-controls" at all. So I wasn't sure what "input" to put the selected value into. I put it into the original "input" of the dialog for the field, but although this does get stored in the JCR, it doesn't appear on the picker field itself.

So even though I have selected an image and even though it is stored, I see a blank in the screenshot.

arun.png

Avatar

Level 7
var name = document.getElementById('assetpickerpath').getAttribute('name');
document.querySelector('#assetpickerpath input[name="' + name + '"]').value = selectedItem;
document.querySelector('#assetpickerpath input.coral-InputGroup-input').value = selectedItem;

In the end I got it to work by setting two different "input" elements' values to the selected item. #assetpickerpath was a granite:id I set in the dialog xml.

Avatar

Level 7
This one is good for multiple asset selectors in the one dialog

(function(document, $) {
"use strict";

var nameOfAssetPickerField = ""

// listen for click on pathbrowser
$(document).on("click", ".pathfield__asset--selector button.coral3-Button", function(e) {
nameOfAssetPickerField = $(this).parents('foundation-autocomplete').attr('name');
});

// listen for click on asset picker
$(document).on("click", 'form.granite-pickerdialog-content button.asset-picker-done', function () {

var selectedItem = $('.foundation-selections-item.is-selected').attr('data-foundation-collection-item-id');
document.querySelector('foundation-autocomplete[name="' + nameOfAssetPickerField + '"]').value = selectedItem;
document.querySelector('foundation-autocomplete[name="' + nameOfAssetPickerField + '"] input.coral-InputGroup-input').value = selectedItem;

//closing popup by cancel button click
document.querySelector(' button.asset-picker-clear').click();
});


})(document,Granite.$);