index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/codemirror.js" type="text/javascript"></script>
    <title>FetchXMLToSQL | Convert fetchXml to SQL Online</title>

    <link rel="stylesheet" type="text/css" href="styles/milligram.min.css" />
    <link rel="stylesheet" type="text/css" href="styles/style.css" />

    <style type="text/css">
        .CodeMirror-line-numbers {
            width: 2.2em;
            color: #aaa;
            background-color: #eee;
            text-align: right;
            padding-right: .3em;
            font-size: 10pt;
            font-family: monospace;
            padding-top: .4em;
            line-height: normal;
        }
    </style>
</head>
<body>
    <div class="row" style="height:100%">
        <div class="column column-20" style="position:relative">
            <h2></h2>
            <h2><font color="#9b4dca">&lt;</font>fetchXml<font color="#9b4dca">/&gt;</font></h2>
            <h2>&nbsp;&nbsp;to</h2>
            <h2>&nbsp;&nbsp;<font color="#9b4dca">SQL</font></h2>

            <input id="open" style="width:100%; margin-bottom:25px; margin-top:10px" class="button-small button-outline" value="Open a File" type="submit" onclick="loadFile()" />

            <input type="url" style="width:100%; margin-bottom:5px;" class="btn" id="orgURL" placeholder="Enter Organization URL" wrap="off" />
            <input id="addURL" style="width:100%" class="button-outline" value="Add URL" type="submit" onclick="" />
            <div id="orgList"></div>

            <div style="bottom:0px; position:absolute;">
                <a href="https://www.ashishvishwakarma.com/test-fetchxml-with-webapi-dynamics-365-fetchxml-tester/">Help?</a>
            </div>
        </div>
        <div class="column column-80" data-balloon="Paste your fetchXml here to test." data-balloon-pos="left">
            <textarea id="fetchXml" wrap="off" autofocus>&lt;fetch mapping=&apos;logical&apos;&gt;
   &lt;entity name=&apos;account&apos;&gt;
      &lt;attribute name=&apos;accountid&apos;/&gt;
      &lt;attribute name=&apos;name&apos;/&gt;
      &lt;link-entity name=&apos;systemuser&apos; to=&apos;owninguser&apos;&gt;
         &lt;filter type=&apos;and&apos;&gt;
            &lt;condition attribute=&apos;lastname&apos; operator=&apos;ne&apos; value=&apos;Cannon&apos; /&gt;
          &lt;/filter&gt;
      &lt;/link-entity&gt;
   &lt;/entity&gt;
&lt;/fetch&gt;  </textarea>

            <div class="row">

                <div class="column column-80">
                    <input id="btnConvert" style="width:100%" class="btn" value="Convert FetchXML To SQL" type="submit" />
                    <br />
                </div>

                <div class="column column-20" data-balloon="Click to beautify/format fetchXml" data-balloon-pos="top">
                    <input id="beautify" style="width:100%" class="button button-outline" value="Beautify" type="submit" />
                </div>
            </div>
        </div>
    </div>

    <div class="row">
    </div>
    <div class="row">
        <div style="bottom:0px; position:absolute;font-size:small;right:25px">
            <a target="_blank" id="finalURI" href="https://AshishVishwakarma.com">|</a><a target="_blank" href="https://github.com/AshV/FetchXMLToSQL">FetchXMLToSQL</a> built with <font color="red">❤</font> by <a target="_blank" href="https://AshishVishwakarma.com">AshV</a>
        </div>
    </div>
    <script src="js/script.js"></script>
    <script type="text/javascript">
        var editor = CodeMirror.fromTextArea('fetchXml', {
            height: "50%",
            parserfile: "parsexml.js",
            stylesheet: "styles/xmlcolors.css",
            path: "js/",
            continuousScanning: 500,
            lineNumbers: true,
            onChange: function () {
                //fetchXmlOnchange();
            }
        });
    </script>
    <input style="position: absolute; top: -100px;" type="file" id="file-input" accept="text/plain,text/xml" />
    <script>
        function loadFile() {
            document.getElementById('file-input').click();
        }

        function readSingleFile(e) {
            var file = e.target.files[0];
            if (!file) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                var contents = e.target.result;
                displayContents(contents);
            };
            reader.readAsText(file);
        }

        function displayContents(contents) {
            editor.setCode(contents);
            var queryName = document.getElementById('file-input').value;
            queryName = queryName.substring(queryName.lastIndexOf('\\') + 1);
            document.getElementById('queryName').value = queryName;
            document.title = queryName;
        }

        document.getElementById('file-input').addEventListener('change', readSingleFile, false);
    </script>
</body>
</html>