Slate에서 Handlebars로 값 연결하기
Slate는 질의, 함수와 위젯을 {{...}} 형태의 Handlebars 참조로 연결합니다. Dropdown 이름이 w1이면 {{w1.selectedValue}}로 선택값을 읽습니다. Slate가 참조를 평가하여 결과값으로 치환합니다. Helper를 쓸 수 있는 위치에서는 변환이나 조건도 함께 구성할 수 있습니다.
참조할 수 있는 값
변수
Variables editor에서 정의한 값은 {{variableName}}으로 읽습니다. var1이 {"a":[1,2,3]}이면 {{var1.a.[0]}}은 1입니다. 환경 정보는 {{$global.user.firstName}}처럼 참조합니다. 일반 변수와 시스템 변수의 범위는 변수와 사용자별 저장을 따릅니다.
질의와 함수
SQL 또는 HttpJson 질의의 결과는 {{myQuery}}, 함수의 반환값은 {{myFunction}}으로 참조합니다. 질의에는 실행 상태 등을 가진 _response 메타데이터도 있습니다.
{
"name": ["Ceres", "Pallas"],
"earthmoid": [1.59376, 1.23071],
"pha": [false, false],
"datefirstobs": ["1830-04-18", "1825-03-23"],
"_response": {
"hasRun": true,
"message": "Unable to parse query.",
"success": false
}
}
이 구조 예시의 _response.success는 false이므로 성공한 조회로 처리해서는 안 됩니다. _response.message로 오류를 확인할 수 있습니다.
위젯 속성
위젯의 말단(leaf) 속성과 배열 및 배열 안의 값은 참조할 수 있습니다. 예를 들어 다음은 w1이라는 차트의 속성 구성입니다. yearToObsNum은 name과 numofobs 열 배열을 반환하는 질의이고 w9는 선택값을 제공하는 위젯입니다.
{
"allowSelection": true,
"animate": true,
"datasets": [
{
"name": "dataset1",
"renderer": "bar",
"xValues": "{{yearToObsNum.name}}",
"yValues": "{{yearToObsNum.numofobs}}"
}
],
"labelsEnabled": false,
"panZoomEnabled": false,
"selection": {
"indices": [],
"xMax": null,
"xMin": null,
"xValues": [],
"yMax": null,
"yMin": null,
"yValues": []
},
"tooltipsEnabled": false,
"xAxes": [
{
"gridlinesEnabled": false,
"label": "first observed {{w9.selectedValue}}",
"name": "x1",
"position": "bottom",
"scale": "category"
}
],
"yAxes": [
{
"gridlinesEnabled": false,
"label": "Number of Observations",
"name": "y1",
"position": "left",
"scale": "linear"
}
]
}
| 접근 가능한 참조 | 값의 종류 |
|---|---|
{{w1.allowSelection}}, {{w1.animate}}, {{w1.labelsEnabled}}, {{w1.panZoomEnabled}}, {{w1.tooltipsEnabled}} | 말단 속성입니다. |
{{w1.datasets}}, {{w1.xAxes}}, {{w1.yAxes}} | 배열입니다. |
{{w1.datasets.[0]}}, {{w1.yAxes.[0]}} | 배열 원소입니다. |
{{w1.datasets.[0].xValues}}, {{w1.datasets.[0].xValues.[0]}} | 배열 원소의 배열 속성과 그 안의 값입니다. |
{{w1.selection.indices}}, {{w1.selection.xValues}}, {{w1.selection.yValues}} | 선택 상태의 배열입니다. |
{{w1.selection.xMax}}, {{w1.selection.xMin}}, {{w1.selection.yMax}}, {{w1.selection.yMin}} | 선택 상태의 말단 속성입니다. |
위젯 전체인 {{w1}}과 중간 객체인 {{w1.selection}}은 이 접근 방식으로 읽을 수 없습니다.
위치별 치환 방식
Queries editor
질의 자체가 문자열이므로 템플릿도 문자열로 치환합니다. 문자열이 아닌 값은 toString으로 바꿉니다. 일반 객체는 [object Object]가 되므로 JSON 문자열이 필요하면 jsonStringify helper를 사용합니다.
다음 SQL 예제는 선택한 열 목록과 비어 있지 않은 이름 배열을 사용합니다. 식별자는 column, 값은 param으로 처리합니다.
SELECT {{column w8.selectedValues}}
FROM allNamed
WHERE name IN ({{param w12.selection.xValues}});
선택 배열이 준비된 뒤 실행하도록 구성합니다. SQL query와 HttpJson Foundry query가 제공하는 helper는 다르므로 helper 적용 범위를 맞춥니다.
Functions editor
함수에서는 참조의 실제 값으로 치환합니다. 예를 들어 query1이 results 배열을 가진 객체를 반환하는 경우 다음과 같이 읽습니다.
var a = {{query1}};
var b = a.results[0];
return b;
Functions editor에서는 helper를 호출할 수 없습니다. {{jsonStringify query1}} 대신 참조값을 받은 뒤 JavaScript의 JSON.stringify를 사용합니다. {{var1}} = ... 같은 대입으로 함수 밖의 변수나 위젯 속성을 바꿀 수도 없습니다. 변수 변경은 .set 액션으로 구성합니다.
위젯 속성 JSON
편집 모드에서 속성을 설정할 때 Handlebars는 JSON 문자열 안에 넣습니다. 예를 들어 속성값은 "{{variable1}}"처럼 쓰며 따옴표 없이 {{variable1}}을 JSON 값 자리에 넣으면 파싱 오류입니다.
일반적으로 위젯의 템플릿은 문자열로 치환하지만, 중괄호 표현식이 하나뿐이고 그 밖에 공백을 포함한 다른 문자가 없으면 실제 자료형의 값으로 치환합니다.
| 속성에 입력한 JSON 값 | 치환 |
|---|---|
"{{var1}}" | 실제 값입니다. |
"{{ var1 }}" | 공백이 중괄호 안에 있으므로 실제 값입니다. |
"{{ add 2 (add 1 var1) }}" | var1이 숫자일 때 helper 계산의 실제 숫자값입니다. |
["{{var1}}", "{{w1.datasets.[0].xValues.[0]}}"] | 각 원소에서 같은 규칙을 적용합니다. |
"Hello {{var1}}!" | 주변 텍스트를 포함한 문자열입니다. |
" {{var1}} " | 중괄호 밖의 공백 때문에 문자열입니다. |
"{{#if 0}}3{{else}}4{{/if}}" | 표현식이 여러 개이며 결과는 문자열 "4"입니다. |
Variables editor와 Styles editor에서는 Handlebars를 사용할 수 없습니다. View 모드에서 사용자가 위젯 입력창에 직접 입력한 {{...}}도 평가하지 않습니다. 편집할 때 구성해 둔 동적 참조와 사용자 입력을 구분합니다.
표 선택으로 외부 항공기 정보 링크 만들기
항공편 표의 기본 키를 flight_id로 선택했더라도 링크에 필요한 값은 tail_num일 수 있습니다. 선택된 기본 키로 원래 행을 찾은 뒤 등록번호를 읽습니다.
선택한 행 반환
q_allFlights는 flight_id, tail_num 등 같은 길이의 열 배열을 반환하고, w_flightTable의 selectionIdentityColumnId는 flight_id로 설정되어 있다고 가정합니다. 기본 키는 고유해야 하며 tail_num은 등록번호 문자열입니다. f_selectedRowValues Slate 함수에 다음 본문을 넣습니다.
var data = {{q_allFlights}};
var selection = {{w_flightTable.selectedRowKeys}};
if (selection.length === 0) return [];
var selectionColumn = {{w_flightTable.selectionIdentityColumnId}};
var keys = data[selectionColumn];
var columns = Object.keys(data).filter(function (key) {
return Array.isArray(data[key]);
});
var positions = new Map();
for (var i = 0; i < keys.length; i++) {
positions.set(keys[i], i);
}
var rows = [];
for (var s = 0; s < selection.length; s++) {
var index = positions.get(selection[s]);
if (index === undefined) continue;
var row = Object.create(null);
for (var c = 0; c < columns.length; c++) {
row[columns[c]] = data[columns[c]][index];
}
rows.push(row);
}
return rows;
selectedRowKeys는 사용자가 선택한 행의 기본 키 목록입니다. JSON 편집기 아래의 사용자 상호작용 속성에서 읽기 전용 값으로 확인할 수 있습니다. 이 예제는 선택값 중 현재 데이터에 남아 있는 행만 반환하고 _response처럼 열 배열이 아닌 메타데이터는 제외합니다. Map을 사용할 수 있는 대상 브라우저 구성이 필요합니다.
편집 화면의 Test에서 행을 선택하여 값을 확인할 수 있습니다.
Text 위젯의 링크
Text 위젯을 추가하고 이름을 w_linkingButton으로 정해 표 위에 둡니다. Property의 Content > HTML에 다음을 설정합니다. 등록번호가 없는 상태에서는 이동 링크를 만들지 않습니다.
{{#if f_selectedRowValues.[0].tail_num}}
<a
class="pt-button pt-intent-primary pt-icon-document-open"
target="_blank"
rel="noopener noreferrer"
href="https://registry.faa.gov/AircraftInquiry/Search/NNumberResult?nNumberTxt={{encodeURIComponent f_selectedRowValues.[0].tail_num}}"
role="button">
Learn More About Aircraft {{f_selectedRowValues.[0].tail_num}}
</a>
{{else}}
<span class="pt-button pt-disabled" aria-disabled="true">항공편을 선택하세요</span>
{{/if}}
pt-button은 버튼 모양, pt-intent-primary는 기본 강조 색상, pt-icon-document-open은 Blueprint 아이콘을 적용합니다. 링크의 질의 값은 encodeURIComponent로 인코딩합니다. 여러 행을 선택해도 이 버튼은 첫 결과 행의 항공기를 대상으로 합니다.
Text를 오른쪽 정렬하는 스타일은 다음과 같습니다. 이 선택자와 일치하는 Text 위젯에 적용됩니다.
sl-text { text-align: right; }
사용자가 항공편을 선택하면 링크와 레이블이 그 행의 tail_num을 사용합니다. 링크를 누르면 FAA 사이트에 해당 등록번호를 전달하여 새 탭으로 엽니다.
구성을 저장하고 오른쪽 위 X로 View 모드에 나갑니다.