Einen copy to clipboard Button über eine embed Komponente

Beschreibung:

Dropdown Menüs und Datumsfelder lassen sich mit dem Mauscursor nicht kopieren.
Also zweckentfremden wir die embed Komponente mit einem Javascript zum kopieren.

!!!!

Wichtig diese JavaScript Funktion fuktioniert nur auf Webseiten mit HTTPS, unter HTTP wird vom Browser diese Funktion deaktiviert, es gibt dann auch keine Fehlermeldung, es passiert nix!!!!!!!

Durchführung:

Eine embed Komponente an die gewünschte Stelle hinzufügen.

Dann diesen HTML-Code einfügen
!!!WICHTIG bei Text nicht bei Javascript is ja HTML-Code!!!
Die Variable value mit der Variable ersetzten (also zum Beispiel textfeld aus der koiiert werden soll.)

<button onclick="( function() 
{  navigator.clipboard.writeText('{{ value }}').then(function (){alert (' {{ value }} Copied!')}) }
)()">Copy Link</button>

Hier ein Beispiel mit Deustchem Text und echten Variablen

<button onclick="( function() 
{  navigator.clipboard.writeText('{{  Form.Fields.rechnungsadressemeldeadresse  }}').then(function (){alert (' {{ Form.Fields.rechnungsadressemeldeadresse }} in die Zwischenablage kopiert!')}) }
)()">Copy</button>

Hier ein Beispiel wenn ein Datum umformatiert werden soll.
Denn in Budibase wird ein Datumsfeld in diesem Format zurückgegben, wenn es durch keine Komponente wie eine Datumskomponente umformatiert wird : 1981-06-03T00:00:00.000

<button onclick="( function() 
{  
    var value = '{{ value }}'; // Das Originaldatum
    var date = new Date(value); // Erstellen eines neuen Date-Objekts mit dem Wert
    var day = String(date.getDate()).padStart(2, '0'); // Extrahieren und Formatieren des Tages
    var month = String(date.getMonth() + 1).padStart(2, '0'); // Extrahieren und Formatieren des Monats
    var year = date.getFullYear(); // Extrahieren des Jahres

    // Zusammenfügen der Teile in das gewünschte Format
    var formattedDate = day + '.' + month + '.' + year;

    navigator.clipboard.writeText(formattedDate).then(function (){
        alert (formattedDate+' Copied!')
    })
})()">Copy Link</button>

Nun sieht die Rückgabe so aus: