Intro
I’ve written before about using the WebPageViewer control add-in to add a little zest et je ne sais quoi to your BC pages. You can set html content like this or use JavaScript to neatly format JSON like this.
Obviously, you have more control over how your page looks and behaves if you write your own control add-in, but for smaller jobs where you just need a little sprinkling of HTML and (your favourite programming language and mine) JavaScript then the WebPageViewer might be just fine.
Clipboard
This time I wanted to access the clipboard. We’re generating a URL that we want users to be able to send. Sure, you can pop the URL into a message and ask the user to copy it – but what if they don’t select the whole link? It’s just not cool.
“Wouldn’t it be nice if we could show the user a little “Copy” button and write the link straight to the clipboard?” (…is not something that The Beach Boys sang about in the 60s but no doubt would have done if Business Central had been around at the time).
Add the content that you want to copy to some HTML control (I’m using a textarea in this case) and add a button which calls a function onclick to copy the text. For some extra UX goodness I’ve added an eventListener to the click event which changes the button’s value to “Copied” and changes the background colo(u)r to a Business Central teal to match the OK button of the page (the page type is StandardDialog).
The interesting bit of the code looks like this (also on GitHub here: https://github.com/jimmymcp/bc-clipboard):
local procedure SetContent()
var
HTML, JS : Text;
begin
HTML := @'<textarea id="textToCopy" cols="50" rows="5" style="font-family: Segoe UI;">This is some sample text...
...and here is some more
</textarea>
<input type="button" value="Copy" onclick="copyToClipboard()" id="copyButton" style="vertical-align: top;" />';
JS := @'document.getElementById("copyButton").addEventListener("click", () => {
let copyButton = document.getElementById("copyButton");
copyButton.value = "Copied";
copyButton.style.backgroundColor = "#007E87";
copyButton.style.color = "white"
});
function copyToClipboard() {
let copyText = document.getElementById("textToCopy");
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(copyText.value);
}';
CurrPage.WebPageViewer.SetContent(HTML, JS);
end;Insecure Origins Treated as Secure
If you are testing this in a web client you access over http e.g. you likely access a local Docker container without SSL then you will find that this doesn’t work. No obvious error, it just fails to write to the clipboard.
Pop open the browser developer tools and you will see this in the console.
That is because by default the clipboard is not available to sites which are served over http. You can override that behaviour per site with a browser flag.
Open up chrome://flags, edge://flags or however you access your preferred Chromium-based browser flags (I haven’t tested in Firefox, Safari or anything non-Chromium) and search for “Insecure origins treated as secure”. Enable that setting and enter the URL that you access the web client at.
It won’t be necessary to do the same when the web client is served over https.
James Pearson 