I want to copy the URL which is generated

1
Hi All,  Basically i am working on business survey app where the admin will generate a url or link and they will share url to customers to give a survey.  I am showing the datagrid-2 widget of all the generated link with the person name who is generating everything in a column. i want to copy the generated url of that specific person who has generated link. I tried to add cliptocopyboard widget which is available in mendix market place but it is not allowing me to add this widget inside datagrid2. is there any method so that when i click on the that person atleast i should be able to copy that url
asked
1 answers
0

Hi.

You can use a custom javascript script for this. 

An example copy function in JS:
 

	if (window.clipboardData && window.clipboardData.setData) {
		// Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
		return window.clipboardData.setData("Text", text);

	}
	else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
		var textarea = document.createElement("textarea");
		textarea.textContent = text;
		textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
		document.body.appendChild(textarea);
		textarea.select();
		try {
			return document.execCommand("copy");  // Security exception may be thrown by some browsers.
		}
		catch (ex) {
			console.warn("Copy to clipboard failed.", ex);
			return prompt("Copy to clipboard: Ctrl+C, Enter", text);
		}
		finally {
			document.body.removeChild(textarea);
		}
	}

the “text” variable is the node of the target text.

Next up you will need to add an event listener to the specific column that fires if that column is clicked and fire previous code with the target node of the event as parameter.

If you have multiple pages I recommend using an observer to handle the page/filter/value changes. 

That might look something like this:

let dataGrid = document.querySelector('.datagrid-class'),
    options = {
      childList: true,
      subtree: true
    },
    observer = new MutationObserver(mCallback);

function bindCopyToClipboard(){
  //Get all cells of second column
  let targetTdLi = dataGrid.querySelectorAll("tr td:nth-child(2)");
  [].forEach.call(targetTdLi, function(el) {
    $(el).unbind("click");
    $(el).on("click", function() {
        //previous snippet
        copyToClipboard(el);
    });
  });
}

function mCallback(mutations) {
      setTimeout(function(){ 
        bindCopyToClipboard();
      }, 500);
}

observer.observe(dataGrid, options);
//Initial bind
bindCopyToClipboard();

 

 

While I haven't tested this specific code for your usecase and it might need some modifications, this is a solution that can work.

answered