Moving AEM Touch UI pages based on path on page properties

Question

We are given a requirement such that the page should be moved to a location based on the path provided at the page properties.

How to implement that in Touch UI? In Classic UI we can use edit config and may use listeners and write respective JS code on that.Correct me if I am wrong.

Answer 1

Your question alludes to wanting to use JavaScript to move the page. I've put together an example using the Touch UI dialog. It works, but would require polish to validate user input and prevent string manipulation errors.

In this example, I'm using the dialog-success event that triggers after a dialog is saved. See Touch UI Events . I check to see if the textfield with the CSS selector is populated, and if it is, I post back to the Sling Post Servlet using the @MoveFrom suffix to move the node and its children (the page and the jcr:content, etc...). If that operation is successful, navigate the user to the new page.

In your dialog, add a textfield and give it a unique class name:

<movePage
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/textfield"
    fieldLabel="Move page to:"
    class="move-page"/>

Then add this JavaScript to a ClientLib used only in authoring mode such as cq.authoring.editor :

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

    $document.on("dialog-success", function(e) {
        var newPath,
            lastSlash,
            moveFromSuffix,
            newDirectory,
            currentPath,
            data;

        e.stopImmediatePropagation();

        newPath = $('.move-page').val();

        if (newPath) {
            lastSlash = newPath.lastIndexOf('/');
            moveFromSuffix = newPath.substring(lastSlash + 1) + Granite.Sling.MOVE_SUFFIX;
            newDirectory = newPath.substring(0, lastSlash);
            currentPath = Granite.HTTP.getPath().replace('/editor.html', '');
            data = {};
            data[moveFromSuffix] = currentPath;

          $.post(newDirectory, data)
              .done(function(){
                  window.location = '/editor.html' + newPath + '.html';
              })
              .fail(function(){
                  $(window).adaptTo('foundation-ui').alert('Alert', 'Could not move page');
              });
        }
    });
})($, $(document));

However, another option would be to do it server side by implementing a custom Sling Post Processor .