How do you close (dismiss) an alert component? UI Builder Events Alert

staticCrash
Tera Guru

Hi All,

I'm working on a UI Builder (UIB) page.  

I created an Alert component, that should display upon a successful update.

 

I'm not understanding how to pump though the user's action of clicking the  "X" to dismiss the message.  

I've mapped the user action clicked event to a client script.  This event is firing.

 

However I don't know what to actually code in here to make the Alert disappear. 

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
   
    console.log('close dialog');
    console.log(JSON.stringify(event.payload));

    api.elements.alert_1.???????  close?    etc ????


    


}

alert.png

 

Thank you,

 

Jay

1 ACCEPTED SOLUTION

staticCrash
Tera Guru

I ended up remembering Client States.  

To fix this, I just created a new client state bool.  I then bound this bool to the component visibility prop of the alert component.  Then in the in line edit success update event's script, i set this client state to false, this will show the alert.

 

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    
     api.setState('hideUpdateGoodAlert', false);

}

 

 

In the script that get's called by the Alert's action clicked, i set the state back to true, to hide the alert.

 

 

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    api.setState('hideUpdateGoodAlert', true);


    


}

 

 

Thanks,

j

 

 

View solution in original post

1 REPLY 1

staticCrash
Tera Guru

I ended up remembering Client States.  

To fix this, I just created a new client state bool.  I then bound this bool to the component visibility prop of the alert component.  Then in the in line edit success update event's script, i set this client state to false, this will show the alert.

 

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    
     api.setState('hideUpdateGoodAlert', false);

}

 

 

In the script that get's called by the Alert's action clicked, i set the state back to true, to hide the alert.

 

 

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    api.setState('hideUpdateGoodAlert', true);


    


}

 

 

Thanks,

j