Thursday, June 20, 2019

Use Open UI to Dynamiclly Manipulate Detail Tabs

In a screen with many view tabs it may be useful for process automation to minimize clicking on detail tabs if user does not need to navigate there when no records are present.  Open UI allows changing the view tab labels to provide indicators to signal to the user information about that tab.  In order to do so, join fields or calculations based on MV fields relevant to the child BC need to exist and be exposed as controls on the parent BC applet (they can be hidden).

One additional feature is to hide the view tabs not requiring navigation for UI optimization but keeping them available in case the user needs them.  Siebel uses a UI dropdown widget when there are too many views to fit horizontally across.  We can leverage this widget to conditionally place additional views based on the values in BC fields.


The following script is attached to a navigation manifest event:



if(typeof(SiebelAppFacade.pptCustomNavigationPR) === "undefined"){ 
  SiebelJS.Namespace("SiebelAppFacade.pptCustomNavigationPR"); 
  define ("siebel/custom/pptCustomNavigationPR", ["siebel/accnavigationphyrender"], function () { 
    SiebelAppFacade.pptCustomNavigationPR = (function(){ 
      var PM; 
      var PRName = ""; 
      function pptCustomNavigationPR(pm){ 
      SiebelAppFacade.pptCustomNavigationPR.superclass.constructor.apply(this,arguments);} 
      SiebelJS.Extend(pptCustomNavigationPR, SiebelAppFacade.AccNavigationPhyRenderer); 
            
      pptCustomNavigationPR.prototype.Init = function() { 
        SiebelAppFacade.pptCustomNavigationPR.superclass.Init.apply(this, arguments); 
        PM = this.GetPM(); 
        PRName = PM.GetPMName(); 
      }; 
      /*pptCustomNavigationPR.prototype.ShowUI = function(){ 
        SiebelAppFacade.pptCustomNavigationPR.superclass.ShowUI.apply(this, arguments); 
        //implement ShowUI method here 
      }; 
      pptCustomNavigationPR.prototype.BindEvents = function(){ 
        SiebelAppFacade.pptCustomNavigationPR.superclass.BindEvents.apply(this, arguments); 
        //implement BindEvents method here 
      };*/
            
      pptCustomNavigationPR.prototype.BindData = function(bRefresh){ 
        SiebelAppFacade.pptCustomNavigationPR.superclass.BindData.call(this, bRefresh); 
                
        //Prototype for child record counter on view tabs 
        if (PRName == "NavigationDetailObject_PM"){ 
          //the framework is processing detail navigation, this is a good place for code that manipulates view tabs. Get applet, control, value and properties 
          //Code assumes the top form applet has a control that exposes a count 
          var oView = SiebelApp.S_App.GetActiveView();
                                  
          if (typeof(oView) != 'undefined' && oView != null && oView.hasOwnProperty("GetName") == true) {
            var sViewName = oView.GetName();
                 
            //Limit execution of this script to only views matching a naming convention as it must have a parent form applet containing the hidden calculated fields
            if ( sViewName.indexOf("XXX Search Text") >= 0 ){
              var suppressTabs = true;

              //This applet must have controls containing the BC fields that will be used in the array
              var applet = oView.GetAppletMap()["XXX Parent Form Applet"];

              //Declared Array where index is UI display name of the detail tab and value is either BC Field Name or '-'.  If field name, non 0/non null value indicate tab should
              //be displayed.  '-' indicates tab should always be hidden.  If tab should always be displayed, do not put it in the array
              var tabList = {"Contacts":"XXX Contact Count","Activities":"XXX Activity Count","Service Requests":"XXX SR Count","Notes":"XXX Notes Flag","Fees":"XXX Fees Flag","Audit Trail":"-"};
              var hitCount, fieldName;
              var tabIndex = 0;
              var tabs = [];
              var tabScreens = [];
              var showWidget = false;
              var lastTab;
      
              //loop through each visible detail tab... 
              $(".siebui-subview-navs .siebui-nav-tabScreen .ui-tabs-nav a").each(function(index){ 
                //get the current tab label text 
                var currentLabel = $(this).text(); 
                  
                //check if tab is in array of labels that need modification
                fieldName = tabList[currentLabel];
                if (typeof(fieldName)!='undefined' && fieldName != ""){  //we found the tab 
                  if (fieldName == "-") hitCount = "";
                  else hitCount = applet.GetBusComp().GetFieldValue(fieldName);

                  //Either modify the label if an indicator needs to be appended or if tab is to be suppressed, add to an array of labels to appear in the option list
                  if (hitCount != "" && hitCount != "0") {
                  //now change the text 
                    $(this).text(currentLabel + " (" + hitCount + ")"); 
                    lastTab = $(this);
                  } else if (suppressTabs) {
                  //If this tab should be generally suppressed, there are no indicators needing to be displayed, and it is not currently selected
                    if (fieldName != "" && (hitCount == "" || hitCount == 0) && $(this).parent().attr("tabindex")!= "0") {
                      showWidget = true;
                      tabs[tabIndex] = currentLabel;
                      tabScreens[tabIndex++] = $(this).attr("data-tabindex").substring(9);
                      $(this).remove();
                    } else {
                      lastTab = $(this);
                    }
                  }   
                }
              }); 
              
              //If any tabs need to be suppressed, display a drop down at the end of the detail tab row with list of view tabs that have been suppressed
              if (showWidget == true) {
                var j=0;
                var htmlstring = lastTab.parent().parent().html();
                var append = '<li><select aria-atomic="true" aria-label="Third" bar="" class="siebui-nav-links siebui-nav-viewlist" id="j_s_vctrl_div_tabScreen" level="" role="combo" view="">==$0<option hidden="" value=""></option>';</select></li>
                while (j < tabIndex) {
                  append = append + '<option value="tabScreen'+tabScreens[j]+'">'+tabs[j++]+'</option>';
                }
                append = append + '</select></li>';
                lastTab.parent().parent().html(htmlstring+append);
              }
            }
          }
        }        
      }; 
              
      return pptCustomNavigationPR; 
    }()); 
    return "SiebelAppFacade.pptCustomNavigationPR"; 
  }); 
}

No comments:

Post a Comment