첫 번째 매시업을 만들어 보세요

온라인 편집

새로운 매시업을 개발하려면 다음을 수행해야 합니다:

  1. 관리자로서 Targetprocess 설정 > 매시업 페이지를 엽니다.
  2. 새 매시업 추가 버튼을 누르세요
  3. 선택하고 입력할 자리 표시자 - 대상 프로세스 UI에서 스크립트가 삽입되고 렌더링될 위치
  4. 소스 코드 작성 - 매시업의 실행 가능한 본체
  5. 매시업을 저장하세요
  6. 웹 브라우저에서 Ctrl+R / Cmd+R을 눌러 페이지를 새로고침하세요.

매시업이 저장되면 Targetprocess 계정의 모든 사용자에게 활성화됩니다. 사용자가 저장하는 순간 웹 브라우저에서 Targetprocess를 열어둔 상태라면, 최근 변경 사항이 적용되도록 해당 탭을 수동으로 새로고침해야 합니다.

1. 자리 표시자 선택

Targetprocess의 모든 페이지와 뷰에는 사용자 정의 매시업을 삽입할 수 있는 공간이 마련되어 있습니다. 서로 다른 ID와 클래스를 가진 빈 요소 중 하나를 _mashupPlaceholder 반드시 사용해야 합니다. 여러 매시업을 동일한 공유 자리 표시자에 연결할 수 있습니다.

div-placeholders

모든 페이지와 뷰에는 'footerplaceholder'라는 이름의 다목적 자리 표시자가 존재합니다. 필요할 때마다 사용하세요.

2. 소스 코드 작성

실행 파일 코드 내에서 페이지 구조(DOM)에 연결하여 기존 UI를 수정할 수 있습니다. 예를 들어, 모든 엔티티의 상세 보기에서 "정보"와 "리드 사이클 시간" 사이에 사용자 정의 블록 "사용자 정의 블록"을 삽입하는 매시업을 생성해 보겠습니다.

블록 삽입

먼저, 기존 요소들이 이미 사용하고 있는 클래스와 스타일을 적용한 블록용 요소를 생성해 보겠습니다. 이 목적을 위해 Chrome DevTools 요소 패널을 사용할 수 있습니다. 이 샘플 코드는 요소를 생성합니다:

var newBlockTitle = 'Custom Block';
var newBlockContent = 'Custom Content';
        
var newBlockContainer = '<div class="tau-container ui-collapsible">' +
'<div class="ui-collapsible-header expanded"><div class="ui-children-container"><div class="ui-label-container"><span class="ui-label">' +
newBlockTitle +
'</span></div></div></div>' +
'<div class="tau-container"><div class="ui-customfield"><table><tbody><tr><td class="ui-customfield__label">' +
newBlockContent +
'</td></tr></tbody></table></div></div>' +
'</div>';
사용자 정의 블록 모양 다음 코드 부분은 로드된 뷰의 DOM 구조를 검사하여 새 블록을 삽입할 적절한 위치를 찾으려고 시도합니다. 이를 위해 트리 탐색 jQuery's 함수를 사용합니다. 페이지에 필요한 위치가 포함되어 있지 않을 경우 실행 흐름을 종료합니다. 또한, 우리는 어디에서부터

$pageElement

웹 페이지의 모든 요소를 포함한 리소스가 제공됩니다.
var $insertAfterBlockSpan = $pageElement.find('.ui-label:contains("Info")');
var $insertAfterBlockContainer = $insertAfterBlockSpan.closest('.tau-container.ui-collapsible');
if ($insertAfterBlockContainer.length) {
    // do something if proper place is found
}
적절한 위치가 발견되면, 우리의 새로운 사용자 정의 블록이 페이지 구조에 다음과 같이 추가됩니다: jQuery:
$insertAfterBlockContainer.after(newBlockContainer);
매시업이 거의 준비되었습니다. 이제 이를 구독 함수로 감싸야 합니다. 엔티티의 상세 보기가 포함된 페이지가 웹 브라우저에 렌더링될 때 활성화됩니다:
tau.mashups
    .addDependency('tp/general/view')
    .addMashup(function(view) {
        view.onRender(function($pageElement) {
            // insert our custom code here
        });
    });
이제 모든 샘플 블록을 하나의 코드 파일로 합성할 준비가 되었습니다.
tau.mashups
    .addDependency('tp/general/view')
    .addMashup(function(view) {
        view.onRender(function($pageElement) {
            var newBlockTitle = 'Custom Block';
            var newBlockContent = 'Custom Content';

            var newBlockContainer = '<div class="tau-container ui-collapsible">' +
                '<div class="ui-collapsible-header expanded"><div class="ui-children-container"><div class="ui-label-container"><span class="ui-label">' +
                newBlockTitle +
                '</span></div></div></div>' +
                '<div class="tau-container"><div class="ui-customfield"><table><tbody><tr><td class="ui-customfield__label">' +
                newBlockContent +
                '</td></tr></tbody> </table></div></div>' +
                '</div>';

            var $insertAfterBlockSpan = $pageElement.find('.ui-label:contains("Info")');
            var $insertAfterBlockContainer = $insertAfterBlockSpan.closest('.tau-container.ui-collapsible');
            if ($insertAfterBlockContainer.length) {
                $insertAfterBlockContainer.after(newBlockContainer);
            }
        });
    });

3. 매시업 저장

타겟프로세스 계정에 매시업을 설치해 보겠습니다.
  1. 관리자로 계정에 로그인하십시오
  2. 설정 -> 시스템 설정 -> 매시업에서 매시업 관리자를 엽니다
  3. 새 매시업 추가 버튼을 누르세요
  4. 이름란 에 CustomBlockAppender 입력하십시오
  5. Placeholder(s) 아래에 footerplaceholder를 입력하세요
  6. 코드 아래에 있는 소스 코드 블록 전체를 복사하여 붙여넣으세요
  7. 매시업 저장 버튼을 누르세요
  8. 녹색 "매시업이 성공적으로 저장되었습니다" 메시지가 저장 작업을 확인해 줍니다.
매시업 설치됨새 매시업 추가 및 저장 이 목록에서 설치된 매시업의 설정을 열고 필요할 때 소스 코드를 수정할 수 있습니다.

4. 결과 확인

웹 브라우저에서 사용자 스토리에 대한 상세 페이지를 다시 불러오도록 합시다. 우리의 매시업은 모든 엔티티의 상세 보기에서 작동하며 모든 사용자가 이를 확인할 수 있습니다. 끝났어요! 매시업