정기 업데이트 소식을 전해드려요. [업데이트 확인하기]
Flextudio
릴리즈노트
Flextudio 가이드
Flextudio 가이드
  • 플렉스튜디오 처음 시작하기
    • GETTING STARTED
      • 0. 플렉스튜디오 준비하기
      • 1. 워크스페이스 시작하기
      • 2. 시나리오 개발하기
      • 3. 앱 배포하기
      • 4. 앱 사용하기
    • 플렉스튜디오 로드맵
    • 튜토리얼(Tutorial)
      • 메모장 앱 만들기(필수)
        • 1. [Design] 디자인하기
        • 2. [Event] 화면 이동 구현하기
        • 3. [Data] 컴포넌트에 데이터 연결 하기
      • 템플릿을 활용해 앱 만들기(초급)
        • 0. 시나리오 생성하고 사용하기
        • 1. [Design] 디자인 템플릿 사용하기
        • 2. [Event] 클릭 시 스텝(Step) 이동하기
        • 3. [Data] 컴포넌트에 데이터 연결하기
        • 4. [Data] 이벤트 스크립트로 게시물 삭제 구현하기
      • 약속잡기 앱 만들기(중급)
        • 0. 시나리오 생성하기
        • 1. [Data] Firestore 준비
        • 2. [Event] 약속 만들기
        • 3. [Data] 약속 데이터 생성
        • 4. [Event]약속 조회하기
        • 5. 사용자 SNS로그인
        • 6. 앱 배포/링크
        • 7. [Event] 약속 회신하기
        • 8. 배포하고 확인하기
        • 9. 추가 상세 가이드
  • 개념 학습하기
    • 시나리오의 구성요소
    • 컬렉션(Collection)과 섹터(Sector)
    • 사용자 입력에 의한 데이터 변화
    • 이벤트와 서비스 구동 방법
    • 대체 텍스트 사용하기
    • [심화] Filter - 섹터(Sector) Status, Condition
    • [심화] Step의 구성과 생애주기
    • [심화] 컬렉션의 카테고리
    • [심화] 데이터의 상태관리(Sector Status)
    • [심화] 카테고리 연결관계
  • 워크스페이스 콘솔 가이드
    • 워크스페이스 콘솔 인터페이스
      • 앱
        • 시나리오 관리
        • 레이아웃관리
        • 데이터연결
        • 고객관리
        • 링크앱팩설정
        • 링크관리
        • 서비스오류로그
        • SDK설정
        • 앱정보설정
      • 앱팩
      • 개발
        • 시나리오
        • 권한키관리
        • 패키지설치
      • 데이터
        • API 연동
        • 호스팅 폴더
        • FlexSQL
      • 고객 관리
        • 설정 페이지
      • 에뮬레이터
      • 워크스페이스 설정
        • 기본정보
        • 개발자 관리
        • Flex API Key관리
  • 시나리오 개발하기
    • 시나리오 스튜디오 인터페이스
      • 상단영역
      • 시나리오 관리
      • 시나리오 설정
      • 시나리오 배포
      • 테마색 설정
      • 하단패널-Collection
      • 하단패널-DataBase
      • 하단패널-Authkey
      • DB 연결하기
    • 디자인 모드 (Design Mode)
      • 디자인 템플릿
      • 고정 레이아웃
      • 너비 높이
      • 디스플레이
      • 마진
      • 패딩
      • 배경
      • 보더
      • 색상
      • 스크롤 타입
      • 스타일 유형
      • 아이콘
      • 절대값 위치 설정
      • 컨트롤 명
      • 캡션
      • 텍스트
      • 투명도 설정
      • 힌트
      • 인풋 컨트롤 변경
    • 개발 모드 (Dev Mode)
      • 컴포넌트(Component)
        • 컴포넌트 상태
        • 로드스크립트
        • 데이터(Data)
        • 이벤트(Event)
        • 컴포넌트 동적 활용(컴포넌트 아이디)
      • 이벤트
        • 이벤트 서비스 스크립트 API 액션 추가
        • API 호출
        • 함수 자동 생성
        • 스크립트 에디터
      • 서비스
        • FlexSQL
        • FlexAutoQuery
        • Firestore
        • GoogleSheet
        • Flextudio API - User
      • 데이터소스
      • Etc
        • Collections
        • Language
        • Scenario
    • 컴포넌트
      • 스텝
      • 그룹
      • 레이아웃
      • 컨트롤
        • Approval
        • Button
        • CalendarNavigator
        • Calendar Schedule
        • Checkbox
        • ComboBox
        • DatePicker
        • Embed
        • FileUpload
        • Image
        • InputDate
        • InputMask
        • InputNumber
        • InputSearch
        • InputText
        • Line
        • MultiInputBox
        • Radio
        • Sheet (Beta)
        • Signature
        • Tab
        • Text
        • TimeTable
        • Tree
      • 스텝 버튼
  • 디버거
    • 디버거 인터페이스
    • 실행 내역 확인하기
    • 콘솔
    • 데이터 상태 확인하기
    • 서비스 테스트
      • Test-API
      • Test-SQL
  • 참고
    • FAQ
      • 시나리오에서 앱을 배포했는데, 라이브에 적용이 안되요.
    • 단어집
      • 권한키 (AuthKey)
      • 이너블럭
      • 컬렉션 키
      • FlexDB
      • 공개앱(오픈앱)
      • ParamBlock/ResultBlock
      • _SUID(suid)
    • 단축키
    • 개발 예제
      • 스크롤 페이징 샘플
    • 심화 실습
      • Google Map 그려주기
        • 1. Google Map 생성영역 생성
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • Naver Map 그려주기
        • 1. Naver Map 생성영역 생성
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • QR코드 생성하기
        • 1. 화면구성하기
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • 목적지 경로 거리 및 시간 Google Map
        • 1. Google Map Distance Matrix API 추가하기
        • 2. 화면 구성하기
        • 3. 이벤트 구성 및 연결하기
        • 4. API 호출 결과 후처리하기
    • 데이터 연동 방법
      • 자사 API 백엔드 시스템
      • 외부 DB 연동
      • Firestore 연동
      • GoogleSheet 연동
      • K-System 연동
      • Airtable 연동
    • 앱 출시하기 (SDK)
      • Android SDK
      • iOS SDK
Powered by GitBook

ⓒ flextudio

On this page
  • 컨트롤 설명
  • 디자인(Design) 모드
  • 영역별 디자인 설정
  • 공통 디자인 속성
  • 개발(Dev) 모드
  • 캘린더 네비게이터 사용하기
  • 타임테이블 시간 범위 설정
  • 예약 항목
  • 이벤트 데이터
  • 선택된 시간 데이터 저장
  • 컬렉션-데이터소스 키 연결
  • 조회된 이벤트아이템 키
  • 내가 속한 이벤트
  • 클릭 이벤트 연결하기
  • 이벤트 유형별 색상 지정

Was this helpful?

  1. 시나리오 개발하기
  2. 컴포넌트
  3. 컨트롤

TimeTable

타임라인순서로 예약하는 기능이 필요하다면 TimeTable을 사용할 수 있습니다.

PreviousTextNextTree

Last updated 6 months ago

Was this helpful?

컨트롤 설명

CalendarNavigator 와 함께 사용할 수 있는 시간표 형태의 컨트롤 입니다.

디자인(Design) 모드

영역별 디자인 설정

1. 기간(년,월,주)

기간(년, 월, 주) 영역의 디자인을 설정할 수 있습니다.

2. 날짜 배경 영역

날짜 배경 영역에 높이, 배경색, 패딩을 설정 할 수 있습니다.

3. 날짜 아이템 영역

날짜 아이템 영역에 높이, 텍스트, 배경, 보더, 패딩을 설정 할 수 있으며 설정 내용이 모든 날짜 아이템에 반영됩니다.

4. 선택한 날짜 아이템

선택한 날짜 아이템의 텍스트, 배경, 보더를 설정 할 수 있습니다.

5. 카테고리 영역

날짜 아래에 영역을 카테고리 영역이라고 합니다. 카테고리 영역에서는 텍스트 디자인을 설정 할 수 있습니다.

공통 디자인 속성

개발(Dev) 모드

캘린더 네비게이터 사용하기

버튼을 활성화 하면 캘린더 네비게이터 기능을 사용하고 속성을 설정할 수 있습니다. CalendarNavigator 페이지를 참고 해주세요.

타임테이블 시간 범위 설정

타임테이블의 시간시간과 종료시간 타임라인 간격을 설정할 수 있습니다. 기본 값은 8시부터 19시까지 30분 간격으로 설정되어 있습니다. 타임라인 시간 간격은 5분, 10분, 15분, 30분, 1시간 간격으로 설정할 수 있습니다.

예약 항목

타임테이블 시간 범위 설정 에 보여지는 항목들 입니다. 항목을 만들기 위해서는 데이터소스를 생성해서 연결을 해주어야합니다.

  • 데이터소스 명 예약 항목으로 사용할 데이터로 구성된 데이터소스명을 연결합니다.

  • 항목명 키 표시될 예약 항목 이름으로 사용할 데이터를 연결합니다. 위의 예시를 보면 항목명 키는 MRName입니다. 디버거 실행후 화면에 MRName의 데이터들이 조회된 것을 확인할 수 있습니다.

  • 항목데이터 키 데이터소스의 유니크한 키값을 입력합니다. MeetingRoom_DS 에서 데이터를 구분할 수 있는 값인 MRSeq로 연결하였습니다.

  • 항목정렬 기준 키 카테고리 정렬에 사용할 데이터소스 키 값을 입력합니다.

이벤트 데이터

타임테이블에 등록된 이벤트를 표시하기 위해 데이터 소스를 설정합니다.

데이터소스 명

이벤트 데이터를 가져올 데이터 소스의 이름

항목키

이벤트가 발생하는 카테고리 데이터의 키

이벤트 종류 항목 키

이벤트 종류 데이터의 키

이벤트 시작 시간 항목 키

이벤트의 시작 시간 데이터의 키

이벤트 종료 시간 항목 키

이벤트의 종료 시간 데이터의 키

이벤트 제목 항목 키

이벤트의 제목 데이터의 키

이벤트 부제목 항목 키

이벤트의 부제목 데이터의 키

선택된 시간 데이터 저장

사용자가 지정한 이벤트의 시작과 종료시간을 저장할 컬렉션키를 설정합니다.

시작시간 - 종료시간 간격을 설정하면 이벤트를 선택할때 시작시간에 간격 값을 더한 시간이 종료시간이 됩니다.

설정하지 않으면 종료시간은 컬렉션-데이터소스 키 연결의 종료시간 값 입니다.

컬렉션-데이터소스 키 연결

  • 컬렉션 키 : 데이터소스 키의 value를 컬렉션에 저장할 때 사용할 키 명칭

  • 데이터소스 키 : 데이터소스를 통해 받아온 값 중 저장하고 싶은 키 명칭

조회된 이벤트아이템 키

이벤트를 조회했을 때 현재 사용자가 작성자인지 조회된 이벤트의 블럭색상으로 구분할 수 있습니다. 컬렉션-데이터소스에 설정한 데이터소스 키인 fBaseUserID를 현재 접속한 사용자의 정보를 알 수 있는 _base.User.fBaseUserID 값과 비교하는 예시 입니다. ( 대체 텍스트 사용하기 페이지를 참고해주세요)

사용자의 fBaseUserID 값은 디버거의 콘솔창에서 _base.User에서 확인할 수 있습니다. _base.User.fBaseUserID로 접근할 수 있습니다. 디버거 콘솔창에서 _base.User.fBaseUserID 값이 1이라는 것을 확인할 수 있습니다.

조회한 날짜의 회의실을 등록한 fBaseUserID 값이 1이라는 것을 확인 할 수 있습니다.

내가 속한 이벤트

이벤트에 참석자인지 체크하고 싶을 때 사용할 수 있습니다. 예들 들어 회의실 예약 시스템으로 사용중이라면 회의에 초대된 참석자인지 아닌지 확인 할 수 있습니다. 아래는 IsAttend의 값이 1이면 참석자로 체크하는 예시입니다.

클릭 이벤트 연결하기

데이터를 클릭했을 때 실행시키고 싶은 이벤트를 연결할 수 있습니다.

  • 조회 된 데이터 클릭 이벤트 연결하기 타임테이블에 조회된 데이터가 있을 때 이 데이터에 이벤트를 연결 시키고 싶을 때 사용할 수 있습니다. 클릭 시 스텝을 이동하는 기능도 함께 사용할 수 있습니다.

  • 추가 버튼 클릭 이벤트 연결하기 타임라인에 빈공간을 눌렀을 때 추가 버튼처럼 작동하여 이벤트를 연결 할 수 있습니다.

이벤트 유형별 색상 지정

특정 유형의 이벤트에서만 색상을 지정해 줄 수 있습니다. 이벤트 데이터 속성의 이벤트 종류 항목키에 특정 유형을 구분할 수 있는 키를 입력합니다. 이벤트 유형별 색상 지정에서는 이벤트 종류 항목키의 데이터 값을 입력해줍니다.

( 내가 속한 이벤트 를 보시면 조회된 데이터 중 "회의" 이벤트만 IsAttend 값이 1인 것을 확인할 수 있습니다.)

( 속성과 연결되는 키 값입니다.)

스텝 이동에 대한 자세한 설명은 에서 확인 할 수 있습니다. (시나리오 내에 2개 이상의 스텝이 있어야 클릭 시 스텝 이동 기능이 활성화 됩니다.)

이벤트 유형별 색상 지정

컨트롤명
스타일 유형
절대값 위치 설정
투명도 설정
높이
텍스트
배경
보더
마진
패딩
클릭 시 스텝 이동
타임라인 시간 간격 - 1시간
종료시간 - 12시 타임라인 시간 간격 - 15분
데이터소스 MeetingRoom_DS 조회결과
이벤트 지정 시 그려지는 데이터
조회된 이벤트아이템 키 값을 사용하지 않은 경우
작성자로 분류된 경우
디버거 콘솔창에서 조회한 _base.User 데이터
디버거에서 조회된 데이터
내가 속한 이벤트라면 초록색으로 칸이 채워져 있습니다.
디버거에서 조회된 데이터
조회 된 데이터 클릭 이벤트 연결하기
이벤트 연결하지 않은 경우
조회된 데이터 클릭 시 스텝 이동 이벤트 연결한 경우
이벤트 연결하지 않은 경우
추가 버튼 클릭 시 스텝 이동 이벤트 연결한 경우
IsAttend값이 1인 회의 이벤트에 빨간색으로 표현된 경우
IsAttend 값이 1일 때
조회된 이벤트아이템 키