Expand my Community achievements bar.

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.