g_modal — Cliente

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 11 min. de leitura

    • A API g_modal permite que você exiba uma janela modal para aprimorar a funcionalidade da aplicação.

    Use esta API para exibir modais em espaços.

    Usando esta API, você pode:
    • Exibir campos de tipo de entrada em uma janela modal.
    • Mostre algo em um quadro, como uma página de IU ou link externo.
    • Executar uma ação na confirmação do usuário.
    • Carregar um componente.
    • Use HTML para preencher o conteúdo de um modal.

    g_modal – alerta (cadeia de caracteres título, mensagem de cadeia de caracteres, retorno de chamada de função, objeto de estilo)

    Exibe uma mensagem de alerta relacionada a uma ação de IU.

    Tabela 1. Parâmetros
    Nome Tipo Descrição
    título Cadeia de caracteres Opcional. Título a ser exibido no cabeçalho do modal.

    Padrão: alerta
    mensagem Cadeia de caracteres Mensagem a ser exibida no corpo do modal.
    Nota:
    Se você passar apenas um parâmetro, o método o tratará como o parâmetro message.
    retorno de chamada Função Opcional. Função a ser chamada depois que o formulário foi enviado e processado no servidor.
    A função de retorno de chamada tem o formato callbackFunction(String action_verb, String sys_id, String table, String displayValue) em que:
    • action_verb: Nome da ação de IU executada. Exemplos:
      • sysverb_cancel (botão Cancelar)
      • sysverb_insert (botão Enviar)
      • sysverb_save (botão Salvar).
    • sys_id: Sys_id do registro afetado.
    • table: Nome da tabela que contém o registro.
    • displayValue: Valor que aparece no formulário.

    Padrão:
    estiloObjetoOpcional. Estilo do botão de confirmação a ser exibido no modal.
    "style": {
  "buttonTitle": "String",
  "buttonType": "String"
}
    estilo.botãoTítulo Cadeia de caracteres Opcional. Texto a ser exibido no botão de confirmação.

    Padrão: OK
    estilo.botãoTipo Cadeia de caracteres Opcional. Tipo de botão de confirmação a ser exibido.

    Padrão: padrão
    Tabela 2. Retornos
    Tipo Descrição
    Promessa Se um callback parâmetro for aprovado, retornará a promessa se for bem-sucedido; caso contrário, retornará um erro.

    O exemplo de código a seguir mostra como chamar este método para exibir uma mensagem de alerta "Somente o atribuído a pode encerrar esta ação".

    function onClick(g_form) {

  if (g_user.userID != g_form.getValue('assigned_to')) {
    g_modal.alert('Only the assigned to can end this action.');
    return;
  }

  var msg = getMessage("Are you sure you want to take this action?");
  g_modal.confirm(getMessage("Confirmation"), msg, function (confirmed) {
    if (confirmed) {
      g_form.setValue('state', 'closed_complete');
      g_form.save();
    }
  });

  return false;
}

    g_modal - confirm (título da cadeia de caracteres, mensagem da cadeia de caracteres, retorno de chamada da função, objeto de estilo)

    Exibe uma mensagem de confirmação relacionada a uma ação de IU.

    Tabela 3. Parâmetros
    Nome Tipo Descrição
    título Cadeia de caracteres Opcional. Título a ser exibido no cabeçalho do modal.

    Padrão: confirmar
    mensagem Cadeia de caracteres Mensagem a ser exibida no corpo do modal.
    Nota:
    Se você passar apenas um parâmetro, o método o tratará como o parâmetro message.
    retorno de chamada Função Opcional. Função a ser chamada depois que o formulário foi enviado e processado no servidor.
    A função de retorno de chamada tem o formato callbackFunction(String action_verb, String sys_id, String table, String displayValue) em que:
    • action_verb: Nome da ação de IU executada. Exemplos:
      • sysverb_cancel (botão Cancelar)
      • sysverb_insert (botão Enviar)
      • sysverb_save (botão Salvar).
    • sys_id: Sys_id do registro afetado.
    • table: Nome da tabela que contém o registro.
    • displayValue: Valor que aparece no formulário.

    Padrão:
    estilo Objeto Opcional. Estilo dos botões confirmar e cancelar a serem exibidos no modal.
    "style": {
  "cancelTitle": "String",
  "cancelType": "String",
  "confirmTitle": "String",
  "confirmType": "String"
}
    estilo.cancelarTítulo Cadeia de caracteres Opcional. Texto a ser exibido no botão Cancelar.

    Padrão: Cancelar
    estilo.cancelarTipo Cadeia de caracteres Opcional. Tipo de botão Cancelar a ser exibido.

    Padrão: confirmar
    estilo.confirmTitle Cadeia de caracteres Opcional. Texto a ser exibido no botão de confirmação.

    Padrão: OK
    estilo.confirmTipo Cadeia de caracteres Opcional. Tipo de botão de confirmação a ser exibido.

    Padrão: padrão
    Tabela 4. Retornos
    Tipo Descrição
    Promessa Se um callback parâmetro for aprovado, retornará a promessa se for bem-sucedido; caso contrário, retornará um erro.

    O exemplo de código a seguir mostra como chamar este método para exibir a mensagem de confirmação "Tem certeza de que deseja executar esta ação?"

    function onClick(g_form) {

  if (g_user.userID != g_form.getValue('assigned_to')) {
    g_modal.alert('Only the assigned to can end this action.');
    return;
  }

  var msg = getMessage("Are you sure you want to take this action?");
  g_modal.confirm(getMessage("Confirmation"), msg, function (confirmed) {
    if (confirmed) {
      g_form.setValue('state', 'closed_complete');
      g_form.save();
    }
  });

  return false;
}

    Saída:


    Captura de tela que mostra o modal de confirmação gerado pelo código

    g_modal - confirmDestroy (cadeia de caracteres título, mensagem de cadeia de caracteres, retorno de chamada de função, objeto de estilo)

    Exibe uma mensagem de confirmação relacionada a uma ação de IU, com o botão de confirmação mostrado como um estilo destrutivo.

    Tabela 5. Parâmetros
    Nome Tipo Descrição
    título Cadeia de caracteres Opcional. Título a ser exibido no cabeçalho do modal.

    Padrão: confirmar
    mensagem Cadeia de caracteres Mensagem a ser exibida no corpo do modal.
    Nota:
    Se você passar apenas um parâmetro, o método o tratará como o parâmetro message.
    retorno de chamada Função Opcional. Função a ser chamada depois que o formulário foi enviado e processado no servidor.
    A função de retorno de chamada tem o formato callbackFunction(String action_verb, String sys_id, String table, String displayValue) em que:
    • action_verb: Nome da ação de IU executada. Exemplos:
      • sysverb_cancel (botão Cancelar)
      • sysverb_insert (botão Enviar)
      • sysverb_save (botão Salvar).
    • sys_id: Sys_id do registro afetado.
    • table: Nome da tabela que contém o registro.
    • displayValue: Valor que aparece no formulário.

    Padrão:
    estilo Objeto Opcional. Estilo dos botões confirmar e cancelar a serem exibidos no modal.
    "style": {
  "cancelTitle": "String",
  "cancelType": "String",
  "confirmTitle": "String",
  "confirmType": "String"
}
    estilo.cancelarTítulo Cadeia de caracteres Opcional. Texto a ser exibido no botão Cancelar.

    Padrão: Cancelar
    estilo.cancelarTipo Cadeia de caracteres Opcional. Tipo de botão Cancelar a ser exibido.

    Padrão: confirmar
    estilo.confirmTitle Cadeia de caracteres Opcional. Texto a ser exibido no botão de confirmação.

    Padrão: OK
    estilo.confirmTipo Cadeia de caracteres Opcional. Tipo de botão de confirmação a ser exibido.

    Padrão: destrutivo
    Tabela 6. Retornos
    Tipo Descrição
    Promessa Se um callback parâmetro for aprovado, retornará a promessa se for bem-sucedido; caso contrário, retornará um erro.

    Neste exemplo, ...

    g_modal - richText(cadeia de caracteres título, cadeia de caracteres richContent, retorno de chamada de função, tamanho da cadeia de caracteres, cadeia de caracteres cancelTitle, cadeia de caracteres confirmTitle, cadeia de caracteres cancelType, cadeia de caracteres confirmType)

    Exibe um modal que usa HTML passado para gerar o conteúdo dentro do modal.

    Tabela 7. Parâmetros
    Nome Tipo Descrição
    título Cadeia de caracteres Opcional. Título a ser exibido no cabeçalho do modal.

    Padrão: em branco
    richText Cadeia de caracteres Conteúdo HTML a ser exibido no modal.
    Nota:
    Este método remove <![CDATA[<script> ]]> marcadores, JavaScript em linha e outros elementos que podem representar explorações de segurança.
    retorno de chamada Função Opcional. Função a ser chamada depois que o formulário foi enviado e processado no servidor.
    A função de retorno de chamada tem o formato callbackFunction(String action_verb, String sys_id, String table, String displayValue) em que:
    • action_verb: Nome da ação de IU executada. Exemplos:
      • sysverb_cancel (botão Cancelar)
      • sysverb_insert (botão Enviar)
      • sysverb_save (botão Salvar).
    • sys_id: Sys_id do registro afetado.
    • table: Nome da tabela que contém o registro.
    • displayValue: Valor que aparece no formulário.

    Padrão:
    cancelTitle Cadeia de caracteres Opcional. Texto a ser exibido no botão Cancelar.

    Padrão: Cancelar
    confirmarTítulo Cadeia de caracteres Opcional. Texto a ser exibido no botão de confirmação.

    Padrão: OK
    cancelarTipo Cadeia de caracteres Opcional. Tipo de botão Cancelar a ser exibido.

    Padrão: confirmar
    confirmType Cadeia de caracteres Opcional. Tipo de botão de confirmação a ser exibido.

    Padrão: padrão
    Tabela 8. Retornos
    Tipo Descrição
    Promessa Se um callback parâmetro for aprovado, retornará a promessa se for bem-sucedido; caso contrário, retornará um erro.

    g_modal - showFields(cadeia de caracteres título, campos de matriz, instrução de cadeia de caracteres, retorno de chamada de função)

    Exibe uma janela modal que contém os campos especificados. Exibe os botões OK e Cancelar por padrão.

    Tabela 9. Parâmetros
    Nome Tipo Descrição
    retorno de chamada Função Opcional. Função a ser chamada depois que o formulário foi enviado e processado no servidor.
    A função de retorno de chamada tem o formato callbackFunction(String action_verb, String sys_id, String table, String displayValue) em que:
    • action_verb: Nome da ação de IU executada. Exemplos:
      • sysverb_cancel (botão Cancelar)
      • sysverb_insert (botão Enviar)
      • sysverb_save (botão Salvar).
    • sys_id: Sys_id do registro afetado.
    • table: Nome da tabela que contém o registro.
    • displayValue: Valor que aparece no formulário.

    Padrão:
    cancelTitle Cadeia de caracteres Opcional. Rótulo do botão Cancelar.

    Padrão: Cancelar
    cancelarTipo Cadeia de caracteres Opcional. Tipo de botão Cancelar.

    Padrão: padrão
    confirmarTítulo Cadeia de caracteres Opcional. Rótulo do botão de confirmação.

    Padrão: OK
    confirmType Cadeia de caracteres Opcional. Digite do botão de confirmação.

    Padrão: confirmar
    campos Matriz de objetivos Lista de campos a serem exibidos no modal. Cada campo é definido em um objeto separado. Os parâmetros fields que você passa dependem do tipo de campo (fields.type) especificado.
    fields: [
  {
    choices: "String",
    dispalyValue: "String",
    label: "String",
    mandatory: Boolean,
    name: "String",
    reference: "String",
    referringTable: "String",
    referringRecordId: "String",
    type: "String",
    value: "String"
  }
]
    campos.escolhas Matriz de objetivos Obrigatório se o parâmetro fields.type estiver definido como escolha. Lista de opções a serem exibidas no campo de lista associado.
    Por exemplo:
    choices: [
  {
    displayValue: 'Value 1',
    value: 'Value1'
  },
  {
    displayValue: 'Value 2',
    value: 'Value2'
  }
]
    field.label Cadeia de caracteres Texto a ser exibido como o rótulo deste campo no modal.
    campos.obrigatório Booliano Opcional. Sinalizador que indica se o campo é obrigatório.
    Valores válidos:
    • verdadeiro: o campo é obrigatório.
    • falso: o campo é opcional.

    Padrão: falso
    fields.name Cadeia de caracteres Nome interno do campo. Se o parâmetro fields.type estiver definido como referência, será o campo de referência no registro atual que está sendo usado para pesquisa.
    field.reference Cadeia de caracteres Obrigatório se o parâmetro fields.type estiver definido para fazer referênciaa . Nome da tabela a ser referenciada.

    Por exemplo: sys_user
    field.referringTable Cadeia de caracteres Obrigatório se o parâmetro fields.type estiver definido para fazer referênciaa . Nome da tabela da qual você está fazendo referência.

    Por exemplo: incidente
    field.referringRecordId Cadeia de caracteres Obrigatório se o parâmetro fields.type estiver definido para fazer referênciaa . Sys_id do registro que você está chamando no formulário de ação de IU.
    field.type Cadeia de caracteres Tipo de campo a ser exibido no modal.

    Valores válidos:

    • booliano
    • escolha
    • glide_list
    • html
    • referência
    • Cadeia de caracteres
    • área de texto

    Cada tipo de campo tem um conjunto de opções fields.<> que podem ser aprovadas.
    campos.valor Cadeia de caracteres Opcional. Valor a ser exibido no campo.

    Por exemplo, para um campo de opção, você pode exibir um prompt do usuário:

    valor: getMessage(' -- Selecionar -- ')

    Ou, para um campo de referência, você pode exibir o valor de um campo no formulário associado:

    g_form.getValue('caller_id')

    Padrão: em branco
    instrução Cadeia de caracteres Opcional. Instruções a serem exibidas no modal.
    tamanho Cadeia de caracteres Tamanho do modal.
    Possíveis classes CSS modais:
    • alerta: 300 px
    • sm: 400 px
    • md: 600 px
    • lg: 900 px
    título Cadeia de caracteres Opcional. Título a ser exibido no cabeçalho do modal.

    Padrão: em branco
    Tabela 10. Retornos
    Tipo Descrição
    Promessa Retorna a promessa se for bem-sucedido, caso contrário, retornará o erro.

    O exemplo a seguir mostra como solicitar um motivo a um usuário usando uma janela modal e passá-lo de volta para o campo de anotações de trabalho no registro. O método então() retorna uma promessa, que retorna o que o modal retorna; fieldValues neste caso. O campo de anotações de trabalho no lado do cliente, com o valor do campo, está na matriz updateFields. Como apenas um campo é retornado, o exemplo assume uma posição de índice de 0.

    function onClick(g_form) {
    g_modal.showFields({
        title: "Enter your reason",
        fields: [{
            type: 'textarea',
            name: 'work_notes',
            label: getMessage('Reason'),
            mandatory: true
        }],
        size: 'lg'
    }).then(function(fieldValues) {
        g_form.setValue('work_notes', fieldValues.updatedFields[0].value);
        g_form.save();
    });
}

    Saída:

    Captura de tela do modal produzida pelo código associado.

    O exemplo a seguir expande o exemplo acima, adicionando os campos de opção e de referência.

    function onClick(g_form) {

    var fields = [{
        type: 'textarea',
        name: 'work_notes',
        label: getMessage('Reason'),
        mandatory: true
    },
    {
        type: 'choice',
        name: 'reason_code',
        label: getMessage('Reason code'),
        value: getMessage(' -- Select -- '),
        choices: [
          {
            displayValue: 'Duplicate',
            value: 'duplicate'
          },
          {
            displayValue: 'Canceled',
            value: 'canceled'
          }
        ],
        mandatory: true
    },
    {
        type: 'reference',
        name: 'caller_id',
        label: getMessage('What is your name?'),
        mandatory: true,
        reference: 'sys_user',
        referringTable: 'incident',
        referringRecordId: g_form.getUniqueValue(),
	 value: g_form.getValue('caller_id'),
	 displayValue: g_form.getDisplayValue('caller_id')
    }
  ];

  g_modal.showFields({
    title: "Enter your reason",
    fields: fields,
    size: 'lg'
  }).then(function(fieldValues) {
        g_form.setValue('work_notes', fieldValues.updatedFields[0].value);
        g_form.setValue('caller_id', fieldValues.updatedFields[2].value);
        g_form.save();
  });
}

    Saída:

    Captura de tela do modal produzida pelo código associado.

    g_modal - showFrame (cadeia de caracteres título, URL da cadeia de caracteres, retorno de chamada da função, tamanho da cadeia de caracteres, altura da cadeia de caracteres, cadeia de caracteres autoCloseOn)

    Exibe um modal que usa um link para uma URL externa ou página de IU para seu conteúdo.

    Tabela 11. Parâmetros
    Nome Tipo Descrição
    título Cadeia de caracteres Opcional. Título a ser exibido no cabeçalho do modal.

    Padrão: em branco
    URL Cadeia de caracteres URL das informações a serem carregadas no IFrame.
    Nota:
    Se apenas um argumento for passado, ele será tratado como o parâmetro url.
    retorno de chamada Função Opcional. Função a ser chamada depois que o formulário foi enviado e processado no servidor.
    A função de retorno de chamada tem o formato callbackFunction(String action_verb, String sys_id, String table, String displayValue) em que:
    • action_verb: Nome da ação de IU executada. Exemplos:
      • sysverb_cancel (botão Cancelar)
      • sysverb_insert (botão Enviar)
      • sysverb_save (botão Salvar).
    • sys_id: Sys_id do registro afetado.
    • table: Nome da tabela que contém o registro.
    • displayValue: Valor que aparece no formulário.

    Padrão:
    tamanho Cadeia de caracteres Tamanho do modal.
    Possíveis classes CSS modais:
    • alerta: 300 px
    • sm: 400 px
    • md: 600 px
    • lg: 900 px
    altura Número Altura do modal.

    Unidade: pixels
    fechamento automáticoEm Cadeia de caracteres Opcional. Condição na qual o modal é fechado automaticamente, como 'URL_CHANGED'.

    Padrão: não fecha automaticamente o modal.
    Tabela 12. Retornos
    Tipo Descrição
    Promessa Retorna a promessa se for bem-sucedido, caso contrário, retornará o erro. Essa promessa é resolvida quando o modal IFrame é fechado.

    O exemplo a seguir mostra como exibir um artigo da base de conhecimento em um modelo usando o sys_id do registro do artigo da base de conhecimento e um URL base.

    function onClick(g_form) {
  var kbId = '24d9243187032100deddb882a2e3ec33'; //sysId of KB article
  g_modal.showFrame({
    url: '/kb_view.do?sys_kb_id=' + kbId,
    title: 'Test Knowledge Article',
    size: 'lg',
    height: 500
  });
}

    Saída:

    Captura de tela do modal gerado pelo código

    Este exemplo mostra como usar uma página de IU integrada ao criar um modal. Ele usa window.parent.postMessage() na página de IU para passar dados do iFrame de volta para o espaço, já que a API g_form não pode ser acessada em uma página de IU quando está no iFrame.

    function onClick(g_form) {
  function proposeMIC(data) {
    var workNotes = data.msg + "\n" + data.workNotes;
    var notes = g_form.getValue('work_notes') + ' ' + workNotes;
    var bi = g_form.getValue('business_impact') + ' ' + data.businessImpact;
    g_form.setValue('work_notes', notes.trim());
    g_form.setValue('business_impact', bi.trim());
    g_form.submit('sysverb_mim_propose');
  }
	
  function openPopup() {
    if(!g_form.getControl('work_notes')) {
      getMessage('Cannot propose major incident as "Worknotes" is not visible', function(msg) {
	 g_form.addErrorMessage(msg);
      });
      return false;
    }

    var url = "/sn_major_inc_mgmt_mim_propose.do?sysparm_stack=no&sysparm_workspace=" + true;
    g_modal.showFrame({
      title: getMessage("Propose Major Incident"),
      url: url,
      size: 'lg',
      autoCloseOn: 'URL_CHANGED',
      callback: function (ret, data) {
        if (ret)
          proposeMIC(data);
      }
    });
  }
	
  openPopup();
}

    Saída:


    Captura de tela do modal gerado pelo código