Como exibir mensagens toast de sucesso, erro e informação em seu aplicativo web

Name.controller.js

onPressButtonMessage: function (oEvent) {
        
        MessageToast.show("Olá, este é um Toast de sucesso ");
        $( ".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

Obrigado Fatih

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

Olá Vaibhav,

Recomendo usar MessageBox em vez disso.

Se deseja usar MessageToast, deve alterar o css e adicionar algum conteúdo html div para adicionar um ícone. Dependendo do sucesso ou erro, preencha msgTxt e bgcolor, url do ícone abaixo. Você pode testar a página de teste js fornecida por Sai.

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

var oButton = new sap.m.Button({

text: "Mostrar Erro",

press: function(oEvent) {

var msgTxt = 'Mensagem de sucesso ou erro';

var bgColor = 'verde'; //'vermelho' ou '#FF0000';

// qualquer url sob sua pasta de recursos como /resources/success.png ou 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");

Cumprimentos

Fatih

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

°Olá Vaibhav!

Acredito que o ícone não pode ser exibido. No entanto, você pode mostrar uma cor de fundo diferente para indicar erro/sucesso.

Este exemplo será útil para você? JS Bin - Depuração colaborativa de JavaScript

Saudações,

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

Como exibir mensagens toast de sucesso, erro e informação em seu aplicativo 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