How to restrict right click on an image control in K2 Smart form

This article describes how to restrict right click on an image control in K2 Smart form at run time.

To achieve this we can use jQuery/JavaScript, to bind ‘contextmenu’ event handler which will return false on Image right click in smart form.

Let’s walk through a small example where I have disabled right click on image. Here I have used both image tag and image id as selector to disable the right click.

Image tag will allow us to disable right click on all the images, while Image id will disable right click on a particular image.

Step1: In Your SmartForm Drag and Drop Data Label and Set Literal property as checked.

Step2: Set visible property to False.

Screen2

 

Step3: Now Under Expression property add below Script

  1. To disable right click on All Images on smart form. 
    
    $('img').bind('contextmenu', function(e) {
        return false;
    });
    
    
  2. To disable right click of a particular image on smart form
    Use below sample query to disable right click for particular image.

    
    
    $(“Image css selector path”).bind('contextmenu', function(e) 
       {
        return false;
       });
    

     

     

    To get “Image CSS selector path” refer below steps.

     Access Your Smart form in web page at runtime mode.

    Now access developer options in browser (hit F12), select inspect button and then click on image. Which will show you id as below highlighted.

    FormWithF12

  3.  

    Copy that id and replace in the above script text “Image css selector path”.

    < script >
    $('#00000000-0000-0000-0000-000000000000_eaba1ae9-6753-a2fb-dadf-1a0450e38262_Picture').bind('contextmenu', function(e) 
       { 
           return false; 
        });
    < /script >
    

     

    Now copy this script and add it to expressions property.

    Screen3

Step 4: Once you are done with Changes Save you smart form and access in run time mode.

Advertisements

Author: Vijay

I'm a K2 Certified Developer, helping teams to automate, design, develop & maintain business process applications connecting across multiple platforms with multiple technologies.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s