Power Platform Community Forum Thread Details

Easy Question hopefully

I have a gallery that filters based one what you put in Text Input 1, when the search results appear in the gallery i'd like to use the Tick icon to copy the text from that section of the gallery to a label below. Hopefully I've explained it ok. In this scenario i want the press the tick and the words HVAC Terminal unit VRV is copied to the label below.

Categories:

Design & build

Hi,

To achieve the functionality where text is copied upon clicking a tick button or icon, you can use custom JavaScript on the web page containing the gallery.
Here are the steps to implement this:

Navigate to Design Studio:
- Open Power Pages Design Studio.
- Select the Web Page where the gallery is located.
- Go to Edit Code > JS.
Code Implementation:
- Insert the following code, making sure to update the element selectors as needed.
- Add a CSS class to style the tick button or icon as desired.
Code:

$(document).ready(function() {
    // Event listener for tick button clicks
    $('.btnTick').on('click', function() {
        // Get the text of the label in the same row
        var textToCopy = $(this).siblings('.text-label').text();

        // Create a temporary input element to hold the text for copying
        var $tempInput = $('<input>');
        $('body').append($tempInput);
        $tempInput.val(textToCopy).select();

        // Copy the text to the clipboard
        document.execCommand('copy');

        // Remove the temporary input element
        $tempInput.remove();

        // Optional: Show a message or change button style to indicate success
        $(this).text('Copied!');
        setTimeout(() => $(this).text('✔️'), 1000);
    });
});

Note: Update the CSS class of the tick button as well as any necessary HTML elements in the code to match your specific setup.

Hope this helps.

Thanks!

Inogic Professional Services: Power Platform/Dynamics 365 CRM
An expert technical extension for your techno-functional business needs
Drop an email at crm@inogic.com
Service: https://www.inogic.com/services/
Tips and Tricks: https://www.inogic.com/blog/

Quick Links

Subscribe to this forum!