UI 매크로
UI 매크로는 관리자가 사용자 인터페이스에 추가할 수 있는 개별 스크립트 구성요소입니다.
- 모든 포매터
- 서비스 카탈로그 카트
- 필드 옆의 작업 아이콘
- 양식 및 목록의 작업 아이콘
- 콘텐츠 관리 시스템의 위젯
- 오케스트레이션 활동 디자이너
관리자는 사용자 지정 컨트롤 또는 인터페이스를 제공하기 위해 고유한 UI 매크로를 만들 수 있습니다. UI 매크로를 만들려면 Jelly 스크립트에 대한 지식이 필요합니다. 기존 UI 매크로에서 예제와 제안된 접근 방식을 검토합니다. JavaScript 기술로 사용자 지정 인터페이스를 구축하려는 사용자는 대안으로 Service Portal을 고려해야 합니다.
UI 매크로 기본 사항
UI 매크로는 사용 가능한 카탈로그 변수 유형을 사용하여 빌드할 수 없는 솔루션을 빌드하는 데 사용할 수 있습니다.
액세스 가능한 UI 매크로
UI 매크로 [ui_macros] 테이블에서 여러 UI 매크로를 사용할 수 있습니다. 이러한 UI 매크로의 이름은 ui_ 로 시작하며, UI 페이지에서 사용할 표준 양식 필드 유형의 하위 집합 동작을 에뮬레이트합니다. 예를 들어 ui_date_time UI 매크로는 UI 페이지의 glide_date_time 필드처럼 작동하여 날짜/시간 선택기가 있는 입력 가능 입력 필드를 제공할 수 있습니다.
<g:ui_date_time name="due_date" value="2023-11-24 08:30:00" onchange="checkDateValue()" />| 속성 | JVAR 프리픽스가 붙은 변수 |
|---|---|
| 이름 | jvar_name |
| 값 | jvar_value |
| 온체인지(onchange) | jvar_onchange |
접두사가 ui_ UI 매크로에는 UI 페이지의 <g:> Jelly 태그에 제공할 수 있는(또는 제공해야 하는) 지원되는 특성을 지정하는 설명이 포함되어 있습니다. 사용 가능한 UI 매크로를 보려면 모든> 시스템 UI > UI 매크로로 이동합니다.
사용자 지정 UI 매크로
ui_example UI 매크로는 세 가지 jvar 접두어 변수(jvar_name, jvar_test_attribute 및 jvar_laptop_type)를 사용합니다. 이러한 변수는 UI 페이지의 <g:> Jelly 태그에서 이름, test_attribute 및 laptop_type 속성으로 UI 매크로에 제공될 수 있습니다.
- ui_example UI 매크로 만들기
- 모든> 시스템 UI > UI 매크로로 이동하고 새로 만들기를 선택합니다.매크로 ui_example 의 이름을 지정하고 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> - UI 페이지에서 매크로 사용
- 모든> 시스템 UI > UI 페이지로 이동하여 새로 만들기를 선택합니다. 관리자 역할을 선택하라는 메시지가 표시됩니다.UI 페이지의 이름을 지정하고 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> - 출력 확인 중
- UI 페이지에서 시도를 클릭하여 결과를 볼 수 있습니다.
UI 매크로 호출
관리자는 사용자 인터페이스와 관련된 특정 레코드 종류에서 UI 매크로를 호출할 수 있습니다.
| 기록 유형 | 예제 |
|---|---|
| 딕셔너리 속성 | 참조 필드에 대한 아이콘 표시: |
| UI 페이지 | UI 페이지에 항목 표시: |
| UI 매크로 | 다른 UI 매크로에서 UI 매크로 호출: |
UI 매크로 양식
각 UI 매크로 기록은 Jelly 코드로 작성된 이름과 XML 문서로 구성됩니다.
| 필드 | 설명 |
|---|---|
| 이름 | 이 매크로에 대한 고유하고 설명적인 이름입니다. |
| 활성 | 정의된 대로 요소를 렌더링하려면 확인란을 선택합니다. 코드를 삭제하지 않고 요소를 비활성화하려면 확인란의 선택을 취소합니다. 예를 들어, email_reply 매크로는 기본적으로 비활성 상태입니다. |
| 설명 | 매크로의 목적과 매크로에 전달된 매개변수를 설명합니다. |
| XML | 매크로를 정의하는 Jelly 스크립트입니다. |
사용자 지정 승인 UI 매크로
이 섹션에서는 사용자 지정 승인 UI 매크로를 만드는 방법에 대해 설명합니다.
스크립트 이름: 사용자 지정 승인 UI 매크로
유형: UI 매크로
설명: 다음은 실행 계획의 내 승인 뷰에서 자세한 정보를 얻을 수 있는 옵션입니다. 이 작업은 새 UI 매크로를 만들어 수행할 수 있습니다. 시스템 UI로 이동하여 UI 매크로를 클릭합니다. 먼저 기존 approval_summarizer_sc_task 의 이름을 approval_summarizer_sc_task_old 와 같은 이름으로 바꾸고 비활성화해야 합니다. 그런 다음 동일한 이름(approval_summarizer_sc_task)을 사용하여 새 이름을 만들어야 합니다. 이름은 기본적으로 매크로가 수행하는 작업과 적용 대상을 알려주어야 합니다. 이 경우 기존 이름을 대체하므로 기존 이름을 다시 사용하기로 결정했습니다.
그런 다음 이 문서의 맨 아래에 있는 xml 스크립트를 새 UI 매크로의 xml 코드 창에 복사해야 합니다. 이는 Service Catalog 실행 계획 내의 승인 작업을 통해 라인 항목 승인을 수행할 때 승인자에게 몇 가지 세부 정보를 제공하기에 좋은 방법입니다.
예전 방식
이전 방법으로 승인 작업을 사용할 때 내 승인에 표시되는 뷰입니다.
승인자에게 실제로 승인하는 내용을 알려주는 세부 정보는 많지 않습니다. 작업에 대한 짧은 설명은 볼 수 있지만 항목이 무엇인지에 대해서는 잘 볼 수 없습니다.
새로운 길
OOB(바로 사용 가능) UI 매크로 대신 아래의 xml 스크립트를 사용하는 경우 표시되는 뷰입니다.
이 방법을 사용하면 요청 승인과 유사한 세부 정보를 볼 수 있습니다. 주문한 품목에 대한 링크, 간단한 설명(품목에서 변수를 확장하는 기능 포함), 가격, 수량 및 총 가격이 있습니다. 이렇게 하면 더 자세한 정보를 표시한다는 점에서 승인자에게 도움이 됩니다. 이제 실제로 승인하는 내용을 볼 수 있습니다.
스크립트:
<?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>