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

[fionas76543059]

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

[arunpatidar]

Hi,

Can you check this if helps

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

[fionas76543059 · Accepted solution]

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

[fionas76543059]

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-...

[arunpatidar]

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

[fionas76543059]

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

[arunpatidar]

Hi,

I m not sure, but I have written a blog for asset picker here

https://aemlab.blogspot.com/2022/07/aemaacs-authoring-asset-selector-in-dialog.html 

[fionas76543059]

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"]'

[arunpatidar]

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"]'

[fionas76543059]

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.

[fionas76543059]

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.

[fionas76543059]

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.$);