Cómo mostrar mensajes toast de éxito, error e información en tu aplicación web

Name.controller.js

onPressButtonMessage: function (oEvent) {
        
        MessageToast.show("Hola, este es un Toast de Éxito ");
        $( ".sapMMessageToast" ).addClass( "sapMMessageToastSuccess " );
        
        },

style.css

/* Estilo: MessageToast */
    /*----------------------------------------------------------*/


    .sapMMessageToastSuccess {
        color: #4F8A10 !important;
        background-color: #DFF2BF !important;
        border: 1px solid #4F8A10 !important;
        border-left: 7px solid #4F8A10 !important;
    }


    .sapMMessageToastInfo {
        color: #00529B !important;
        background-color: #BDE5F8 !important;
        border: 1px solid #00529B !important;
        border-left: 7px solid #00529B !important;
    }

    .sapMMessageToastWarning {
        color: #9F6000 !important;
        background-color: #FEEFB3 !important;
        border: 1px solid #9F6000 !important;
        border-left: 7px solid #9F6000 !important;
    }


    .sapMMessageToastDanger {
        color: #D8000C !important;
        background-color: #FFD2D2 !important;
        border: 1px solid #D8000C !important;
        border-left: 7px solid #D8000C !important;
    }


    .sapMMessageToastNote {
        color: #FCF9F9 !important;
        background-color: #5D5C5C !important;
        border: 1px solid #4E4D4D !important;
        border-left: 7px solid #4E4D4D !important;
    }

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

Gracias Fatih

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

Hola Vaibhav,

Recomiendo usar MessageBox en su lugar.

Si desea utilizar MessageToast, debería cambiar el css y agregar algo de contenido html div para añadir un ícono. Según éxito o error, complete msgTxt y bgcolor, icon url abajo. Puede probar la página de prueba js proporcionada por Sai.

jQuery.sap.require("sap.m.MessageToast");

var oButton = new sap.m.Button({

text: "Mostrar Error",

press: function(oEvent) {

var msgTxt = 'Mensaje de Éxito o Error';

var bgColor = 'verde'; //'rojo' o '#FF0000';

// cualquier url bajo su carpeta de recursos como /resources/success.png o remoto

var iconUrl = ' http://www.adestra.com/wp-content/uploads/2013/10/conversions-icon.png';

sap.m.MessageToast.show(msgTxt, {

duration: 10000, width:"20em"

});

var oMessageToastDOM = $('#content').parent().find('.sapMMessageToast');

oMessageToastDOM.css('background', bgColor);

oMessageToastDOM.append('<div style="position: absolute; left: 10px; top:15px; z-index:999;"><img src="'+ iconUrl +'" width="24px" height="24px"></div>');

}

});

oButton.placeAt("content");

Saludos cordiales

Fatih

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

¡Hola Vaibhav!

Supongo que el icono no se puede mostrar. Sin embargo, puedes mostrar un color de fondo diferente para indicar error / éxito.

¿Te servirá este ejemplo? JS Bin - Depuración colaborativa de JavaScript

Saludos,

Sai.

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

PARA MÁS INFORMACIÓN
INGRESA TUS DATOS

Etiquetas más populares

Ver todo

Aprende en Comunidad

4 Respuestas

PARA MÁS INFORMACIÓN
INGRESA TUS DATOS

Etiquetas más populares

Preguntas más populares

Partners:

Aprende en Comunidad

Cómo mostrar mensajes toast de éxito, error e información en tu aplicación web

4 Respuestas

PARA MÁS INFORMACIÓNINGRESA TUS DATOS

Etiquetas más populares

Preguntas más populares

Partners:

PARA MÁS INFORMACIÓN
INGRESA TUS DATOS