Skip to main content

Adx portal: Improve JavaScript Upload Experience

     While using "Custom Javascript" area in Web pages, Web Form Steps etc. I found it a little bit uncomfortable in use.

     The max length of 10 000 characters not always enough and if I add a compiled content then debugging is blocked.

     I ended up creating dynamic script loader. It picks up a url (like "~/Areas/FolderName/scriptName.min.js") from “Custom Javascript" area. Then script checks if such a namespace exists and object is loaded. If necessary, it loads the script.

The idea is very simple.

Have an object loaded with master page to load JavaScript and CSS files:

     if (typeof (gHelper) == "undefined")  
     { gHelper = { __namespace: true }; }  
     gHelper.data = {  
       addedFiles: "",  
     }  
     gHelper.fn = (function (window, document) {  
       function loadfile(filepath, filetype) {  
         var fileref;  
         // JavaScript file from solution  
         if (filetype == "js") {  
           fileref = document.createElement('script');  
           fileref.setAttribute("type", "text/javascript");  
           fileref.setAttribute("src", filepath);  
         }  
           // CSS file from solution  
         else if (filetype == "css") {  
           fileref = document.createElement("link");  
           fileref.setAttribute("rel", "stylesheet");  
           fileref.setAttribute("type", "text/css");  
           fileref.setAttribute("href", filepath);  
         }  
         if (typeof fileref != "undefined")  
           document.getElementsByTagName("head")[0].appendChild(fileref);  
       }  
       return {  
         //load js or css file dynamicly  
         LoadFileDynamicly: function (filepath, filetype) {  
           if (gHelper.data.addedFiles.indexOf("[" + filepath + "]") == -1) {  
             loadfile(filepath, filetype);  
             gHelper.data.addedFiles += "[" + filepath + "]";  
           }  
           else {  
             alert("file already added!");  
           }  
         },  
       }  
     })(window, document);  
         The follow code supposed to be set up in “Custom Javascript" area of WebPage, WebFormStep or wherever you need upload a js library.

     if (typeof (gHelper) == "undefined")  
     { gHelper = { __namespace: true }; }  
     gHelper.data = {  
       addedFiles: "",  
     }  
     if (window.jQuery) {  
       $(document).ready(function () {  
         if (typeof (gHelper) == "undefined") {  
           alert("Script error: Cannot find dynamic loader.");  
           return;  
         }  
         //add file or files you need to upload 
         gHelper.fn.LoadFileDynamicly("~/FolderName/ScriptFileName .js", "js");  
       });  
     }  
      It would be very nice from Adx to add a simple text field that could hold a JavaScript file url to load it in the Web page, Web Form Steps etc., like "Rewrite Url" in the Page Template. I thought it might be a good option to have an alternative to “Custom Javascript" area in the Adxstudio Crm solution.
    Unfortunately, looks like Adx already closed the “Ideas” area in the community forum but Microsoft haven’t opened one yet J

Comments

Dibutil said…
You could use undocumented head/fonts snippet - it will inject custom JS or a link to it directly into the head of HTML and leave the Master unchanged ;)
Thanks for the great option. It definitely useful especially for the new SaaS portals those are part of Office 365 and not supporting custom ASP pages.
And it's very true about Master Page. I use to created my own Master Pages, inherited from Adx Masters, for custom development. It helps keep the portal clean and updatable.

Most popular

Dynamics 365 online and Adx portal on-premise. Are they compatible?

Adxstudio Portal how to: Incremental (Sequential) Deployment and backup. Part I

Custom plugin exception output for crm form