Tags: D365FO, Extensible control, Free Edition, X++ 
Wouldnāt it be fantastic if Dynamics 365 Finance and Operations (D365FO) included a feature to copy text to the clipboard with just a button click?
We could do this in previous versions, but since the D365FO client is a web application, we can't do that anymore only using X++.
In this post, we will show how to copy text to the clipboard from a textbox (FormStringControl) or a custom string representation of the whole record or record list from a grid control with a button click.
The problem is also the solution!
In earlier versions of Dynamics AX, this was possible because the client ran on the local machine and had access to the clipboard through the TextBuffer class.
Since the D365FO client is a web application, we can achieve the same result in the browser using HTML and JavaScript and create a new extensible control.
Copying to the clipboard using JavaScript is straightforward, you just need to call this code:
|
1 |
navigator.clipboard.writeText('Text copied!'); |
However, we canāt just do that in D365FO, and several steps are required before we can use this functionality. To implement the copy-to-clipboard functionality, we need to create three components:
- X++ extensible control classes.
- A form and a helper class.
- HTML and JavaScript for the extensible control display.
Extensible control
To build our extensible control, we need two classes. The first one is DocClipboardHelperBuild. In this class, we add the āCopy textā property on the new control. This is shown in the control properties when we add it to a form in Visual Studio:
This property is a key part of the copy to clipboard process, weāll see why later.
The other class is the DocClipboardHelperControl, the run-time class that we use to access the logic and pass the text to copy to the clipboard in the JavaScript code. Letās focus on it for a second.
In this class we define a new form property as a class variable:
|
1 |
private FormProperty copyText; |
Then in the new method we initialize its value:
|
1 2 3 4 5 6 7 8 9 10 |
public void new(FormBuildControl _build, FormRun _formRun) { super(_build, _formRun); this.setTemplateId('DocClipboardHelper'); this.setResourceBundleName('/resources/html/DocClipboardHelper'); copyText = this.addProperty(methodStr(DocClipboardHelperControl, setCopyText), Types::String); } |
This initialization binds the copyText form property to the setCopyText method. It also calls the SetTextJavascript method which is later used in the JavaScript code:
|
1 2 3 4 5 6 7 8 9 10 |
[FormPropertyAttribute(FormPropertyKind::Value, "SetTextJavascript")] private str SetTextJavascript(str _value = copyText.parmValue()) { if (!prmIsDefault(_value)) { copyText.setValueOrBinding(_value); } return copyText.parmValue(); } |
X++ helpers
The helpers are a form (DocClipboardHelper) that contains the extensible control and the DocClipboardHelper class, which has a static method that triggers the X++ logic.
Why do we need the form? We need the control to be loaded every time we want to copy something to the clipboard. If we add the control directly to the form where weāre calling the functionality, it wonāt work.
The form is based on the Box framework and has a self-closing timer control that automatically closes the form after a specified time. Then it also has a text field saying that the copy to clipboard operation has been done and that it will close automatically:
The static method in the class is what we need to call from wherever we want the copy to clipboard functionality to work.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
public static void copyToClipboard(str _textToCopy, str _textToShowInDialog, int _interval = 2) { if (!_textToCopy) { return; } Args args = new Args(); args.name(formstr(DocClipboardHelper)); args.parm(_textToCopy); FormRun formRun = classfactory.formRunClass(args); formRun.init(); TimerControl timerControl = formRun.design().controlName(formControlStr(DocClipboardHelper, SelfClosingTimer)); FormStaticTextControl copiedTextTxt = formRun.design().controlName(formControlStr(DocClipboardHelper, CopiedTextStaticText)); FormStaticTextControl autoCloseTxt = formRun.design().controlName(formControlStr(DocClipboardHelper, WindowAutocloseStaticText)); timerControl.interval(_interval); copiedTextTxt.text(_textToShowInDialog); autoCloseTxt.text(strFmt("@DocentricAX5:WindowAutoclose", _interval)); formRun.run(); formRun.wait(); } |
It takes three parameters:
- _textToCopy: The text we want to put in the clipboard.
- _textToShowInDialog: The text that will be shown on the pop-up to the user.
- _interval: The duration in seconds of the pop-up telling the user that the text has been copied to the clipboard.
Then we do the following:
- Create an Args object by passing the DocClipboardHelper as the name and the text to copy as a parm.
- Get the timer control and two text controls from the form into variables.
- Initialize the variables.
- Run the DocClipboardHelper form.
When the form runs the setCopyText method of the extensible control is called to copy the text to the clipboard.
HTML + JavaScript
And finally, we need two resources to store the HTML and JavaScript code. The DocClipboardHelperHTM HTML file has a reference to the JavaScript script and an empty div with some properties:
|
1 2 3 4 |
<script src="/resources/scripts/DocClipboardHelper.js"></script> <div id="DocClipboardHelper" data-dyn-bind="sizing: { height: $data.Height, width: $data.Width }, visible: $data.Visible"> </div> |
And the DocClipboardHelperJS contains the JavaScript code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
(function () { "use strict"; $dyn.ui.defaults.DocClipboardHelper = {}; // Initialize the DocClipboardHelper control $dyn.controls.DocClipboardHelper = function (data, element) { var self = this; $dyn.ui.Control.apply(self, arguments); $dyn.ui.applyDefaults(self, data, $dyn.ui.defaults.DocClipboardHelper); // The HTML element needs to be in focus to be able to use the copy to clipboard functionality properly. element.focus(); // Triggers the copy to clipboard functionality from the browser. The _data variable contains the text to be copied $dyn.observe(this.SetTextJavascript, function (_data) { if (_data != '') { navigator.clipboard.writeText(_data); } }); } $dyn.controls.DocClipboardHelper.prototype = $dyn.extendPrototype($dyn.ui.Control.prototype, {}); })(); |
In this JavaScript code, we do the following:
- Initialize a DocClipboardHelper control.
- Call the element.focus() method to focus the control. Otherwise, we canāt access the clipboard correctly.
- We call the writeText method on the clipboard and store the data.
But how exactly does the text go from the custom form control to JavaScript? Remember the SetTextJavascript method in our control class? This method is called using the observe method:
|
1 2 3 4 5 |
$dyn.observe(this.SetTextJavascript, function (_data) { if (_data != '') { navigator.clipboard.writeText(_data); } }); |
The observe method lets you watch changes on an element, like when it becomes visible or gets modified.
The complete flow, involving the three types of components, is like this:
- We call the copy to clipboard code in X++.
- The āCopy textā property on the extensible control is set with the value we want to copy when the DocClipboardHelper form opens.
- The observe method detects that the property has changed.
- The text is copied to the clipboard using JavaScript.
Wrapping up
The implementation of the copy text to clipboard functionality in D365FO exemplifies the collaboration between X++, HTML, and JavaScript to adapt to a web-based client. Thanks to this we can bridge the gap caused by the transition from a desktop to a browser-based client. By using extensible controls, we achieved a seamless and reusable method for copying text to the clipboard.