Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

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