Crie e personalize mensagens de alerta em Construtor de IU

  • Versão de lançamento: Zurich
  • Atualizado 24 de nov. de 2025
  • 6 min. de leitura

    • Saiba como as mensagens de alerta ajudam você a comunicar feedback e atualizações de status usando abordagens padrão e com script.

    Os alertas são componentes que exibem notificações padronizadas, como feedback, avisos e confirmações. Eles são fáceis de configurar sem script, mas você pode adicionar um script para funcionalidade mais avançada.

    Figura 1. Tipos de mensagem de alerta
    Uma série de diferentes tipos de alertas.

    Construtor de IU compatível com vários tipos de mensagens de alerta. Para ver como cada um se comporta, abra Documentação do componente de alerta e experimente diferentes configurações na visualização interativa.

    Crie mensagens de alerta em Construtor de IU

    Adicione e configure mensagens de alerta para notificações simples sem script.

    Antes de Iniciar

    Função necessária: ui_builder_admin

    Por Que e Quando Desempenhar Esta Tarefa

    Use a configuração de mensagem de alerta padrão para notificações simples. Neste exemplo, o alerta exibe uma saudação personalizada usando o nome completo do usuário conectado.

    Figura 2. Visualização do layout final
    Alerta que aparece no menu do cabeçalho, saudando o usuário conectado, com destaque sobre o componente.
    1. Alerta : Exibe a mensagem de boas-vindas.
    Este procedimento usa Construtor de IUcomponentes para criar layouts dinâmicos e interativos. Para obter mais informações sobre como configurar componentes, consulte:
    Tabela 1. Componentes usados neste procedimento
    Componente Links de documentação
    Alerta

    Procedimento

    1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IUpara obter mais informações sobre como criar experiências.
    3. Crie uma página do zero.
      Para obter mais informações sobre como criar uma página, consulte Crie uma página no Construtor de IU .
    4. Adicione um alerta.
      1. Na árvore de conteúdo, selecione - Adicionar conteúdo .
      2. Pesquisar alerta e adicione-o da caixa de ferramentas.
      3. Na árvore de conteúdo, passe o mouse sobre Alerta 1 e selecione o ícone de configuração , em seguida, selecione Renomeie .
        O menu de ações adicionais na árvore de conteúdo aberto para o componente de alerta, com um cursor passando o mouse sobre a opção Renomear.
      4. Substitua o texto no Rótulo do componente campo com Mensagem de boas-vindas .
        . ID do componente o campo é preenchido automaticamente.
      5. Selecione Aplicar.
    5. Configure a mensagem de alerta.
      1. Com Mensagem de boas-vindas selecionado na árvore de conteúdo, navegue até o painel de configuração e defina as seguintes propriedades:
        Campo Valor
        Tipo Informações
        Ícone circle-info-outline
        Cabeçalho Vazio (exclua qualquer texto dentro do campo)
        Link Vazio (selecione Editar , em seguida, exclua qualquer texto dentro Rótulo e. Href )
        Ação Vazio (selecione Editar , definido Tipo para -- Nenhum -- , em seguida, exclua qualquer texto dentro Rótulo e. Href )

        Seu painel de configuração deve ter esta aparência:

        Painel de configuração para alerta, com destaques sobre o rótulo do componente, Tipo, ícone, cabeçalho, link, e Ação.

      2. Passe o mouse sobre Mensagem e selecione o ícone vincular dados .
      3. Selecione Fórmulas , então Cadeia de caracteres , em seguida, clique duas vezes ou arraste CONCAT para mover a fórmula para a área acima.
        Vincular caixa de diálogo de dados mostrando a função CONCAT com valores vazios.
      4. Clique duas vezes valor 1 para selecionar o campo e selecione novamente para inserir texto.
      5. Entrar "Boas-vindas! " , certificando-se de incluir um espaço à direita após o ponto de exclamação.
      6. Clique duas vezes valores para selecionar o campo e selecione novamente para inserir texto.
      7. Selecione Tipos de dados , então Propriedades da página .
      8. Em Exibição de cápsula , selecione os comprimidos na seguinte ordem: sessão > usuário > fullName.
      9. Clique duas vezes ou arraste Nome completo para movê-lo para a área acima, selecione Aplicar .
        Vincular caixa de diálogo de dados mostrando a função CONCAT com "Bem-vindo! " E a context.session.user.fullName como seus valores.
    6. Salve e teste sua página.
      1. Selecione Salvar no canto superior direito.
      2. Selecionar Exibição.

      O alerta aparece na parte superior da página com o texto "Bem-vindo!" seguido pelo nome do usuário conectado.

      Alerta exibido no menu do cabeçalho, saudando o usuário conectado.

    Personalize mensagens de alerta com um script de cliente em Construtor de IU

    Use um script de cliente para criar mensagens de alerta dinâmicas e sensíveis ao contexto.

    Antes de Iniciar

    Função necessária: administrador

    Por Que e Quando Desempenhar Esta Tarefa

    Os alertas com script fornecem notificações que respondem a eventos ou dados externos. Eles são altamente flexíveis e podem reagir a condições complexas, mas exigem conhecimento de script e mais esforço para manter. Neste exemplo, um botão aciona um script de cliente que gera vários alertas com mensagens personalizadas.

    Figura 3. Visualização do layout final
    Construtor de IU editor que mostra um botão e uma série de alertas com script personalizados, com destaques sobre o botão e um alerta.
    1. Botão : Aciona o script do cliente para exibir os alertas.
    2. Alerta : Exibe mensagens personalizadas.
    Este procedimento usa Construtor de IUcomponentes para criar layouts dinâmicos e interativos. Para obter mais informações sobre como configurar componentes, consulte:
    Tabela 2. Componentes usados neste procedimento
    Componente Links de documentação
    Botão
    Alerta

    Procedimento

    1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IUpara obter mais informações sobre como criar experiências.
    3. Crie uma página do zero.
      Para obter mais informações sobre como criar uma página, consulte Crie uma página no Construtor de IU .
    4. Adicione um botão.
      1. Na árvore de conteúdo, selecione - Adicionar conteúdo .
      2. Pesquisar botão e adicione-o da caixa de ferramentas.
      3. Na árvore de conteúdo, passe o mouse sobre Botão 1 e selecione o ícone de configuração , em seguida, selecione Renomeie .
      4. Substitua o texto no Rótulo do componente campo com Alertas de demonstração .
        . ID do componente o campo é preenchido automaticamente.
      5. Selecione Aplicar.
    5. Crie um client script.
      1. Em Dados e scripts , selecione E ao lado de Scripts do cliente .
        Gaveta de dados e scripts com destaque sobre scripts de cliente.
      2. Substitua o texto em Nome do script com Alertas .
      3. Substitua o código pelo seguinte:
        Dica:
        Você pode selecionar o ícone de código de formato para tornar o código mais legível.
        /**
* @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.emit("NOW_UXF_PAGE#ADD_NOTIFICATIONS", {
        items: [
            {
                id: "alert1",
                status: "critical",
                icon: "circle-exclamation-fill",
                content: {
                    type: "html",
                    value: "<h2>Critical: System failure detected!</h2>"                   
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert2",
                status: "high",
                icon: "circle-exclamation-outline",
                content: {
                    type: "string",
                    value: "High: CPU usage exceeded 90%"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert3",
                status: "moderate",
                icon: "circle-pause-outline",
                content: {
                    type: "string",
                    value: "Moderate: Disk space is below 20%"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert4",
                status: "warning",
                icon: "triangle-exclamation-outline",
                content: {
                    type: "html",
                    value: "<h4> Warning: A new software update is ready. </h4>"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert5",
                status: "info",
                icon: "circle-question-fill",
                content: {
                    type: "string",
                    value: "Info: A new software update is available"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert6",
                status: "positive",
                icon: "check-circle-outline",
                content: {
                    type: "string",
                    value: "Positive: Backup completed successfully"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert7",
                status: "low",
                icon: "bell-fill",
                content: {
                    type: "string",
                    value: "Low: Minor update recommended"
                },
                action: { type: "dismiss" }
            }
        ]
    });
}
      4. Selecione Aplicar.
    6. Vincule o botão ao script do cliente com um evento.
      1. Na árvore de conteúdo, selecione o botão que criamos: Alertas de demonstração .
      2. No painel de configuração, selecione Eventos .
      3. Em Botão clicado evento, selecione Adicione manipulador .
      4. Pesquisar alertas , em seguida, selecione Alertas manipulador em Scripts de cliente .
        Caixa de diálogo de eventos que mostra o manipulador para o script de cliente Alertas selecionado.
      5. Selecione Continuar.
      6. Selecione Adicionar.
    7. Salve e teste sua página.
      1. Selecione Salvar no canto superior direito.
      2. Selecionar Exibição.

      Selecionar o botão exibe vários alertas com mensagens que você define no script do cliente.

      Construtor de IU editor que mostra um botão e uma série de alertas com script personalizados.