사용자 지정 위젯 개요

HTML, CSS 및 JavaScript를 사용하여 Tulip에서 나만의 위젯 만들기

:::(Error) (제한)이 기능은 프로페셔널 요금제 이상에서만 사용할 수 있습니다:::

앱에 끌어다 놓는 항목을 위젯이라고 합니다. 위젯은 버튼, 이미지, 입력 상자 등 도구 모음에서 사용할 수 있는 모든 항목이 될 수 있습니다.

사용자 지정 위젯을 사용하면 코드를 직접 작성하고 자신만의 위젯을 만들어 애플리케이션에 드래그 앤 드롭하여 상호 작용할 수 있습니다. 이 기능을 통해 Tulip 사용자는 Tulip에서 할 수 있는 일의 한계를 확장할 수 있습니다.

이 기능에 대해 자세히 알아보려면 다음 개요 동영상을 시청하세요:

튤립 라이브러리에서 사용자 지정 위젯을 확인해 보세요!

사용자 정의 위젯 기본 사항

사용자 지정 위젯 관리 화면은 계정 설정 페이지에서 찾을 수 있습니다. 이곳에서 위젯을 만들고 삭제할 수 있습니다. 사용자 지정 위젯 편집기를 사용하면 위젯 코드를 작성하고, 소품 및 이벤트를 만들고, 위젯을 미리 볼 수 있습니다. 아래는 소품과 이벤트가 무엇인지 설명하는 다이어그램입니다:

소품: 소품은 사용자 지정 위젯과 Tulip 애플리케이션 간에 공유되는 데이터입니다. 소품은 애플리케이션 편집기에 노출되며 앱 편집자는 소품과 연결할 변수, 테이블 레코드 또는 기타 정보를 선택할 수 있습니다.

이벤트: 이벤트는 위젯이 애플리케이션에 보낼 수 있는 신호입니다. 이벤트를 사용하면 애플리케이션이 트리거로 응답할 수 있으며 정보를 함께 전달할 수 있습니다.

사용자 지정 위젯은 앱 에디터의 사용자 지정 다운 셀렉터를 통해 액세스할 수 있습니다.

위젯 만들기

:::(Warning) (경고)계정 설정 권한이 있는 사용자(계정 소유자)만 사용자 지정 위젯 편집 UI에 액세스할 수 있습니다:::

위젯 편집기 화면은 네 개의 섹션으로 나뉩니다. 왼쪽 하단 섹션에서 작성한 코드는 미리보기 섹션을 클릭하면 미리보기 섹션에 표시됩니다. 미리보기 섹션에서 테스트 목적으로 소품 값을 직접 변경할 수 있습니다.

소품 및 이벤트와 상호 작용하기 위한 특수 함수입니다.

소품 값 가져오기

:::(Warning) (경고) 위젯이 로드되기 전에 위젯에서 사용 중인 소품이 로드된다는 보장은 없으므로 테이블 레코드 필드, 집계 또는 기타 동적 값과 관련된 모든 소품에는 위젯이 로드되는 시점에 null인 경우를 지원하는 로직이 포함되어야 합니다. 소품이 변경될 때 로직을 트리거하는 방법에 대한 자세한 내용은 이 섹션을 참조하세요:

//소품 값 가져오기 getValue('내 소품');``//변수 엘리먼트에 소품 저장 myVariable = getValue('내 소품');

소품이 변경될 때 무언가 수행

//소품 값이 변경될 때마다 무언가를 수행getValue('My Prop', (internalVariable) => { doSomething(internalVariable);});

소품 값 설정하기

setValue('My Text Prop', 'hello!'); // 텍스트 소품의 값을 'hello!'로 설정합니다;


//객체 내 아이템의 값 설정setValue('내 오브젝트 프로핏', { '오브젝트 내부 키': '새로운 값' });```


### **이벤트 발동**


```**이벤트** 발생 fireEvent('event', *payload*); 


//페이로드가 없는 이벤트를 실행합니다fireEvent('내 이벤트');


//이벤트와 함께 이벤트 발동 payloadfireEvent('내 이벤트', myVariable);```


## 위젯 빌드 비디오 예시


![Video](https://www.youtube.com/embed/H08-W2M2Ypo?rel=0){height="576" width="1024"}




---

## **앱 가져오기/내보내기**


**내보내기**


1. 사용자 지정 위젯 개요에서 내보내려는 위젯 옆의 점 3개를 선택합니다.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477703991.png){height="" width=""}


1. "내보내기"를 선택합니다.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704053.png){height="" width="800"}


**가져오기**


1. 사용자 지정 위젯 개요 화면에서 상단의 점 3개를 선택합니다.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704175.png){height="" width="800"}


1. "가져오기"를 선택합니다.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704228.png){height="" width="350"}


1. .json 사용자 지정 위젯 파일을 찾습니다.


## **외부 라이브러리 활성화하기**


외부 라이브러리는 사용자 정의 위젯이 할 수 있는 일을 더욱 확장합니다. 외부 라이브러리는 자바스크립트에서 직접 html을 작성하는 *번거로운* 작업을 많이 처리합니다. 외부 라이브러리를 사용하려는 각 위젯에 대해 외부 라이브러리를 활성화해야 합니다.


1. 위젯에서 리본의 점 3개 메뉴를 클릭합니다.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684182.png){height="" width=""}


1. "외부 라이브러리 사용"을 선택합니다.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684247.png){height="" width="250"}


1. 활성화하려는 확장 프로그램을 선택합니다.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684294.png){height="" width="450"}


다음은 각각의 기능에 대한 기본적인 설명이며, 많은 확장 프로그램이 다양한 분야에서 뛰어난 기능을 제공하므로 자유롭게 탐색해 보세요. 


* **jQuery** - 요소 조작과 함께 보다 간소화된 HTML 요소 선택을 가능하게 합니다.
* **D3 -** 데이터 시각화를 위한 최고의 표준으로, 학습 곡선이 가파르지만 유연성이 매우 뛰어납니다.
* **Google 시각화 -** 이름에서 알 수 있듯이 시각화를 위한 훌륭한 도구입니다.
* **자바스크립트-입솔버 -** 입솔버는 방정식을 풀기 위해 복잡한 계산을 처리할 수 있는 외부 라이브러리입니다.
* **Lodash -** Lodash는 자바스크립트 데이터 유형으로 더 쉽게 작업할 수 있는 수많은 도구를 제공합니다.
* **ChartJS -** 수많은 온라인 리소스를 갖춘 가장 간단한 그래프 라이브러리입니다.
* **Moment -** 날짜 및 시간 작업을 위한 수많은 도구를 제공합니다.