Macros de IU

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 7 min. de leitura
  • Macros de IU são componentes discretos em script que os administradores podem adicionar à interface do usuário.

    As macros de IU são normalmente controles que fornecem entradas ou informações não fornecidas por tipos de campo existentes. Por padrão, o sistema fornece macros de IU para uma variedade de elementos de interface do usuário, como:
    • Todos os formatadores
    • O carrinho do catálogo de serviços
    • Os ícones de ação ao lado dos campos
    • Os ícones de ação em formulários e listas
    • Os widgets de um sistema de gerenciamento de conteúdo
    • O designer de atividade do app Orquestração

    Os administradores podem criar suas próprias macros de IU para fornecer controles ou interfaces personalizados. Criar macros de IU requer conhecimento de Script Jelly . Revise as macros de IU existentes para obter exemplos e abordagens sugeridas. Aqueles que desejam criar interfaces personalizadas com tecnologias JavaScript devem considerar o Portal de serviços como uma alternativa.

    Nota:
    Para exibir macros de IU disponíveis, navegue até Tudo > IU do Sistema > Macros de IU.

    Noções básicas de macro de IU

    Macros de IU podem ser usadas para criar soluções que não podem ser criadas usando os tipos de variáveis de catálogo disponíveis.

    Macros de IU acessíveis

    Várias macros de IU estão disponíveis na tabela Macros de IU [ui_macros]. Essas macros de IU têm nomes que começam com iu_ E emular o comportamento de um subconjunto de tipos de campo de formulário padrão para uso em páginas de IU. Por exemplo, a macro de IU ui_date_time pode agir como um campo glide_date_time em uma página de IU, fornecendo um campo de entrada digitável com um seletor de data/hora.

    Uma macro de IU pode ser incluída em uma página de IU com o marcador Jelly do <g:>. O exemplo a seguir inclui a Macro de IU ui_date_time, fornecendo dois atributos opcionais para a Macro de IU:
    <g:ui_date_time name="due_date" value="2023-11-24 08:30:00" onchange="checkDateValue()" />
    Os valores de atributo no marcador Jelly do <g:> são fornecidos à macro de IU como variáveis prefixadas por jvar. A macro de IU pode usar as variáveis prefixadas jvar em seu XML.
    Tabela 1. Atributos de marcador Jelly usados como variáveis prefixadas jvar
    Atributos variáveis prefixadas jvar
    nome jvar_name
    valor jvar_value
    onchange jvar_onchange
    Nota:
    Essas macros de IU não se destinam a oferecer suporte a todos os recursos do tipo de campo de formulário correspondente. Em muitos casos, as macros são destinadas apenas a específicos ServiceNow casos de uso da aplicação.

    . iu_ - As macros de IU prefixadas incluem descrições que especificam atributos compatíveis que podem (ou devem) ser fornecidos na tag Jelly do <g:> da página de IU. Para exibir macros de IU disponíveis, navegue até Tudo > IU do Sistema > Macros de IU.

    /

    Macros de IU personalizadas

    A macro de IU ui_example usa três variáveis prefixadas em jvar: Jvar_name, jvar_test_attribute e jvar_laptop_type. Essas variáveis podem ser fornecidas à macro de IU como atributos name, test_attribute e laptop_type em um marcador Jelly do <g:> em uma página de IU.

    Criando a macro de IU ui_example
    Navegar até Tudo > IU do Sistema > Macros de IU e selecione Novo .
    Nomeie a macro iu_example e adicione o script a seguir ao XML campo:
    <?xml version="1.0" encoding="utf-8" ?>
    <j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide">
        <div>name jvar: ${jvar_name}</div>
        <div>test_attribute jvar: ${jvar_test_attribute}</div>
        <div>laptop_type jvar: ${jvar_laptop_type}</div>
    </j:jelly>
    Usando a macro em uma página de IU
    Navegar até Tudo > IU do Sistema > Páginas de IU e selecione Novo . Você será solicitado a selecionar uma função de administrador.
    Nomeie a página de IU e adicione o script a seguir ao HTML campo:
    <?xml version="1.0" encoding="utf-8" ?>
    <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
        <div style="text-decoration:underline">Template include one:</div>
        <g:ui_example name="Fred Luddy" test_attribute="I am an attribute" laptop_type="ThinkPad" />
        <hr/>
        <div style="text-decoration:underline">Template include two:</div>
        <g:ui_example name="Pat Casey" test_attribute="I am a different attribute" laptop_type="Macbook Pro" />
    </j:jelly>
    Verificando saída
    Na página de IU, você pode clicar em Experimente para exibir os resultados.
    Nota:
    Se você criar uma macro e ela não for exibida conforme o esperado na página de IU, limpar o cache poderá ajudar. Para limpar o cache da sua instância, no navegador, insira cache.do/cache.do <server_url> .

    Chamando macros de IU

    Os administradores podem chamar macros de IU de determinados tipos de registro associados à interface do usuário.

    Tabela 2. Chamando macros de IU por tipo de registro
    Tipo de registro Exemplo
    Atributo de dicionário

    Exiba um ícone para um campo de referência:

    ref_contributions=ui_macro_name
    Página da interface do usuário

    Exiba algo em uma página de IU:

    <g:macro_invoke macro="ui_macro_name" />
    Macro de IU

    Chame uma macro de IU de outra macro de IU:

    <?xml version= "1.0" encoding="utf-8"&nbsp;?>
    <j:jelly trim= "false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
      <g:ui_macro_name />
      <g:ui_macro_name_2 />
    </j:jelly>

    Formulário de macro de IU

    Cada registro de macro de IU consiste em um nome e um documento XML escrito no código Jelly.

    Tabela 3. Campos de macro de IU
    Campo Descrição
    Nome Um nome exclusivo e descritivo para esta macro.
    Ativo Marque a caixa de seleção para renderizar o elemento conforme definido. Desmarque a caixa de seleção para desabilitar o elemento sem excluir o código. Por exemplo, o. email_reply a macro está inativa por padrão.
    Descrição Descreva a finalidade da macro e os parâmetros passados para ela.
    XML Script Jelly que define a macro.

    Aprovação personalizada macro de IU

    Esta seção descreve como criar uma macro de IU de aprovação personalizada.

    Aviso:
    A personalização descrita aqui foi desenvolvida para uso em instâncias específicas e não é compatível com Now Support. Este método é fornecido no estado em que se encontra e deve ser testado cuidadosamente antes da implementação. Publique todas as perguntas e comentários sobre esta personalização no fórum da nossa comunidade.

    Nome do script Macro de IU de Aprovação Personalizada

    Tipo Macro de IU

    Descrição : Esta é uma opção para obter mais detalhes da exibição Minhas aprovações de um plano de execução. Isso pode ser feito criando uma nova macro de IU. Navegue até IU do sistema e clique em Macros de IU . Primeiro, você precisará renomear o existente approval_summarizer_sc_task para algo como approval_summarizer_sc_task_old e desative-o. Em seguida, você precisará criar um novo usando o mesmo nome ( approval_summarizer_sc_task ). Basicamente, o nome deve dizer o que a macro faz e o que ela se aplica. Neste caso, estamos substituindo um existente, então decidimos reutilizar o nome existente.

    Figura 1. Macros de aprovação

    Em seguida, você deve copiar o script xml na parte inferior deste artigo para a janela de código xml na nova macro de IU. Esta é uma ótima maneira de fornecer alguns detalhes a um aprovador quando você está fazendo aprovações de item de linha por meio de tarefas de aprovação nos Planos de execução do Catálogo de serviços.

    À maneira antiga

    Esta é a exibição que você vê em Minhas aprovações ao usar uma tarefa de aprovação por meio do método antigo.

    Figura 2. Minhas aprovações (maneira antiga)

    Observe que não há muitos detalhes dizendo ao aprovador o que ele está realmente aprovando. Você pode ver a descrição resumida da tarefa, mas não muito sobre o que o item é.

    O novo caminho

    Esta é a exibição que você verá se usar o script xml abaixo no lugar da macro de IU OOB (pronta para uso).

    Figura 3. Minhas aprovações

    Usando este método, você pode ver detalhes como a aprovação da solicitação. Você tem um link para o item solicitado, uma descrição resumida (que contém a capacidade de expandir as variáveis do item), preço, quantidade e o preço total. Isso ajuda o aprovador a mostrar mais detalhes. Agora eles podem ver o que estão realmente aprovando.

    Script:

    <?xml version="1.0" encoding="utf-8" ?>
        <j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
        <tr>
            <td class="label_left" width="100%">
                <label style="margin-left: 10px">
                    ${gs.getMessage('Summary of Item being approved')}:
                    <input style="visibility: hidden" NAME="make_spacing_ok"></input>
                </label>
            </td>
        </tr>
        <g:evaluate var="jvar_ni" expression="
            var sc_task = ${ref}.sysapproval;
            var sc_req_labels = new GlideRecord('sc_req_item');
            sc_req_labels.initialize();
            var sc_req_item = new GlideRecord('sc_req_item');
            sc_req_item.addQuery('request_item', sc_task.request_item.sys_id);
            sc_req_item.query();
        " />
        <tr>
            <td width="100%">
                <table width="100%">
                    <tr>
                        <td class="label_left" width="150px">
                            <label style="margin-left: 10px">
                                ${sc_task.request_item.request.opened_by.sys_meta.label}:
                            </label>
                        </td>
                        <td>
                            ${sc_task.request_item.request.opened_by.getDisplayValue()}
                        </td>
                    </tr>
                    <tr> 
                        <td class="label_left" width="150px">
                            <label style="margin-left: 10px">
                                ${sc_task.request_item.request.requested_for.sys_meta.label}:
                            </label>
                        </td>
                        <td>
                            ${sc_task.request_item.request.requested_for.getDisplayValue()}
                        </td>
                    </tr>
                    <tr>
                        <td class="label_left" width="150px">
                            <label style="margin-left: 10px">${gs.getMessage('Total')}:</label>
                        </td>
                        <td>
                            <g:currency_format value="${sc_task.request_item.request.price}" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <j:set var="jvar_line_num" value="0" />
        <tr>
            <td width="100%">
                <table width="100%">
                    <tr class="header">
                        <td colspan="2">
                            ${sc_req_labels.number.sys_meta.label}
                        </td>
                        <td>
                            ${sc_req_labels.description.sys_meta.label}
                        </td>
                        <td>
                            ${sc_req_labels.price.sys_meta.label}
                        </td>
                        <td>
                            ${sc_req_labels.quantity.sys_meta.label}
                        </td>
                        <td>
                            ${gs.getMessage('Total')}
                        </td>
                    </tr>
                    <j:set var="jvar_item_price" value="${sc_task.request_item.price * sc_task.request_item.quantity}"/>
                    <j:set var="jvar_overall_total" value="${jvar_overall_total + jvar_item_price}"/>
                    <j:set var="jvar_line_color" value="odd"/>
                    <j:set var="jvar_line_num" value="${jvar_line_num + 1}"/>
                    <j:if test="${jvar_line_num % 2 == 0}">
                        <j:set var="jvar_line_color" value="even"/>
                    </j:if>
                    <g:evaluate var="ni" expression="
                        var smart_description = sc_task.request_item.cat_item.short_description;
                        if (smart_description == null || smart_description == '' || smart_description == 'undefined')
                            smart_description = sc_task.request_item.cat_item.name;
                    "/>
                    <tr class="${jvar_line_color}">
                        <td valign="top">
                            <g2:evaluate var="jvar_pop_target" expression="$[ref].getRecordClassName()" />
                            <a class="linked" target="gsft_main"                             href="sc_req_item.do?sys_id=${sc_task.request_item.sys_id}"                             onmousemove="popListDiv(event, 'sc_req_item', '${sc_task.request_item.sys_id}','${sysparm_view}')"                             onmouseout="lockPopup(event)">
                                <img src="images/icons/hover_icon.gifx" class="clsshort"/>
                            </a>
                        </td>
                        <td valign="top">
                            <a class="linked" target="gsft_main"                             href="sc_req_item.do?sys_id=${sc_task.request_item.sys_id}">
                                ${sc_task.request_item.number}
                            </a>
                        </td>
                        <td valign="top" width="50%">
                            <g:call function="variable_summary_approval.xml" 
                                question_name="${sc_task.request_item.sys_id}"
                                question_help_tag="${smart_description}" 
                                sc_req_item="${sc_task.request_item.sys_id}"
                                help_class="${jvar_line_color}"/>
                        </td>
                        <td valign="top"> <g:currency_format value="${sc_task.request_item.price}"/> </td>
                        <td valign="top"> ${sc_task.request_item.quantity}</td>
                        <td valign="top"> <g:currency_format value="${jvar_item_price}"/></td>
                    </tr>
                </table>
            </td>
        </tr>
    </j:jelly>