Hello everyone,
We have a requirement where from the multiple image we should be able drag an image in a box or a container to set it as profile image also a functionality to right click an image and the user must get option to set image as profile image. How do I do this?
Thanks Shlok Agrawal
Hi Shlok Agrawal ,
Did you check below component? I hope it will solve your problem.
https://www.outsystems.com/forge/component-overview/7536/drag-and-drop-in-reactive.
Thanks,
Arif
Hi Shlok,
There are various forge components available to Drag and Drop Images.
For Example https://www.outsystems.com/forge/component-overview/7536/drag-and-drop-in-reactive
Hey Shlok,
I have already encountered the right click functionality. For that you need to follow the below steps
1)Create a client action which will open a pop having "Cancel" and "Save" button. In save logic, Save the image. In my case the name of the client action is "OpenPopUp".
2)Create an "OnReady" event for the screen. Drag and drop a JS node in the flow. Pass one create one input parameter of the JS having type text. Pass the widget id with whom you will do the right click operation. Use the below JS.
document.getElementById($parameters.In1).addEventListener("contextmenu",(e)=>{
e.preventDefault();
$actions.OpenPopUp()
})
3)Make sure to remove the listener on "OnDestroy" Event.
I hope this might help you to achieve right click.
Thanks & Regards,
Sudip Pal