667
Like
Share
ReportUser case
I was thinking about a user support management in Business Central. The early stage in the support workflow is picking information about the customer error or question. And very often we receive or do a screen shot to describe the error. Could be interesting to store this screen shot in the database to later checking and answer again the same question. It is going to be a support knowledge database. To avoid too many operations from the support person (press print screen key, create a file with some tool like Paint and import to a Media record) I created an add-in to build a faster system to catch the clipboard and store its content in Business Central directly. They only need to push the Print-screen key and paste in the "Focus this tab and press" rectangle with Control + V, and the image uploads instantly to BC:
Listening to clipboard
The Add-in works this way: When the user press CTRL+V over the add-in control, the add-in catches the paste event and send the content of the clipboard to Business Central. Business Central receive the image in Base 64 encoding, converts it in Stream and store the image in a media set table field. The add-in code is the ScreenShot.js. The key parts of the script are these:
Declaring a canvas Html object:
document.write('<body><p>Focus this tab and press <kbd>CTRL</kbd> + <kbd>V</kbd>');
document.write('<canvas style='border:1px solid grey;' id='mycanvas'>');
After drawing the control, we active the paste event listening:
window.addEventListener("paste", function(e){
retrieveImageFromClipboardAsBlob(e, function SendToNAV(imageBlob){
if(imageBlob){
var reader = new FileReader();
reader.onload = function () {
var Base64Text = reader.result.replace(/^data:.+;base64,/, '');
Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('PasteScreenShot', [Base64Text]);
};
reader.readAsDataURL(imageBlob);
}
});
}, false);
We call another function “retrieveImageFromClipboardAsBlob”, that I will not break down, because is this kind of code you can find in all over the web already done. Is one of the strengths of JavaScript, you can find a lot of code for forever you want. You have all the complete code in my repo.
One interesting stuff in my opinion is call a function with another function as parameter: we call “retrieveImageFromClipboardAsBlob” with my function “SendToNAV” as parameter. We pass the function that will process the result of clipboard retrieving.
The other very interesting stuff is the callback to NAV with the invoke extensibility method, to call NAV for image processing. This is the invoked NAV/BC code in a Page:
usercontrol(ScreenShot; "Screen Shot")
{
ApplicationArea = All;
Visible = true;
trigger PasteScreenShot(PhotoText: Text)
var
OutStream: OutStream;
InStream: InStream;
Base64Conv: Codeunit "Base64 Convert";
TempBlob: Codeunit "Temp Blob";
begin
Clear(image);
TempBlob.CreateOutStream(OutStream);
Base64Conv.FromBase64(PhotoText, OutStream);
TempBlob.CreateInStream(InStream);
Image.ImportStream(InStream, '');
Modify(true);
end;
Base 64
And last but not least, the base 64 using. Base 64 is a great thing: allows us to exchange all kind of information formats between systems. In this example we catch a blob and encoded it in base 64. When the data is in base 64 is a text type, but we have all the information to re-build the whole binary object. That is the only solution to exchange binary information between so different systems, as JavaScript with Business Central.
When the information comes to NAV in a base 64 text, we have a Codeunit called “Base 64 Convert”, to convert this string in binary again, and there will be saved in a blob type field.
All the code in repo https://github.com/JalmarazMartn/ClipboardToBC/new/master
*This post is locked for comments