Blog

Lo primero que tienes que hacer, es ir a Configuración, luego a Gestor de objetos.

Selecciona el objeto que tiene la lista relacionada en la que deseas hacer el cambio.

Luego en “Formatos de página“, selecciona el o los formatos en donde quieres mostrar o ocultar el botón.

Luego te desplazas hasta la parte de Listas relacionadas, dando clic en la figura de herramienta.

Se mostrará un modal con la sección de Botones, en esa sección puedes mostrar o ocultar el botón Nuevo.

Esta es la forma más “elegante” que he encontrado, para mostrar/ocultar el gif del spinner.

Necesitaremos lo siguiente:

• Handler mediante el evento aura:waiting y aura:doneWaiting
• Una función en el controller que sea invocada por aura:waiting y otra que sea invocada por aura:doneWaiting
• Condicional aura:if, para mostrar o ocular el spinner
• Los tags (div y span) con sus respectivas clases (slds-spinner…) para desplegar el spinner
• El else (aura:set attribute=”else”), de la condicional de aura:if

En el siguiente ejemplo, al cargar el componente se muestra un botón Guardar, al dar clic en el botón, entra en acción el evento aura:waiting, que manda llamar la función waiting en el controller, con lo cual se muestra el gif del spinner.

Cuando se termina de ejecutar la función funcionGuardar , del evento clic del botón Guardar, entra en acción el evento aura:doneWaiting, para llamar a la función doneWaiting del controller, y cambiar el estatus de la variable HideSpinner.

Una desventaja, es que si tienes una página usas más de 2 componentes y cada componente tiene su propio spinner y sus propios eventos de aura; al activar el evento aura:waiting, el spinner se mostrará en todos los componentes.

Código en el componente:

<aura:handler event="aura:waiting" action="{!c.waiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
<aura:attribute name="HideSpinner" type="Boolean" default="true"/>

<aura:if isTrue="{!v.HideSpinner}">
	
	<div class="slds-spinner_container" >
		<div class="slds-spinner--brand slds-spinner slds-spinner--large" role="alert">
			<span class="slds-assistive-text">Loading, Please Wait...</span>
			<div class="slds-spinner__dot-a"></div>
			<div class="slds-spinner__dot-b"></div>
		</div>
	</div>
	
	<aura:set attribute="else">
	  <lightning:button variant="brand" label="Guardar" title="Guardar" onclick="{! c.funcionGuardar }"/>
	</aura:set>

</aura:if>

El siguiente código estaría en el controller.js

waiting: function(component, event, helper) {
  component.set("v.HideSpinner", true);
 },
 doneWaiting: function(component, event, helper) {
  component.set("v.HideSpinner", false);
 }

Actualización

Los eventos aura:waiting y aura:doneWaiting, están en desuso según la documentación oficinal de Salesforce, por lo que se recomienda usar otro método.

En Salesforce se les conoce como “User Notifications“, a los cuadros que son usados principalmente para mostrar mensajes de éxito o error al guardar/procesar información.

var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
    title: "¡Éxito!",
    message: "Contacto guardado éxitosamente.",
    type: "success"
});
toastEvent.fire();

Los types pueden tener los siguientes valores:
success
error
warning
information

A modo de nota, se puede hacer de dos maneras:

• Mediante $A.enqueueAction
• Cambiar la función que se desea invocar en el helper

Mediante $A.enqueueAction

Un ejemplo del código para ilustrar es el siguiente (tomado de stackoveflow):

({
    bar : function(component, event, helper) {
        console.log('Paso 2');
    },
    foo : function(component, event, helper) {

        console.log('Paso 1');

        var a = component.get('c.bar');
        $A.enqueueAction(a);

        console.log('Paso 3');

    }
})

“Funciona” a medias, ya que se ejecuta de manera asíncrona, dando como resultado lo siguiente:

Mediante el archivo helper

Esta es la mejor opción, ya que el comportamiento será el esperado, además si otra función en el controller necesita hacer uso de la función (bar), al estar en el archivo helper, se puede invocar sin mayor problema.

Archivo helper.js:

bar : function(component, event, helper) {
        console.log('Paso 2');
    }

Archivo controller.js:

({
        foo : function(component, event, helper) {

        console.log('Paso 1');

        helper.bar(component, event, helper);

        console.log('Paso 3');

    }
})