Slate 변수와 사용자별 저장
Slate 변수는 앱 상태, 사용자 입력과 기본값을 보관합니다. 질의와 위젯에서 참조하고 이벤트로 값을 바꿀 수 있습니다. 지원하는 값의 유형은 Number, String, Boolean, Array, Object와 Null입니다.
범위와 이름
왼쪽 (x) 아이콘으로 Variables editor를 열고 + Add new variable을 선택합니다. Shared 또는 Local 범위를 고른 뒤 Name과 기본값을 입력합니다. 입력값으로 자료형을 추론합니다.
| 범위 | 접근과 이름 조건 |
|---|---|
| Shared | 앱의 모든 페이지에서 접근합니다. 이름은 모든 페이지, 위젯, 이벤트, 질의와 함수 사이에서 고유해야 합니다. |
| Local | 생성 당시 편집 중인 페이지에서만 접근합니다. 해당 페이지에서 이름이 고유해야 하며 환경 변수 이름과도 충돌할 수 없습니다. |
이름이 충돌하면 유효한 이름으로 바꾸기 전까지 저장할 수 없습니다.
편집기는 범위, 이름과 기본값 외에 현재값도 읽기 전용으로 표시합니다. 현재값은 이벤트나 URL 때문에 기본값과 다를 수 있습니다.
앱을 다시 로드하면 일반 변수는 기본값을 사용합니다. Shared 변수는 같은 앱 안의 페이지 이동에서는 값을 유지합니다. 앱 재로드 뒤에도 사용자별 값을 보관하려면 아래의 User storage를 사용합니다.
표 변수
Variables 패널은 표 데이터도 저장합니다. 기존 Datasets 패널에서 관리하던 데이터는 Shared 변수로 저장하며 같은 기능을 제공합니다.
새 변수를 만들고 기본값에 다음처럼 열 지향 JSON을 입력하거나 값이 비어 있을 때 Table 탭을 바로 엽니다.
{"column1":["row1","row2"],"column2":["row1","row2"]}
Table 탭은 값이 비어 있거나 {} 또는 열 이름별 배열을 갖는 열 지향 JSON일 때 사용할 수 있습니다. 모든 배열의 길이가 같아야 합니다. [{...}, {...}] 같은 행 지향 배열이나 다른 형태이면 Table 탭이 비활성화됩니다. 두 형태 사이의 변환은 행과 열 스키마 변환에 설명합니다.
표 편집기에서는 열 너비 변경, 셀 편집, 우클릭 문맥 메뉴와 행 및 열의 추가와 삭제를 사용할 수 있습니다.
CSV 불러오기와 크기
표 변수를 선택하거나 새로 만들고 Table 탭의 업로드 옵션에서 로컬 CSV 파일을 고릅니다. 파일을 해석한 값이 표 편집기에 표시됩니다.
Slate 앱의 기본 크기 한도는 2 MB이며 업로드한 CSV 데이터도 이 크기에 포함됩니다. 한도를 넘으면 변경을 저장할 수 없습니다. 큰 데이터는 앱 자체에 넣는 대신 질의나 OSDK로 조회합니다.
이벤트로 값 변경
각 변수에는 VARIABLE_NAME.set 액션이 있습니다. 이벤트의 Action 코드에서 새 값을 반환하면 그 값으로 변수를 갱신합니다. 현재값도 {{VARIABLE_NAME}}으로 읽을 수 있습니다.
예를 들어 Number로 초기화한 v_page_number를 w_button_next_page 버튼을 누를 때 증가시키려면 버튼 클릭 이벤트와 v_page_number.set 액션을 연결하고 다음 본문을 사용합니다.
return {{v_page_number}} + 1;
갱신하면서 String을 Number로 바꾸는 등 자료형을 변경할 수도 있지만 그 값을 사용하는 질의나 위젯의 입력 계약이 맞지 않을 수 있습니다.
URL 입력
URL 질의 매개변수는 기본값보다 우선합니다.
- 한 변수:
?variableName=value - 여러 변수:
?variableName=value&otherVariableName=otherValue
매개변수 이름은 대소문자를 구분합니다. URL에서 읽은 값은 숫자, Boolean이나 객체처럼 보여도 모두 String입니다. 계산에 쓰기 전에 Slate 함수나 Handlebars helper로 필요한 자료형으로 바꿉니다. 위 페이지 번호도 URL로 전달하면 Number 변환 후 사용해야 합니다.
Dropdown의 초기 선택값
가상 소행성 데이터 소스 asteroids에 allnamed 테이블과 name 열이 있다고 가정합니다.
- Dropdown variables example 앱을 만듭니다.
asteroidNames질의를 만들고asteroids데이터 소스에 다음 SQL을 설정한 뒤 Update를 선택합니다.
SELECT name FROM allnamed;
astro변수를 만들고 기본값을 빈 문자열""로 둡니다.- Dropdown을 추가하고 Property의 DATA > Raw에
"{{asteroidNames.name}}"을 넣습니다.
</>Raw/JSON 탭에서selectedValue를null대신"{{astro}}"로 지정합니다. 다른 위젯 설정은 유지합니다. 아직 astro가 빈 문자열이므로 초기 선택은 비어 있습니다.
- 앱을 저장하고 현재 앱 URL에
?astro=Flora를 붙여 엽니다. 이미 다른 질의 매개변수가 있으면&astro=Flora를 사용합니다. 변수와 소행성 이름의 대소문자를 맞추면 초기 선택이 Flora가 됩니다.
환경 변수
$global은 현재 환경과 세션 정보를 제공합니다.
| 속성 | 내용 |
|---|---|
locale | 사용자 세션의 언어 로캘입니다. |
app.isEditMode | Edit 모드이면 true, View 모드이면 false입니다. |
app.rid | Slate 문서의 RID입니다. |
user.domain | 사용자의 인증 도메인입니다. |
user.email | 이메일 주소입니다. |
user.familyName | 성입니다. |
user.firstName | 이름입니다. |
user.groups | 사용자가 속한 인증 그룹 목록입니다. |
user.id | 사용자 고유 식별자입니다. |
user.username | 사용자 이름입니다. |
window.origin | 현재 URL의 origin입니다. |
다음은 사용자 이름이 있는 통합 앱에서 로캘이 정확히 de이면 독일어, 나머지는 영어로 인사하는 Slate 함수 본문입니다.
if ({{$global.locale}} === "de") {
return "Willkommen " + {{$global.user.firstName}};
}
return "Welcome " + {{$global.user.firstName}};
User storage
sl_user_storage는 사용자별로 앱을 다시 연 뒤에도 값을 유지하며 모든 페이지에서 접근할 수 있습니다. 앱별 사용자 설정 등을 저장할 수 있고 크기는 10 kB로 제한됩니다.
slate.setUserStorage 액션으로 새 값을 저장합니다. 여러 브라우저 탭이나 창을 사용한다면 slate.refreshUserStorage로 다른 창에서 저장한 값을 다시 읽을 수 있습니다.
$global과 sl_user_storage는 시스템 변수이며 URL 매개변수로 설정할 수 없습니다.
로딩 후 초기화
slate.ready가 발생했을 때 User storage가 아직 로드되지 않았을 수 있습니다. 저장값으로 Local 변수를 초기화하려면 slate.userStorageChanged 이벤트를 사용하고 새 값을 {{slEventValue}}로 받습니다. 저장값이 갱신될 때 이 이벤트가 발생합니다.
선호 목적지 저장
다음은 slate.setUserStorage 액션에 넣는 예제 본문입니다. 이 예제는 사용자 저장값을 JSON 객체 문자열로 관리합니다. 아직 값이 없으면 새 객체로 시작하고 기존 객체의 다른 속성은 유지합니다. 잘못된 JSON이나 객체가 아닌 값은 오류로 처리합니다.
var stored = {{sl_user_storage}};
var preferencesObj = stored === undefined || stored === null || stored === ""
? {}
: JSON.parse(stored);
if (preferencesObj === null || typeof preferencesObj !== "object" || Array.isArray(preferencesObj)) {
throw new Error("User storage must contain a JSON object");
}
preferencesObj.preferred_destinations = {
preferred_destinations: [
{ choice_1: "London", airport_code: "LHR" },
{ choice_2: "Paris", airport_code: "CDG" },
{ choice_3: "Amsterdam", airport_code: "AMS" }
]
};
return JSON.stringify(preferencesObj);
앱 진입 화면에서 이 저장값을 로딩한 뒤 목적지 목록을 구성할 수 있습니다.
Marketplace 매개변수
앱의 홈 문서 페이지(home document page)에 있는 Local 변수는 Marketplace 설치 매개변수로 지정할 수 있습니다. Variables에서 해당 변수의 메뉴를 열고 Marketplace parameter를 켜며 String 또는 Boolean 유형을 선택합니다.
Shared 변수와 다른 페이지의 Local 변수는 지원하지 않습니다. 설치자는 이 값을 바꾸어 설치별 기본 설정을 정할 수 있습니다. 패널은 매개변수 표시를 제공하고 변수 이름을 바꾸거나 삭제하면 구성도 동기화합니다.