CRM Dynamics : Improve Form with Tab Menu

I was wondering how to have all data user need in only one screen.
Then I Googled and found this :

http://www.itaintboring.com/dynamics-crm/dynamics-crm-creating-navigation-tabs/

I want to always keep Basic Information of the contact/account


  1.  we have tabs, and we can collapse it or uncollapse it
  2. If we collapse a a tab all the width of the screen is hidded. 
Then I decided to try to work with section and not tabs.

My idea was to have a Tabs with 3 column and only the column of the middle would be dynamic in link with the tab menu

Then I created 1 Tab with 3 column and all the section in the column of the middle have
  1.  A name that start by "NavSection_" 
  2.  The label hidded
  3. Are hidded by default unless the first

<html><head><meta charset="utf-8">

 <style>
          * {
                margin: 0;
                padding: 0;
            }
            
            .activeTab {
                background-color: #0080ff;
                color: #FFFFFF;
                font-family: Segoe UI, Tahoma, Arial;
                font-size: 14px;
                padding: 5px 10px 5px 10px;
                margin: 0px 4px 0px 0px;
                width: 80px;
                text-overflow: ellipsis;
                display: inline-block;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                border-radius: 5%;
                border : 1px solid #9EA0A1;
                 float : left;
                 border-bottom : 1px solid #9EA0A1;
            }
            
            .inactiveTab {
                background-color: #b3d9ff;
                color: #000000;
                font-family: Segoe UI, Tahoma, Arial;
                font-size: 14px;
                padding: 5px 10px 5px 10px;
                margin: 0px 4px 0px 0px;
                width: 80px;
                text-overflow: ellipsis;
                display: inline-block;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                border-radius: 5%;
                border : 1px solid #9EA0A1;
                 float : left;
                 border-bottom : 1px solid #9EA0A1;
            }
            
            .activeTab:hover {
                cursor: pointer;
            }
            
            .inactiveTab:hover {
                background-color: #C2C2C2;
                cursor: pointer;
            }
            
        </style>
<style type="text/css">P { margin: 0; }</style><meta><style type="text/css">P { margin: 0; }</style><meta><style type="text/css">P { margin: 0; }</style><meta></head>
<body onload="LoadFormTabs()" onfocusout="parent.setEmailRange();" style="word-wrap: break-word;">
        <ul id="tabs">
        </ul>   

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript">
</script>
        <script type="text/javascript">
            function LoadFormTabs() {
    
    var navSection = new Array();
                //var tabs = this.parent.Xrm.Page.ui.tabs.get();
    var sections = this.parent.Xrm.Page.ui.tabs.get("SUMMARY_TAB1").sections.get();
                for (var i = 0; i < sections.length; i++) {
                   // var tab = tabs[i];
     var section = sections[i];            
     
     
     if (sections[i].getKey().startsWith("NavSection") )
     {
      var listItem = document.createElement("la");
                        listItem.className = "inactiveTab";
                        listItem.id = section.getKey();
                        var sectionName = section.getName();
                        var sectioNameclean = sectionName.replace("NavSection_","");
                        listItem.innerHTML = sectioNameclean;
                        //section.getLabel();
      
      navSection.push(section);
      
      listItem.onclick = function () {
                            var selectedSec = window.parent.Xrm.Page.ui.tabs.get("SUMMARY_TAB1").sections.get(this.id);
                            var activeSec = selectedSec.getKey();
                           // var allSec = window.parent.Xrm.Page.ui.tabs.get("SUMMARY_TAB1").sections.get();
                         
                         for (var j = 0; j < navSection.length; j++) 
           
                {                                 
                                if (window.parent.Xrm.Page.ui.tabs.get("SUMMARY_TAB1").sections.get(navSection[j].getKey()).getVisible() == true) 
                                {
                                    window.parent.Xrm.Page.ui.tabs.get("SUMMARY_TAB1").sections.get(navSection[j].getKey()).setVisible(false);
                                }
                                $("#" + navSection[j].getKey()).addClass("inactiveTab");
                            }
            
                            selectedSec.setVisible(true);
                            $("#" + activeSec).removeClass("inactiveTab").addClass("activeTab");
                           if (selectedSec.getVisible() != true) 
                           {
                                selectedSec.setVisible(false);
                           }
                        };                   
            
                        document.getElementById("tabs").appendChild(listItem); 
     }    
     
     
                }
                 $("#tabs").children(":first").removeClass("inactiveTab").addClass("activeTab");
            }   
        </script>
</body></html>

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

CRM dynamics V9 wait Async web API to contiue code

hello here is how to do an async call from v9 here is the structur of a call function azerty () {   Xrm.WebApi.retrieveMultipleRecords("teams", "?$select=name,teamid&$filter="+clause).then(       function success(result)         {     / /Your COde here part A                 },         function (error)         {             Xrm.Navigation.openAlertDialog(error.message);         }     );  //other code here; part b //Yuou want this code to be executed after part A because the webapi call is assync the part B would be executed before part A } then if you want to execute part B after part A here is how to do In green what is change to make it work async function azerty () { //Some code await myPartAcode(); partBcode; } function myPartAcode() { return new Promise(resolve => { { resolve(   Xrm.WebApi.retrieveMultipleRecords("teams", "?$select=name,teamid&$filter="+clause).then(       func
Lire la suite

promise example

 the promise async function getrecord (recordtype,recordid) {     return new Promise(resolve => {{             resolve(Xrm.WebApi.retrieveRecord(recordtype, recordid ).then(                     function success(result)                     {                      // perform operations on record retrieval                         if (result)                         {                             return result;                         }                     },                     function (error)                     {                         Xrm.Navigation.openAlertDialog(error.message);                     }                 )   ); }}); the function that call the promise async function onChange_regarding(executionContext) {     var formContext = executionContext.getFormContext();     var regarding = formContext.getAttribute("regardingobjectid").getValue();          var mycurrentSubject = formContext.getAttribute("subject").getValue();     if (regarding != null)     {   
Lire la suite

Decode/render HTML from a field in crm dynamics

In email entity the Hmtl is well decode. but if you want to decode it in other entity, it will not work you will just see the tag everywhere then I propose you to create a webressource and to apply this code. as you can see the field to to decode is hard coded but you can also give it as a webressource parameter. in a old post I explain how to pass value here is the html + javascript <html><head><meta></head> <body onload="onLoad()" onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;"> <script > function onLoad() { debugger; var para = document.createElement("decodedDescription"); var descriptionHtml = window.parent.Xrm.Page.getAttribute("description").getValue(); para.innerHTML = descriptionHtml; document.getElementById("decodedDescription").appendChild(para); }   </script > <div id="decodedDescription"> </div> </body></ht
Lire la suite