Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

AEM 6.4 Touch UI listener, update rte field and persist as different property

Avatar

Community Advisor

Hi All,

I am following this article - Adobe Experience Manager Help | Using Event Handlers in Adobe Experience Manager Touch UI Components  to create a listener js file and do desired logic when Ok or 'Tick' is clicked. I am able to get within the custom js file after following the steps.

The desired logic is when for a rte component field when ok is clicked, pick the authored content and add desired css and span to it. Save the updated content as a property on the node with updated content as value.

For eg: Richtext component is authored as

<ul>

<li>test1</span></li>

<li>test2</span></li>

<li>test3</span></li>

</ul>

when in JS add desired css and span (which I am almost able to do, but unable to persist the new property on the node..)

The desired output is something like below

   <ul>

<li class="clearfix"><span class="bulletlist floatListIcon"> </span><span class="floatList">test1</span></li>

<li class="clearfix"><span class="bulletlist floatListIcon"> </span><span class="floatList">test2</span></li>

<li class="clearfix"><span class="bulletlist floatListIcon"> </span><span class="floatList">test3</span></li>

</ul>

Below is the js (not working..)

$(document).on("click", ".cq-dialog-submit", function (e) {

    e.stopPropagation();

        e.preventDefault();

        var $form = $(this).closest("form.foundation-form"),

            $richtext = $form.find("[name='./richtext']"),

            $myrt = $richtext.val();

            //$myrt = $.parseHTML($myrt); fails with or without

        console.log($richtext.val());

console.log($myrt);

$myrt.find('li').each(function(index){var $item = $(this),

                    listStyle = 'bulletlist', //ideally get whatever is authored

                    newListItem = '<span class="' + listStyle + ' floatListIcon"> </span><span class="floatList">' + $item.html() + '</span>';

                $item.parent('li').addClass('clearfix').html(newListItem);

                                             });

    //$myrt.setValue($richtext.html());

console.log($myrt.val());  //still prints same without getting updated as per above logic

    console.log($richtext.val());

//Add something here to persist myrt as a property named 'myrt' and vvalue as per above formatting within each fn.

$form.submit()// final submit

    });

Please help regarding 1. getting desired output logic is not retained in $myrt 2. saving a new property myrt as desired output value.

Thanks

Shubham

4 Replies

Avatar

Level 10

Issue here is you are reading an article written for 6.0.  I will ask our Touch UI experts to see if they have an updated article.

Avatar

Community Advisor

True, good point. Despite that I am able to get to my custom js on click of ok which I think is fine.. ? so that I can perform desired logic.

However there might be something fundamentally wrong if I am doing something 6.0 way..

Thanks for reaching out to the TouchUI people..

Regards

Avatar

Level 10

I have reached out again. I will post back ASAP. 

We need to host a new ATCE on this subject - working on that too.