Macros de IU
Macros de IU são componentes discretos em script que os administradores podem adicionar à interface do usuário.
- 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. A criação de macros de IU requer conhecimento do script Jelly. Revise as macros de IU existentes para obter exemplos e abordagens sugeridas. Quem quiser criar interfaces personalizadas com tecnologias JavaScript deve considerar o Portal de serviços como uma alternativa.
Noções básicas de macros de IU
As 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 ui_ e emulam 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 atuar 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.
<g:ui_date_time name="due_date" value="2023-11-24 08:30:00" onchange="checkDateValue()" />| Atributos | variáveis com prefixo jvar |
|---|---|
| nome | jvar_name |
| valor | jvar_value |
| na mudança | jvar_onchange |
As macros de IU com prefixo ui_incluem descrições que especificam atributos compatíveis que podem (ou devem) ser fornecidos na página de IU<g:> Marcador Jelly. Para exibir as macros de IU disponíveis, navegue até .
Macros de IU personalizadas
A macro de IU ui_example usa três variáveis com prefixo jvar: jvar_name, jvar_test_attribute e jvar_laptop_type. Essas variáveis podem ser fornecidas para a macro de IU como atributos name, test_attribute e laptop_type em um<g:> Marcador Jelly em uma página de IU.
- Como criar a macro de IU ui_example
- Navegar até e selecione Novo.Nomeie a macro como ui_example e adicione o seguinte script ao campo XML :
<?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> - Como usar a macro em uma página de IU
- Navegar até e selecione Novo. Você será solicitado a selecionar uma função de administrador.Nomeie a página de IU e adicione o seguinte script ao campo HTML :
<?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 Testar para exibir os resultados.
Macros de IU de chamada
Os administradores podem chamar macros de IU de determinados tipos de registro associados à interface do usuário.
| Tipo de registro | Exemplo |
|---|---|
| Atributo de dicionário | Exibir um ícone para um campo de referência: |
| Página da interface do usuário | Exibir algo em uma página de IU: |
| Macro de IU | Chamar uma macro de IU de outra macro de IU: |
Formulário de macro de IU
Cada registro de macro de IU consiste em um nome e um documento XML escrito em código Jelly.
| 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, a macro email_reply 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. |
Macro de IU de aprovação personalizada
Esta seção descreve como criar uma macro de IU de aprovação personalizada.
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 approval_summarizer_sc_task existente para algo como approval_summarizer_sc_task_old e desativá-lo. Em seguida, você precisará criar um novo usando o mesmo nome (approval_summarizer_sc_task). O nome deve informar basicamente o que a macro faz e ao que ela se aplica. Nesse caso, estamos substituindo um nome existente. Por isso, resolvemos reutilizar o nome existente.
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. Essa é uma ótima maneira de fornecer detalhes a um aprovador ao fazer aprovações de itens de linha por meio de tarefas de aprovação nos Planos de execução do Catálogo de serviços.
Da 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.
Observe que não há muitos detalhes informando 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.
A nova maneira
Esta é a exibição que você verá se usar o script xml abaixo no lugar da macro de IU OOB (pronto para uso).
Usando este método, você pode ver detalhes semelhantes à 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, pois mostra 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>