How to add JS messages from custom module?

Question

How do I add messages using Magento 2 Ui messages to page via javascript from a custom module?

I have found a file in Magento/Ui/view/frontend/web/js/view/messages.js that appears to be responsible for adding messages to the page, in the same manner as the php message manager interface.

Am I mistaken? If not, how can it be used to add errors and success messages like the php version?

• Murtuza Zabuawala: please provide more detail to your question
• Magarusu: Hi @LM_Fielding, did you manage to find a solution for this issue? I've stumbled upon 'Magento_Ui/js/model/messageList' myself but I can't seem to get it to work. This is what I did: define(['Magento_Ui/js/model/messageList'], function(messageList) { messageList.addErrorMessage({ message: 'Message to be shown.' }); }); But the message is never displayed.

Answer 1

Looks like you're on the right way. You just need to perform the following simple steps in order to get it working.

1. Add the messages container as a child into your component. It can be done via js layout config.

   <item name="children" xsi:type="array">
    <item name="messages" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/view/messages</item>
    <item name="displayArea" xsi:type="string">messages</item>
    </item>
   </item>
   

   Example: Magento_Customer::view/frontend/layout/default.xml

2. Then add the messages block into a place where you expect to see the messages within your custom KnockoutJS template:

   <!-- ko foreach: getRegion('messages') -->
   <!-- ko template: getTemplate() --><!-- /ko -->
   <!--/ko-->
   

   Example: Magento_Customer::view/frontend/web/template/authentication-popup.html

3. Add the messages list dependency into your js file and call the corresponding function: addSuccessMessage or addErrorMessage.

   define([
    'Magento_Ui/js/model/messageList'
   ], function (messageList) {
    messageList.addSuccessMessage({ message: 'Message to be shown.' });
   });
   

   Example: Magento_Customer::view/frontend/web/js/action/login.js

• Jaisa: shall I do the same thing for backend