Customize Touch UI dialog for Image Component

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

 Image Touch UI Dialog

This also helps in understanding

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

Let's 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

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
2. file upload
3. Navigate back to your image component and paste the folder under the Image component node.

Open the fileupload.jsp in CRXDE

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

// show drop target when disabled  

if(cfg.get("disabled", false)){ 

 fieldAttrs.addClass("is-active"); 

}

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

//hide button when button is disabled 

if(cfg.get("disabled", false)){ 

buttonAttrs.add("style","display:none;"); 

}

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
2. /apps/<your-app>/components/content/image/cq:dialog/content/items/image/items/column/items/file
3. Add the property
4. sling:resourceType=”/apps/<your-app>/components/image/form/fileupload”

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