Home

Feb 11, 2013

Show Hide Tab/Sections on field change

We can hide show tabs/sections programmatically using sdk UI components. Below example depicts hide/show of tabs and sections based on lookup field change. You can call below function on load of form & onchange of both fields
 
//summary - it will hide the Tab
function showhideTab() {
    var otherLookupProduct = "Other Contact";
    var otherLookupContact = "Other Product";
    var lookupContact = Xrm.Page.getAttribute('contactid').getValue();
    var lookupProduct = Xrm.Page.getAttribute('productid).getValue();
    if (lookupContact != null && lookupProduct != null) {
        var tabName = "Product Contact";
        var tabs = Xrm.Page.ui.tabs.get();
        var tabPortal;
//get the tab to hide/show
        for (var i in tabs) {
            var tab = tabs[i];
            var currentLabel = tab.getLabel();
            if (currentLabel != null && currentLabel == tabName) {
                tabPortal = tab;
            }
        }
//summary – check condition to hide/show tab
        if (lookupContact[0].name == otherLookupContact && lookupProduct[0].name == otherLookupProduct) {
            tabPortal.setVisible(true);
        }
        else {
            tabPortal.setVisible(false);
        }
    }
}
 
//summary - it will hide the Section
function showhideSection() {
    var otherLookupProduct = "Other Contact";
    var otherLookupContact = "Other Product";
    var lookupContact = Xrm.Page.getAttribute('contactid').getValue();
    var lookupProduct = Xrm.Page.getAttribute('productid).getValue();
    if (lookupContact != null && lookupProduct != null) {
        var sectionName = "Product Contact";
        var tabs = Xrm.Page.ui.tabs.get();
        var sectionPortal;
//get the tab to hide/show
        for (var i in tabs) {
            var tab = tabs[i];
tab.sections.forEach(function (section, index) {
            var currentLabel = section.getLabel();         
            if (currentLabel != null && currentLabel == sectionName) {
                sectionPortal = tab;
            }
          }
        }
//summary – check condition to hide/show tab
        if (lookupContact[0].name == otherLookupContact && lookupProduct[0].name == otherLookupProduct) {
            sectionPortal.setVisible(true);
        }
        else {
            sectionPortal.setVisible(false);
        }
    }
}
You can also refer SDK for more samples - SDK\SampleCode\JS\FormScripts\SDK.SectionSamples.js
 

No comments: