Customize Touch UI

Customize Touch UI dialog for Image Component

 

This article talks about disabling the ‘File Upload’ option for the image component in Touch UI dialog (screenshot shown below).

Touch UI Dialog
Image Touch UI Dialog

This also helps in understanding

  1. Customizing the Touch UI dialog
  2. Inheriting the foundation component

Lets follow the below steps:

  1. Create a custom image component under /apps/<your-app>/components/
  2. Add a property sling:resourceSuperType = wcm/foundation/components/image to inherit the OOB image component properties
  3. copy and page the cq:dialog node from ‘libs/wcm/foundation/components/image’ under your image component node. (override the TouchUI dialog)
Image Component
Image Component
  1. add a property disabled Boolean value of true for a node cq:dialog/content/items/image/items/column/items/file – This will disable the file upload option in the dialog.

Till now what we have done is to disable the upload button but however authors can drag and drop an image from the sidebar which is not evident. Now lets make UI a little more intuitive by making the area they can drop target visible.

  1. In CRXDE Lite navigate to /libs/granite/ui/components/foundation/form/fileupload and copy the folder
File Upload
File Upload
  1. Navigate back to your image component and paste the folder under image component node.

Open the fileupload.jsp in CRXDE

After fieldAttrs.addClass(“coral-Form-field”); (line #239) add this

What this will do is automatically add the “is-active” css class to the for sale levitra drop target input for the file upload. This in turn displays the target that you see when dragging an image from the Asset Finder.

After buttonAttrs.addClass(“coral-FileUpload-trigger coral-Button”); (line #252) add this

This will hide the disabled Upload Image button so there is no confusion why the button is disabled.

Now we have to update your dialog to use our new form for the fileupload.

  1. Navigate to your file node
    • /apps/<your-app>/components/content/image/cq:dialog/content/items/image/items/column/items/file
  2. Add the property
    • sling:resourceType=”/apps/<your-app>/components/image/form/fileupload”

Now you can drop your image component on the page and see your new dialog.

One thought on “Customize Touch UI dialog for Image Component

Leave a Reply

Your email address will not be published. Required fields are marked *