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

Avatar

Avatar

snbaem

Avatar

snbaem

snbaem

21-12-2018

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

Replies

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

21-12-2018

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

Avatar

snbaem

Avatar

snbaem

snbaem

21-12-2018

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

Avatar

snbaem

Avatar

snbaem

snbaem

24-01-2019

Hello smacdonald2008​,

Any response from the TouchUI experts?

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

24-01-2019

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

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