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 |
| 온체인지 | jvar_onchange |
ui_ 프리픽스가 붙은 UI 매크로에는 UI 페이지의 <g:> Jelly 태그에서 제공할 수 있는(또는 반드시 제공해야 하는) 지원되는 속성을 지정하는 설명이 포함되어 있습니다. 사용 가능한 UI 매크로를 보려면 다음으로 이동하십시오. .
사용자 지정 UI 매크로
ui_example UI 매크로는 jvar_name, jvar_test_attribute 및 jvar_laptop_type의 세 가지 jvar 프리픽스 변수를 사용합니다. 이러한 변수는 UI 페이지의 <g:> Jelly 태그에서 이름, test_attribute 및 laptop_type 속성으로 UI 매크로에 제공될 수 있습니다.
- ui_example 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 페이지의 이름을 지정하고 다음 스크립트를 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 코드 창에 복사해야 합니다. 이는 서비스 카탈로그 실행 계획 내의 승인 작업을 통해 라인 항목 승인을 수행할 때 승인자에게 몇 가지 세부 정보를 제공하는 좋은 방법입니다.
옛날 방식
이전 방법을 통해 승인 작업을 사용할 때 내 승인에 표시되는 뷰입니다.
승인자에게 실제로 무엇을 승인하는지 알려주는 세부 정보가 많지 않습니다. 작업에 대한 짧은 설명을 볼 수 있지만 항목이 무엇인지에 대한 대략은 많지 않습니다.
새로운 방식
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>