Drag and drop functionality in NAV/BC

AlexeyShamin · 2021-12-14

Hi all
We have developed a function Drag&Drop on NAV standard fuctionality. You can find the code below:
1. On a page on the field choose attribute Control addin - WebPageViewer
2. This Control addin allows to display websites through the function SetContent. This function could have 2 parameters - HTML Code and Script on JavaScript language
3. HTML page code (PageTxt variable):

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #drop-area {
            border: 2px dashed #ccc;
            border-radius: 20px;
            font-family: sans-serif;
            margin: 10px auto;
            padding: 20px;
        }
        #drop-area.highlight { 
            border-color: purple; 
            opacity: 1; 
        } 
        p { 
            margin-top: 0; 
            text-align: center; 
        } 
        .my-form { 
            margin-bottom: 10px; 
        } 
        #fileElem { 
            display: none; 
        } 
    </style> 
</head> 
<body>
    
<div id="drop-area">
    <form class="my-form">
        <p>Drag Image Here</p>
        <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)"> 
    </form> 
    
</div>

4. this is input field for our files. When we drop files here page call function handleFiles on JS Script:

<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">

5. Script (ScriptTxt variable):

let dropArea = document.getElementById(''drop-area'');
        dropArea.addEventListener(''dragenter'', highlight, false);
        dropArea.addEventListener(''dragover'', highlight, false);
        dropArea.addEventListener(''dragleave'', unhighlight, false);
        dropArea.addEventListener(''drop'', unhighlight, false);
        dropArea.addEventListener(''dragenter'', preventDefaults, false);
        dropArea.addEventListener(''dragover'', preventDefaults, false);
        dropArea.addEventListener(''dragleave'', preventDefaults, false);
        dropArea.addEventListener(''drop'', preventDefaults, false);
        function preventDefaults (e) {
            e.preventDefault();
            e.stopPropagation();
        };
        function highlight(e) {
            dropArea.classList.add(''highlight'')
        }; 
        function unhighlight(e) { 
            dropArea.classList.remove(''highlight'')
        };
        dropArea.addEventListener(''drop'', handleDrop, false);
        function handleDrop(e) {
            let file = e.dataTransfer.files[0];
            reader = new FileReader();
            reader.onload = function (event) {
window.parent.WebPageViewerHelper.TriggerCallback(file.name + ''$$'' + event.target.result.split('','')[1])
            };
            reader.readAsDataURL(file);
        }

In function handleDrop we call window.parent.WebPageViewerHelper.TriggerCallback – the callback trigger in NAV and send filename, delimiter ($$) and file as Base64 text to the NAV

6. In NAV on trigger ControlAddInReady we call

CurrPage.PictureViewer.SetContent(PageTxt, scriptTxt)

and send our HTML and Script to the WebPageViewer AddIn
7. On Callback(data : Text) trigger we put code to procced “data” variable (file on Base64) in nav got from our page.

Now we have Drag&Drop

Howdy, Stranger!

Quick Links

Categories

Drag and drop functionality in NAV/BC