Access Right for Tabs

Dear Mohammad,

All tabs are kept in the TabsCollection. You can access it like this:

this.get ("TabsCollection");

Please see the examples below on how to hide tab based on the condition:

methods: {
			onRender: function(){
				this.callParent(arguments);
				this.showTabsForCategoryAndType();
			},
 
			onEntityInitialized: function(){
				this.callParent(arguments);
				this.showTabsForCategoryAndType();
			},
 
			showTabsForCategoryAndType: function(){
				var tabNames = {
					Refinance: "Tab1", //tab name in diff
					Purchase: "Tab2",
					Construction: "Tab3",	
				}
				var categoryValue = this.get("Category")?this.get("Category").value:null;
				var typeValue = this.get("Type")?this.get("Type").value:null;
				var isAnyActiveDynamicTab = false;
				if(categoryValue == OpportunityConfigurationConstants.Opportunity.Category.Finance){
					if(typeValue == OpportunityConfigurationConstants.Opportunity.Type.Refinance){
						isAnyActiveDynamicTab = true;
						this.hideAllDynamicTabs(tabNames)
						this.hideTabByName(tabNames.Refinance, false);
					}
				}
				if(categoryValue == OpportunityConfigurationConstants.Opportunity.Category.Finance){
					if(typeValue == OpportunityConfigurationConstants.Opportunity.Type.Purchase){
						isAnyActiveDynamicTab = true;
						this.hideAllDynamicTabs(tabNames)
						this.hideTabByName(tabNames.Purchase, false);
					}
				}
				if(categoryValue == OpportunityConfigurationConstants.Opportunity.Category.Finance){
					if(typeValue == OpportunityConfigurationConstants.Opportunity.Type.Construction){
						isAnyActiveDynamicTab = true;
						this.hideAllDynamicTabs(tabNames)
						this.hideTabByName(tabNames.Construction, false);
					}
				}
				if(!isAnyActiveDynamicTab){
					this.hideAllDynamicTabs(tabNames)
				}
			},
			hideAllDynamicTabs: function(tabNamesConfig){
				this.hideTabByName(tabNamesConfig.Refinance, true);
				this.hideTabByName(tabNamesConfig.Purchase, true);
				this.hideTabByName(tabNamesConfig.Construction, true);
			},
			hideTabByName: function(tabName, isHide){
				var tabsCollection = this.get("TabsCollection");
				if(tabsCollection){
					var tabIndex = tabsCollection.collection.keys.indexOf(tabName);
					var tabsPanelDomElement = document.getElementById("OpportunityPageV2TabsTabPanel-tabpanel-items");
					if(tabsPanelDomElement){
						tabDomElement = tabsPanelDomElement.querySelector('[data-item-index="'+tabIndex.toString()+'"]');
						if(tabDomElement){
							if(isHide){
								tabDomElement.style.display = "none";
							}else{
								tabDomElement.style.display = null;
							}
						}
					}
 
				}
 
			}
		},

Hope you will find it helpful.

Regards,

Anastasia

Anastasia Botezat,

Thanks! This was helpful

Nels Yehnert,

Please find the answers below:

1. The tabDomElement is declared in the code I have provided:

var tabsPanelDomElement = document.getElementById("OpportunityPageV2TabsTabPanel-tabpanel-items");

You just need to modify it up to the needed section.

2. If you are validating via validation tool in configuration schema window, it will be trowing this message for any single quotes, however, in this particular case this is needed measure to distinguish two quote zones. Nevertheless, even if you would use single quote everywhere, this will not break the code. 

I would recommend to watch browser developers console for errors and use debugger to debug the code along its execution.

Regards,

Anastasia 

Anastasia Botezat,

Thank you for this helpful bit of code but what do we have to do when the tab we want to hide is the first one?

It appears to be tricky when hiding the first tab because the content stays on the page.

Yosef,



Hi!



Please find a complete example below:

 

define("ActivityPageV2", ["BusinessRuleModule"],
	function(BusinessRuleModule) {
		return {
		entitySchemaName: "Activity",
		attributes: {
			"MyTabObject": {
				dataValueType: this.Terrasoft.DataValueType.CUSTOM_OBJECT
			},
			"ActivityCategory": {
				dataValueType: this.Terrasoft.DataValueType.LOOKUP,
				dependencies: [
					{
						columns: ["ActivityCategory"],
						methodName: "initCustomTab"
					}
				]
			}
		},
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		methods: {
			init: function() {
				this.callParent(arguments);
				var tabCollection = this.get("TabsCollection");
				tabCollection.eachKey(function(tabName, tab) {
					if (tabName === "GeneralInfoTab") {
						this.set("MyTabObject", tab);
					}
				}, this);
			},
			onEntityInitialized: function() {
				this.callParent(arguments);
				this.initCustomTab();
			},
			onCloseClick: function() {
				this.callParent(arguments);
				this.addCustomTab();
			},
			initCustomTab: function() {
				var category = this.get("ActivityCategory") && this.get("ActivityCategory").value;
				if (category !== "03df85bf-6b19-4dea-8463-d5d49b80bb28") {
					var tab = this.get("MyTabObject");
					var tabCollection = this.get("TabsCollection");
					if (tab) {
						if (this.get("ActiveTabName") === "GeneralInfoTab") {
							this.set("ActiveTabName", "ActivityParticipantTab");
						}
						tabCollection.remove(tab);
					}
					this.set("TabsCollection", tabCollection);
				} else {
					this.addCustomTab();
				}
			},
			addCustomTab: function() {
				var tabCollection = this.get("TabsCollection");
				var tab = this.get("MyTabObject");
				var customTabExists = false;
				tabCollection.eachKey(function(tabName, tab) {
					if (tabName === "GeneralInfoTab") {
						customTabExists = true;
					}
				}, this);
				if (!customTabExists && tab) {
					tabCollection.add(tab.get("Name"), tab, 0);//3rd parameter - index where to show the tab
					this.set("TabsCollection", tabCollection);
				}
			}
		},
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/
		};
	});

You can use it to check in ActivityPageV2.



Regards,

Dmytro

This feature is implemented in Creatio 7.16.3 release via business rules