Click to Full Select Output Text or Table Cell Value

Follow

In some scenarios of "Swivel Chair" the users would need to select values presented on Coachs and copy/paste them to other systems. In these cases the values can be masked and with complex formats and this turns the value section harder to do.

To facilitate these cases a custom Coach View can be created to allow the value selection with just one click. To achieve this the Output Text fields or the Table that we need to enable this functionality will require a specific "Control Id".

On the custom Coach View we add the function to select the value on click. This function can also be added in a general utils JavaScript file to be used by other Coach Views.

function selectOnClick(){

    var range = document.createRange();

    range.selectNodeContents(this);

    var selection = window.getSelection();

    selection.removeAllRanges();

    selection.addRange(range);

}

On the Coach View Load Event function we add the code to attach the event listener in each control that we want.

For example for the PostCodeOutput control (Output Text), on the load we add

 

//$("div[data-viewid*='CONTROL_ID'] .outputValue").on("click", selectOnClick);

$("div[data-viewid*='PostalCodeOutput'] .outputValue").on("click", selectOnClick);

 

If we need to do it in a table the snippet is a little bit different, since the table can contains N cells.

 

//$("table[id^='CONTROL_ID']").on("click", "tr td", selectOnClick);

$("table[id^='TableOfRecords']").on("click", "tr td", selectOnClick);

 

In this case we select the table and then we attach the event listener on each cell of the table because the controls inside the table have a dynamic control id.

After that we just need to add the custom Coach View at the bottom of the Coach and when the user clicks in one of the configured controls the value will be selected and ready to copy/paste.

 

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk