UI 매크로
UI 매크로는 관리자가 사용자 인터페이스에 추가할 수 있는 개별 스크립트 구성요소입니다.
- 모든 포매터
- Service Catalog 카트
- 필드 옆의 작업 아이콘
- 양식 및 목록의 작업 아이콘
- 컨텐츠 관리 시스템의 위젯
- Orchestration 활동 디자이너
관리자는 사용자 지정 컨트롤 또는 인터페이스를 제공하기 위해 고유한 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 페이지에서 시도(Try It )를 클릭하여 결과를 볼 수 있습니다.
그림 1. UI 매크로로 형식이 지정된 출력이 있는 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>