정기 업데이트 소식을 전해드려요. [업데이트 확인하기]
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) 모드
  • 등록용 컨트롤(Registration Control)
  • 등록용 컨트롤 - 다이얼로그 데이터 설정
  • 등록용 컨트롤 - 결재권자 데이터 설정
  • 조회용 컨트롤
  • 공통 개발 속성
  • 참고

Was this helpful?

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

Approval

Approval 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.

Previous컨트롤NextButton

Last updated 6 months ago

Was this helpful?

컨트롤 설명

사용자는 Approval 컨트롤을 사용해 결재권자를 쉽게 추가해 승인 체계를 쉽게 구현할 수 있습니다

위의 이미지처럼 플렉스튜디오의 Approval 컨트롤로 결재(승인)의 기능을 구현할 수 있습니다. 먼저 Approval 컨트롤의 종류를 살펴본 뒤 종류별로 어떤 속성이 있는지 살펴보도록 하겠습니다.

Approval(결재) 컨트롤은 등록용 컨트롤과 조회용 컨트롤이 있습니다.

등록용 컨트롤은 결재권자를 등록하는 기능을 하는 컨트롤이며, 조회용 컨트롤은 결재 상태를 조회할 수 있는 컨트롤입니다.

스타일 유형

다양한 스타일 유형들을 제공하고 있습니다.

디자인(Design) 모드

공통 디자인 속성

개발(Dev) 모드

결재 컨트롤이 갖는 고유 속성들에 대한 자세한 설명을 다룹니다. 등록용 컨트롤과 조회용 컨트롤의 속성창이 달라 두 가지로 나누어 설명합니다.

등록용 컨트롤(Registration Control)

등록용 컨트롤 - 다이얼로그 데이터 설정

결재 아이콘을 클릭했을 때 나오는 다이얼로그 창의 데이터를 설정합니다.

  • 데이터소스 명 : 연결을 원하는 데이터소스 명

  • 타이틀 데이터키 지정 : 결재권자의 타이틀에 해당하는 데이터소스의 키값. ex) 홍길동에 해당하는 키값

  • 서브타이틀 데이터키 지정 : 결재권자의 서브타이틀에 해당하는 데이터 소스의 키 값. ex) ‘사원’에 해당하는 키값

  • 비고 데이터키 지정 : 비고 값에 해당하는 데이터 소스의 키값

데이터 소스를 연결하지 않으면 다이얼로그가 제대로 동작하지 않습니다.

등록용 컨트롤 - 결재권자 데이터 설정

  • 타이틀 데이터키 지정 : n 번째 결재권자의 타이틀에 해당하는 데이터소스의 키값. ex) 홍길동에 해당하는 키값

  • 서브타이틀 데이터키 지정 : n 번째 결재권자의 서브타이틀에 해당하는 데이터 소스의 키 값. ex) ‘사원’에 해당하는 키값

  • 비고 데이터키 지정 : n번째 결재권자의 비고 값에 해당하는 데이터 소스의 키값

  • 컬렉션-데이터소스 키 연결 : n번째 결재권자 데이터소스와 컬렉션키 연결

  • 매퍼 추가 : 컬렉션-데이터소스 키 연결 매퍼를 추가하는 버튼

  • 결재권자 추가: 결재권자를 추가하는 버튼

콜렉션-데이터소스 키 연결을 활성화 하지 않으면 컨트롤이 제대로 동작하지 않습니다.


조회용 컨트롤

  • 데이터소스 명 : 연결을 원하는 데이터소스 이름

  • 타이틀 데이터키 지정 : 결재권자의 타이틀에 해당하는 키 값 (ex. 이름)

  • 서브타이틀 데이터키 지정 : 결재권자의 서브 타이틀에 해당하는 키 값 (ex. 부서정보)

  • 비고 데이터키 지정 : 결재권자의 비고에 해당하는 키값

  • 결재 상태텍스트 데이터키 지정 : 결재 상태 텍스트에 해당하는 데이터 소스 키값

  • 결재 상태값 데이터키 지정 : 결재 상태 값에 해당하는 데이터 소스 키값

  • 결재 승인값 타이틀 : 입력한 값이 결재 상태값과 같은 경우 기본 색상 적용 (초록색)

  • 결재 보류값 타이틀 : 입력한 값이 결재 상태값과 같은 경우 기본 색상 적용 (빨간색)

  • 결재 상태별 컬러 설정 : 상태에 따른 색깔 설정. 결재 상태값에 따라 색상이 다르게 표시됩니다.

[결재 상태값]이 '결재'인 경우와 '보류'인 경우 [결재 상태별 컬러 설정]에서 지정한 색이 나오게 됩니다.

[결재 승인값 타이틀]과 [결재 보류값 타이틀]은 기본 색상을 지정 가능한 속성입니다.

단, [결재 상태별 컬러 설정 속성]을 설정한 결재 상태값에는 적용되지 않습니다.

공통 개발 속성

참고

데이터 소스에 대한 이해가 필요하시다면 데이터소스 페이지를 참고하세요.

캡션
컨트롤 명
스타일 유형
높이
절대값 위치 설정
투명도 설정
컨트롤 상태
로드스크립트
결재권자 등록 예시
결재권자 조회 예시
등록용 컨트롤
조회용 컨트롤