Manipulation of tabs in details of some kind of record

Dear Julio,

Try to use the method onEntityInitialized instead of init. The init method runs just once when you open a page. The system doesn't run the init method when you switch between records with the same edit page.

The method onEntityInitialized runs any time when the system loads data to a page. It runs even if you switch between records with the same edit page.

Thanks Eugene,

We always use the onEntityInitialized method, sorry I write Init as a generic name, because I had no idea that there was also a method called Init.

Due this what can we do? I attach the code involved in this isuue

// This is our onEntityInitialized, above the specific method (OnUsrseguimientoLoadForm) managing the tabs.
onEntityInitialized: function() {

	this.callParent(arguments);
	// 20161209 JFL ->
	
	// Es Solicitud NUEVA?
	// 20170103 JFL -> Revisar, esto se puede preguntar de otra forma
	if ( !this.get("UsrNumeroint") ) {
		// Solicitud nueva, verifica que venga del proceso crear hija => Usridmadre tiene valor
		if ( this.get( "Usridmadre" ) ) {
			// Es solicitud hija nueva => viene del proceso CREAR HIJA
			// Solicitud de Seguimiento? verificar que quien llame sea hija
			this.InicializaHija( this.get( "Usridmadre" ) ); 
			
		}
	}
	
	// valida si es solicitud de seguimiento  
	this.OnUsrseguimientoLoadForm();
	
	// 20161209 JFL <-
	
	// 20161128 JFL ->
	
	// Inicializa variables globales (declaradas en Parameters ventana de la derecha) para evaluar caso AcompJI
	lNinoIntegra = false;
	lConsultanteIntegra = false;
	lRelacionconelNino = false;
	
	// Evalua si es un caso de AcompJI y actualiza campo usrAcompJI a la carga del form
	this.EvaluaSolicitudAcompJI();
	
	// BORRAR - Esto es redundante, pero p´´or algun motivo quiza por asincronia no evalua los otros valores antes...
	//this.onEvualuaCondicionesAcompJI();
	
	// Evalua los campos que restringen exigencias de campos obligatorios, en su caso quita o pone obligatoriedad. 20161205 JFL -> Se agrega UsrPendRecontacto
	this.CambiarRequired( this.get( "UsrLlInconclIntrr" ), this.get( "UsrNoseencuentracond" ), this.get( "UsrPendRecontacto" ) );
	// 20161128 JFL <-
	
	// 20161221 JFL
	this.on("change:UsrConsultante", this.onUsrConsultanteChanged(), this);
	this.on("change:UsrNinoa2", this.onUsrNinoa2Changed(), this);
	//this.on("change:UsrColumn3", this.customMethod(), this);
	
},

OnUsrseguimientoLoadForm: function() {
	// 20161222 JFL -> Evaluar si esconde TAB
	var tabsCollection = this.get( "TabsCollection" );
	var UsrSolicitds3Page8Tab = tabsCollection.contains( "UsrSolicitds3Page8Tab" ) ? tabsCollection.get( "UsrSolicitds3Page8Tab" ) : false;

	// Verfica el estado actual del campo
	if ( this.get( "Usrseguimiento" ) ) {
		/***
		* Esta marcado: 
		*
		* Es madre?, si tiene hijas, lo debe deshabilitar
		* Es hija, lo deshabilita y lo oculta
		*
		***/
		// El hecho de tener hija, implica es madre con hija...
		// Deshabilita control si es madre con hija o si es hija
		this.set( "IsUsrSeguimientoEnabled", !( this.get( "UsrIdultimahija" ) || this.get( "Usridmadre" ) ) );
		
		// Ademas, si es hija, esconde el control
		this.set( "IsUsrseguimientoVisible", !this.get( "Usridmadre" ) );
		
	}
	
	// 20161222 JFL -> Evaluar si esconde TAB
	if ( !this.get( "Usridmadre" ) && !UsrSolicitds3Page8Tab ) { 
			// 20161222 JFL -> es hija, porque tiene madre => Muestra TAB
			tabsCollection.insert( 4, "UsrSolicitds3Page8Tab", Terrasoft.UsrSolicitds3.UsrSolicitds3Page8Tab );
			
	} else if ( this.get( "Usridmadre" ) && UsrSolicitds3Page8Tab ) {
			// 20161222 JFL -> Esconde TAB
			Terrasoft.UsrSolicitds3.UsrSolicitds3Page8Tab = UsrSolicitds3Page8Tab;
			tabsCollection.removeByKey( "UsrSolicitds3Page8Tab" );
			
	} 
},

Unfortunately, there is no good way to hide the tabs dynamically. The "display" tab binding will be in the next versions. We faced similar task before. Please check the solution. I'm sure it will help you.

attributes: {
	"TabShowAttribute": {
		dependencies: [
			{
				columns: ["Category", "Type"],
				methodName: "showTabsForCategoryAndType"
			}
		]
	}
},
methods: {
	onRender: function(){
		this.callParent(arguments);
		this.showTabsForCategoryAndType();
	},
	
	onEntityInitialized: function(){
		this.callParent(arguments);
		this.showTabsForCategoryAndType();
	},
	
	showTabsForCategoryAndType: function(){
		var tabNames = {
			Tab1Label: "Tab008b661bTabLabel",
			Tab2Label: "Tabec56cbb4TabLabel",
			Tab3Label: "Tab503f0fa3TabLabel",
			Tab4Label: "Tab0804748dTabLabel",
			Tab5Label: "Tab3c4a107cTabLabel",
			Tab6Label: "Tabd52ee831TabLabel",
			Tab7Label: "Taba64a0c8eTabLabel",
			Tab8Label: "Tab6a275baaTabLabel",
			Tab9Label: "Taba8305340TabLabel",
			Tab10Label: "Tab8e822114TabLabel"
			
		}
		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.Category1){
			if(typeValue == OpportunityConfigurationConstants.Opportunity.Type.Tab1Label){
				isAnyActiveDynamicTab = true;
				this.hideAllDynamicTabs(tabNames)
				this.hideTabByName(tabNames.Tab1Label, false);
			}
		}
		if(categoryValue == OpportunityConfigurationConstants.Opportunity.Category.Category1){
			if(typeValue == OpportunityConfigurationConstants.Opportunity.Type.Tab2Label){
				isAnyActiveDynamicTab = true;
				this.hideAllDynamicTabs(tabNames)
				this.hideTabByName(tabNames.Tab2Label, false);
			}
		}
		if(categoryValue == OpportunityConfigurationConstants.Opportunity.Category.Category1){
			if(typeValue == OpportunityConfigurationConstants.Opportunity.Type.Tab3Label){
				isAnyActiveDynamicTab = true;
				this.hideAllDynamicTabs(tabNames)
				this.hideTabByName(tabNames.Tab3Label, false);
			}
		}
		if(categoryValue == OpportunityConfigurationConstants.Opportunity.Category.Category2){
			if(typeValue == OpportunityConfigurationConstants.Opportunity.Type.Tab4Label ||
				typeValue == OpportunityConfigurationConstants.Opportunity.Type.Tab5Label){
				isAnyActiveDynamicTab = true;
				this.hideAllDynamicTabs(tabNames)
				this.hideTabByName(tabNames.Tab4Label, false);
				this.hideTabByName(tabNames.Tab5Label, false);
			}
		}
		if(!isAnyActiveDynamicTab){
			this.hideAllDynamicTabs(tabNames)
		}
	},
	hideAllDynamicTabs: function(tabNamesConfig){
		this.hideTabByName(tabNamesConfig.Tab1Label, true);
		this.hideTabByName(tabNamesConfig.Tab2Label, true);
		this.hideTabByName(tabNamesConfig.Tab3Label, true);
		this.hideTabByName(tabNamesConfig.Tab4Label, true);
		this.hideTabByName(tabNamesConfig.Tab5Label, true);
		this.hideTabByName(tabNamesConfig.Tab6Label, true);
		this.hideTabByName(tabNamesConfig.Tab7Label, true);
		this.hideTabByName(tabNamesConfig.Tab8Label, true);
		this.hideTabByName(tabNamesConfig.Tab9Label, true);
		this.hideTabByName(tabNamesConfig.Tab10Label, 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;
					}
				}
			}
			
		}
		
	}
},

Thanks Eugene,

Perhaps it is easier to disable the "New" button when the conditions that require it are fulfilled. How can I disable this button?

The conditions are: UsrSeguimiento == true & ismadre have no data, when those conditions are meet whe need to Enable the Button, if not the button must be disabled

How can I implement this?

You can find the detail button diff object in the base detail schema. Please feel free to merge the button and bind the "visible" field to a new attribute. 

Then you need to throw a signal from the page when the field is changed. Subscribe on the signal on the detail and change the "visible" attribute according to the field value.

Hi Eugene,

I tried to test this, wihout binding the visible value yet to test if it works, but no happens, what exactly I must to do?

	"UsrSolicitds3": {
		"schemaName": "UsrSchema16Detail",
		"entitySchemaName": "UsrSolicitds3",
		"filter": {
			"detailColumn": "Usridmadre",
			"masterColumn": "Id"
		},
		"visible": false
	}

Is there any way to disable the button? it is called, in my case UsrSchema16DetailAddRecordButton, even I tried in the onEntityInitialized method to disable the button using: this.set( "UsrSchema16DetailAddRecordButton", false); but nothing happens

Even I tried to do this in Schema Diff, 

		diff: /**SCHEMA_DIFF*/[
	{
		// Operation type — merge.
		"operation": "merge",
		"name": "UsrSchema16DetailAddRecordButton",
		"values": {
			"visible": false //{"bindTo": "getToolsVisible"}
		}
	},

But doesn't works :-(

The name of the button is "AddRecordButton" instead of "UsrSchema16DetailAddRecordButton".

Thanks Eugene, finnaly we implement hide the tab if the conditions met

onRender: function(){
	this.callParent( arguments );

        // Evaluate if show/hide tab
	this.showTabHijas();
	
},

OnUsrseguimientoLoadForm: function() {
	// Verifica el estado actual del campo
	if ( this.get( "Usrseguimiento" ) ) {
		// Deshabilita control si es madre con hija o si es hija
		this.set( "IsUsrSeguimientoEnabled", !( this.get( "UsrIdultimahija" ) || this.get( "Usridmadre" ) ) );
		
		// Ademas, si es hija, esconde el control
		this.set( "IsUsrseguimientoVisible", !this.get( "Usridmadre" ) );
		
	}
	
	// Evaluate if show or hide tab
	this.showTabHijas();
	
},

showTabHijas: function() {
	// 20161222 JFL -> Evaluar si esconde TAB
	if ( !this.get( "Usridmadre" ) ) { 
		// Show TAB
		this.hideTabByName( "UsrSolicitds3Page8Tab", false );
			
	} else { 
		// Hide TAB
		this.hideTabByName( "UsrSolicitds3Page8Tab", true );
			
	} 
},

// Esconde la pestaña indicada
hideTabByName: function(tabName, isHide){
	var tabsCollection = this.get("TabsCollection");
	if(tabsCollection){
		var tabIndex = tabsCollection.collection.keys.indexOf(tabName);
		var tabsPanelDomElement = document.getElementById("UsrSolicitds3PageTabsTabPanel-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;
				}
			}
		}
	}
},

Thanks for your constant support,

Julio Falcon