Iframe

iframe 위젯은 외부의 전체 페이지 애플리케이션을 Workshop에 내장할 수 있게 해주어, 빌더들이 모듈에 커스텀 보기를 추가할 수 있는 방법을 제공합니다.

iframe이 추가 메모리 및 처리 자원을 요구하기 때문에, Workshop 모듈의 안정성과 성능에 영향을 줄 수 있습니다. 화면에 하나 이상의 iframe 위젯을 내장하는 것은 권장하지 않습니다.

구성 옵션

iframe 위젯은 웹 URL 혹은 Slate를 입력값으로 지원합니다. 아래 섹션에서 Slate 입력 옵션에 대해 더 알아보세요.

URL

애플리케이션의 URL을 정적 스트링 혹은 스트링 변수로 입력하세요.

Slate

Slate 구성 옵션을 이용하면 Slate 애플리케이션을 Workshop 모듈에 내장할 수 있습니다. 파라미터를 사용하여 내장된 Slate 애플리케이션과 Workshop 모듈이 서로 상호작용하도록 할 수 있습니다.

아래 섹션에서는 iframe 위젯을 이용하여 Slate 애플리케이션을 어떻게 내장하는지에 대한 상세를 제공합니다.

Slate 출처

Slate 출처는 모듈에 내장된 Slate를 참조하는 방법을 정의합니다. Slate 출처로 Compass 출처 혹은 Permalink를 선택하여 사용할 수 있습니다.

Compass 출처: Foundry 자원 선택기를 사용하여 내장할 Slate 애플리케이션을 선택할 수 있습니다.
Permalink: Permalink 혹은 RID를 입력하여 내장할 Slate 애플리케이션을 선택할 수 있습니다. /workspace/slate/documents/\<slate-permalink>/latest 내의 URL에서 Slate RID를 찾을 수 있습니다.

URL 파라미터

URL 파라미터는 Slate URL에 추가되며 Slate에서 변수를 설정하는 데 사용됩니다. URL 파라미터를 변경하면 전체 페이지가 다시 로드되므로, 자주 수정할 필요가 없는 변수에만 URL 파라미터를 사용하는 것을 권장합니다. Slate에서 URL 파라미터를 참조하려면, URL 파라미터와 동일한 이름으로 변수를 설정하고, 핸들바를 사용하여 참조하세요: {{username}}.

예시: 로드 시 사용자 이름과 ID에 따라 내장된 Slate 애플리케이션의 표시 설정을 변경합니다.

입력 파라미터

입력 파라미터는 Workshop 모듈에서 내장된 Slate 애플리케이션으로 전달됩니다. 입력 파라미터는 키와 값 유형으로 정의됩니다. 정적 스트링, 스트링 변수, 숫자, 오브젝트셋은 내장된 Slate 애플리케이션으로 전달할 수 있습니다.

Slate 애플리케이션 내에서 Workshop 모듈에서 정보를 검색할 수 있으며, 아래의 코드 예시와 Events panel 내의 Slate.getMessage 이벤트를 참조하면 됩니다. parameter_key는 Workshop 내의 iframe 위젯에서 정의한 키와 일치해야 합니다.

Copied!1
2
const payload = {{slEventValue}} // slEventValue에 저장된 데이터를 payload라는 이름의 상수에 할당합니다.
return payload["<parameter_key>"] // payload에서 "<parameter_key>"에 해당하는 값을 반환합니다.

예시: 임베디드된 Slate 애플리케이션의 보기를 조정하기 위해 Workshop 필터를 설정하십시오.

// 상수 payload를 {{slEventValue}}로 정의합니다.
const payload = {{slEventValue}}

// payload에서 "flight-alerts" 키의 값을 반환합니다.
return payload["flight-alerts"]

The Input parameter configuration menu, with options for Key and Value inputs.

The Events panel in Slate, with parameters set to adjust the view of the Slate application in Workshop.

결과물 파라미터

결과물 파라미터는 Slate 임베드에서 Workshop 모듈로 전달됩니다. 결과물 파라미터는 키와 값 유형으로 정의됩니다. 오브젝트셋, 오브젝트셋 필터, 그리고 스트링 변수를 Workshop 모듈로 전달할 수 있습니다. Workshop 모듈 내에서 Slate 애플리케이션의 정보를 얻기 위해 Workshop 변수를 파라미터에 할당할 수 있습니다. Slate 애플리케이션 내에서는 Slate.sendMessage 이벤트와 아래의 코드 스니펫을 사용하여 정보 전송을 시작해야 합니다. 코드에서의 파라미터 키는 Workshop 위젯에서 정의한 키와 일치해야 합니다.

return {
    type: "WORKSHOP//SET_OUTPUT_VALUE",
    outputParameterKey: "<parameter_key>",
    value: {{<data_to_be_sent>}}
}

반환 {
    유형: "WORKSHOP//SET_OUTPUT_VALUE",
    outputParameterKey: "<매개변수_키>",
    값: {{<보낼_데이터>}}
}

예시: 임베디드된 Slate 애플리케이션의 선택 상태를 사용하여 Workshop에서 필터 셋 상태를 변경합니다.

return {
    type: "WORKSHOP//SET_OUTPUT_VALUE",
    // 출력 파라미터 키 설정
    outputParameterKey: "selected-objects",
    // 선택된 객체 값 설정
    value: {{f_selection}}
}

The Output parameter configuration menu, with options for Key and Value inputs.

The Events panel in Slate, with parameters set to change the Workshop filter set.

트리거 가능한 이벤트

Slate에서 Workshop 이벤트를 트리거할 수 있습니다. 트리거 가능한 이벤트는 키와 이벤트 유형으로 정의됩니다. 오버레이를 열거나, 변수를 초기화하는 등의 이벤트를 트리거할 수 있습니다.

Workshop 모듈 내에서 event_key와 트리거하려는 이벤트를 정의하세요. Slate 애플리케이션 내에서 이벤트 패널의 Slate.sendMessage 이벤트를 사용하고 아래 코드 스니펫을 참조하세요. event_key는 iframe 위젯에서 정의된 키와 일치해야 합니다.

return {
    type: "WORKSHOP//TRIGGER_WORKSHOP_EVENT",
    eventKey: "<event_key>",
    // 타입: "Workshop//트리거_Workshop_이벤트"
    // 이벤트키: "<이벤트_키>"
}

예시: Slate에서 버튼 클릭으로 Workshop의 접을 수 있는 섹션을 토글합니다.

return {
    type: "WORKSHOP//TRIGGER_WORKSHOP_EVENT",
    eventKey: "<event_key>",
}
// 반환 값: 작업장 이벤트를 트리거하는 객체
// type: 이벤트 유형 (작업장 이벤트 트리거)
// eventKey: 이벤트 키 (고유한 이벤트 식별자)

Key와 Workshop 이벤트 입력을 위한 Triggerable 이벤트 구성 메뉴.

Workshop의 섹션을 토글하는 매개변수로 설정된 Slate의 Events 패널.