https://netsuiteprofessionals.com logo
Join Slack
Powered by
Hi all, I am using `N/ui/message` module to displa...
# suitescript
b
Hi all, I am using 
N/ui/message
module to display multiple messages. I’m calling the 
message.hide()
function to hide a specific message but seems like NetSuite hides a random one every time. Anyone come across this issue and possibly have a solution to it?
e
Are you potentially overwriting the same message object when creating a new one? I have not experienced this.
b
I have a log right before the 
.hide()
statement and it logs the correct message object.
e
Strange. I suggest posting a sample of the code.
b
Copy code
for (let i = 0; i < data.length; i++) {
    const notificationId = data[i]._id;

    const msg = message.create({
        title: createHtmlTitle(data[i].title, data[i].dismissible, notificationId),
        message: createHtmlMessage(data[i].message, data[i].callsToAction),
        type: createType(data[i].type)
    });
    msg.show();

    const interval = setInterval(
        () => {
            if (document.getElementById(`dismiss-${data[i].title}-${notificationId}`)) {
                clearInterval(interval);
                document.getElementById(`dismiss-${data[i].title}-${notificationId}`).addEventListener("click", (e) => {
                    console.log("msg to hide: ", msg.toJSON());
                    msg.hide();
                });

            }
        }, 1000
    );
}
d
seems like it would always hide the last one not random but idk maybe try outside of loop store a Map of notificationId to particular Message instance, then onclick reference that mapping and 
hide()
by lookup on unique notificiationId
d
wouldn't your msg constantly change in a loop? you need to hide the message using the var that set it. Don't use the DOM to try and get it before hiding.
Try using data[i].message = message.create.... and then use data[i].message.hide() after that. But I'm not sure why you're not just setting the 
duration
in the show() options instead of trying to clear it with an interval??
b
I thought the same and did try storing it in a map, no change. But again, as I pointed out, above code does log the correct message instance that I want to hide.
@dcrsmith I’m using DOM to see when the message is rendered in the DOM so I can add the eventlistener. Re: using duration, our UX team wants to give users the option to remove messages instead of hiding it after some time.
✔️ 1
d
Copy code
for (let i = 0; i < data.length; i++) {
    const notificationId = data[i]._id;

    window[notificationId] = message.create({
        title: createHtmlTitle(data[i].title, data[i].dismissible, notificationId),
        message: createHtmlMessage(data[i].message, data[i].callsToAction),
        type: createType(data[i].type)
    });
    window[notificationId].show();

    // TODO: add a close <a> link on the message with the notificationId as the the element ID
// add onclick event and use window[notificationId].hide()

}
Just spitballing here....
d
if you inspect the internal code of Message.hide in client browser and debugging, you can see the Message has some internal private id however, I mocked up a similar example of creating in loop, and duplicate ids were created and I was seeing similar behavior when I clicked custom html button:
I assume is based on some kind of timestamp ... maybe add a bit of delay when creating the Message instances or something will resolve to make them unique or ultimately this calls fn 
hideAlertBox('message-xxxxxxx')
if you have to resort to finding the correct identifier in DOM and calling manually yourself instead
b
@dcrsmith I had tried with a MAP, I tried your suggestion with 
window
, again no change
@dbarnett interesting insight.. I tried spacing them out with another outer setinterval but it doesn’t respect that, probably NetSuite batches them or something
d
@Bibek Shrestha This code works...
Copy code
/**
 * SA-44630 SuiteScript Versioning Guidelines
 * SA-43522 SuiteScript 2.x JSDoc Validation
 *
 * @NApiVersion 2.1
 * @NScriptType ClientScript
 * @NModuleScope SameAccount
 *
 * @description clear ns alerts by user click
 *
 * Created by David Smith on 10/6/2022
 *
 * @copyright 2022 Blue Banyan Solutions
 */
define(['N/ui/message'], function (message) {
    /**
     * Function to be executed after page is initialized.
     *
     * @governance XXX
     *
     * @param scriptContext
     *        {Object}
     * @param scriptContext.currentRecord
     *        {Record} Current form record
     * @param scriptContext.mode
     *        {String} The mode in which the record is being accessed (create,
     *        copy, or edit)
     *
     * @return {void}
     *
     * @since 2015.2
     *
     * @static
     * @function pageInit
     */
    function pageInit(scriptContext) {
        console.log('load ui messages')
        window.data = [
            {
                _id: "msg1",
                _message: "this is message 1",
                _type: message.Type.CONFIRMATION,
                _title: "message one",
                dismissible: true
            },
            {
                _id: "msg2",
                _message: "this is message 2",
                _type: message.Type.INFORMATION,
                _title: "message two",
                dismissible: true
            },
            {
                _id: "msg3",
                _message: "this is message 3",
                _type: message.Type.WARNING,
                _title: "message three",
                dismissible: false
            },
            {
                _id: "msg4",
                _message: "this is message 4",
                _type: message.Type.ERROR,
                _title: "message four",
                dismissible: false
            }
        ]
        for (let i = 0; i < window.data.length; i++) {
            const notificationId = data[i]._id;
            console.log(notificationId);

            window[notificationId] = message.create({
                title: createHtmlTitle(data[i]._title, data[i].dismissible, notificationId),
                message: data[i]._message,
                type: data[i]._type
            });
            window[notificationId].show();
        }
        setTimeout(function(){
            for (let i = 0; i < window.data.length; i++) {
                const notificationId = window.data[i]._id;
                console.log(notificationId);
                jQuery('#'+notificationId).click(function(){
                    console.log(jQuery(this).attr('id'));
                    window[jQuery(this).attr('id')].hide();
                })
            }
        },2000);

    }

    function createHtmlTitle(title,dismiss,id){
        let t =  title + (dismiss?`<a id="${id}" style="float: right;">close ${id}</a>`: '');
        return t;
    }

    return {
        pageInit: pageInit
    }
});
d
I still get the same issue with that ^ , particularly if add dismiss option to last message alert if you step deeper into the code, the message alert id gets defined as 
this.id = "message-" + new Date().getTime();
(in browser Page -> ui/messaging/reskin.js), so again I suspect the underlying issue is them being created too closely in time together - should resolve itself if implement some appropriate delay
b
The issue was not resolved so we opted to using DOM manipulation for removing the messages. Thanks both for the help
268 Views
Open in Slack
PreviousNext
Powered by