Copy to clipborad when image clicked

0
Can I use microflows to copy an attribute value to the clipboard? I have an image that should be clickable and when it is clicked an attribute should be copied to clipboard. is this possible through microflows ?
asked
2 answers
4

Hi Mouhanad,

 

You can create a nanoflow with a javascript action for this.

Just create a new JavaScript action with a string input parameter, and use this code:

export async function CopyString(copyString) {
	// BEGIN USER CODE
	try {
		await navigator.clipboard.writeText(copyString);
	} catch (err) {
		console.error('Failed to copy: ', err);
	}
	// END USER CODE
}

Then in your nanoflow you can pass whatever you want to copy to clipboard to the javascript action

answered
0

No, but it should be possible using a nanoflow calling a javascript function. I used this code snippet that I found somewhere. Put it in a javascript action and call that from a nanoflow, and put the text you want copied in the textToCopy parameter. If you’re doing this in a native mobile app, there are clipboard actions in the Native Mobile Resources module.

const el = document.createElement("textarea");
el.value = textToCopy;
el.setAttribute("readonly", "");
el.style.position = "absolute";
el.style.left = "-9999px";
document.body.appendChild(el);
el.select();
document.execCommand("copy");
document.body.removeChild(el);

 

answered
0

what you intend to do is something that happens on the CLIENT side on the browser and not in the App Server. So i think directly it is not possible.
 

 

1 thing you can try is: have your mendix application running in the browser, then go the browsers Developer Console where you can write Javascript.
once there, locate the ID of the img html tag rendered on the website.
 

var copyText = document.getElementById("<id of the HTML element>"); 

  // Select the text field -- here i am assuming a input type="text" element.
  copyText.select(); 
  // navigator object is part of the Javascript APIs that gets loaded in the browser
  navigator.clipboard.writeText(copyText.value);
  
  // Alert the copied text
  alert("Copied the text: " + copyText.value);

You can already tell this is going the Widget way :) 

However since pluggable widgets can trigger a microflow, on the plugin properties you can take in a MF and then trigger it when the click on the image happens.

Let me know if i got your question right :)

answered