AEM - Refre sh источник данных после изменения гранитного поля - PullRequest
Новая
       31

AEM - Refre sh источник данных после изменения гранитного поля

0 голосов
/ 03 августа 2020

Я пытаюсь выяснить, как обновить sh гранитный источник данных для поля выбора из поля пути, которое я хотел бы также передать в источник данных.

В основном:

  1. Задайте путь (pathToOptions), который будет смотреть на модель фрагмента содержимого.

  2. Источник данных вызывается каждый раз, когда значение пути изменяется в диалоговом окне, на Sling Servlet для получения всех полей фрагмента содержимого

  3. Диалог автора генерирует параметры для раскрывающегося списка выбора гранита (cfOptions) с полями из источника данных. 

     <pathToOptions jcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
     fieldLabel="CF Path"
     rootPath="/content"
     name="./pathToOptions"/>
 <cfOptions jcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/coral/foundation/form/select"
     fieldLabel="CF Options"
     name="./cfOptions">
     <datasource jcr:primaryType="nt:unstructured"
         sling:resourceType="/bin/path/to/servlet"/>
 </resProperties>

(имена и пути переменных являются общими c)

Без особых знаний об источниках данных AEM Granite и Apache Sling API; есть ли жизнеспособный метод с источником данных, или мне нужно полагаться на AJAX. Если второе, я отправлю дополнительный вопрос.

1 Ответ

0 голосов
/ 05 августа 2020

После небольшого исследования; оказывается, что это невозможно сделать с источником данных, вместо этого используйте AJAX ($.ajax()) для связи с Sling Servlet для достижения необходимой функциональности.

https://helpx.adobe.com/experience-manager/using/creating-touchui-dynamic.html

Я использовал эту документацию в качестве основы для выполнения функциональных возможностей, но с учетом моих спецификаций. 

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

    var LANGUAGE = "./language", COUNTRY = "./country";

    function adjustLayoutHeight(){
        $(".coral-FixedColumn-column").css("height", "20rem");
    }
 
    $document.on("dialog-ready", function() {
        adjustLayoutHeight();
     
        // Getting reference of language drop down field
        var language = $("[name='" + LANGUAGE +"']").closest(".coral-Select")
     
        // Initializing country drop down field
        var country = new CUI.Select({
            element: $("[name='" + COUNTRY +"']").closest(".coral-Select")
        });
     
        if(_.isEmpty(country) || _.isEmpty(language)){
            return;
        }
     
        var langCountries = {};
     
        country._selectList.children().not("[role='option']").remove();
     
        function fillCountries(selectedLang, selectedCountry){

            var x = $("[name='./country']").closest(".coral- Select").find('option').remove().end();
            _.each(langCountries, function(value, lang) {

                if( (lang.indexOf(selectedLang) !== 0) || (value.country == "*") ){
                    return;
                }

                var test2 = $("[name='./country']")[0];

                $("<option>").appendTo(test2).val(lang).html(value.country);

            });

            country = new CUI.Select({
                element: $("[name='" + COUNTRY +"']").closest(".coral-Select")
            });
         
         
            if(!_.isEmpty(selectedCountry)){             
                country.setValue(selectedCountry);     
            }
         
        }
     
        //listener on language select for dynamically filling the countries on language select
        language.on('selected.select', function(event){
            console.log(event);
            fillCountries(event.selected);
        });
     
        // Get the languages list from the source
        $.getJSON("/libs/wcm/core/resources/languages.2.json").done(function(data){
            langCountries = data;
         
            var $form = country.$element.closest("form");
         
            //get the second select box (country) saved value
            $.getJSON($form.attr("action") + ".json").done(function(data){
                if(_.isEmpty(data)){
                    return;
                }

                // Passing values to populate countries list
                fillCountries(language.val(), data.country);
            })
        });
    });
})($, $(document));

Этот фрагмент взят из статьи. Применял только на тот случай, если ссылка пропадет. Я видел множество сообщений на форуме Adobe, содержащих 404 ссылки, так что это добавлено в качестве меры предосторожности для использования в будущем.

...