입력 위젯

클릭 및 텍스트 입력과 같은 사용자 입력을 처리하려면 입력 위젯을 사용합니다.

버튼 위젯 버튼

사용자는 버튼을 클릭하여 양식 제출 또는 이메일 보내기와 같은 작업을 수행할 수 있습니다.

사용법

페이지 위로 버튼을 드래그하고 속성 편집기를 사용하여 버튼의 텍스트, 모양, 기능을 구성합니다.

일반적인 워크플로

  • 속성 편집기에서 앱 사용자가 버튼을 클릭하는 경우(onClick 이벤트) 등, 이벤트에 대한 응답으로 수행할 작업을 설정합니다.
  • 데이터 소스 또는 스크립트에 라벨의 텍스트를 결합합니다.

스타일 지정

버튼의 모양을 제어하려면 작업 툴바의 테마 선택도구를 사용합니다.

추가 정보

Widgets API에서 스타일, 속성, 메소드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

예시

버튼은 다양한 샘플템플릿에서 사용됩니다.

라벨 위젯 라벨

페이지의 객체에 텍스트 라벨을 추가하려면 라벨 위젯을 사용합니다.

사용법

페이지 위로 라벨을 드래그하고 속성 편집기를 사용하여 라벨의 텍스트와 모양을 구성합니다.

일반적인 워크플로

  • 이미지에 설명을 제공합니다.
  • 데이터 소스에 라벨의 텍스트 속성을 결합합니다.

스타일 지정

라벨의 모양을 제어하려면 작업 툴바의 테마 선택도구를 사용합니다. 글꼴과 글꼴 크기를 추가로 맞춤설정할 수 있습니다.

추가 정보

Widgets API에서 이 위젯의 스타일, 속성, 메소드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

예시

라벨은 다양한 샘플템플릿에서 사용됩니다.

텍스트 상자 위젯 텍스트 상자

사용자가 텍스트를 입력하고 수정할 수 있는 공간을 제공하려면 텍스트 상자 위젯을 사용합니다.

사용법

페이지 위로 텍스트 상자를 드래그하고 속성 편집기를 사용하여 텍스트 상자의 라벨, 모양, 초깃값을 구성합니다.

일반적인 워크플로

  • 사용자가 텍스트를 입력할 수 있는 공간을 제공합니다.
  • 기본값이지만 수정 가능한 텍스트 값을 사용자에게 표시합니다.
  • 초깃값을 데이터 소스에 결합합니다.

스타일 지정

여러 가지 모양(예: 검색 아이콘이 있는 모양) 중에서 선택하려면 작업 툴바의 테마 선택도구를 사용합니다.

예시

텍스트 상자는 Material Gallery 템플릿에서 다수 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

텍스트 영역 위젯 텍스트 영역

사용자가 텍스트를 입력할 수 있는 큰 스크롤 필드를 제공하려면 텍스트 영역 위젯을 사용합니다.

사용법

페이지 위로 텍스트 영역을 드래그하고 속성 편집기를 사용하여 텍스트 영역의 텍스트와 모양을 구성합니다.

일반적인 워크플로

  • 사용자가 긴 스크롤 텍스트 값을 입력할 수 있게 합니다.
  • 데이터 소스에 라벨의 텍스트 속성을 결합합니다.

스타일 지정

텍스트 영역의 모양을 제어하려면 작업 툴바의 테마 선택도구를 사용합니다.

예시

텍스트 영역은 Material Gallery 템플릿에서 다수 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

체크박스 위젯 체크박스

사용자에게 바이너리 설정 또는 해제 옵션을 제공하려면 체크박스 위젯을 사용합니다.

사용법

페이지 위로 체크박스를 드래그하고 속성 편집기를 사용하여 체크박스의 라벨, 모양, 초깃값을 구성합니다.

일반적인 워크플로

  • 사용자가 설정을 사용하거나 중지할 수 있게 합니다.
  • 특정 설정/해제 기능의 상태를 표시하려면 값을 결합합니다.

스타일 지정

위젯을 체크박스 또는 슬라이더로 표시하려면 작업 툴바의 테마 선택도구를 사용합니다.

예시

체크박스는 머티리얼 갤러리 템플릿에서 다수 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

드롭다운 위젯 드롭다운

사용자가 옵션 목록에서 선택할 수 있게 하려면 드롭다운 위젯을 사용합니다. 이는 가능한 값 집합에 있는 값을 할당하거나 한쪽 관계 종단을 설정하는 데 유용합니다.

사용법

페이지 위로 드롭다운 위젯을 드래그하고 속성 편집기를 사용하여 드롭다운 위젯의 옵션을 구성합니다.

일반적인 워크플로

  • 사용자가 몇 가지 옵션 중 하나를 선택할 수 있게 합니다.
  • 데이터 모델의 항목으로 드롭다운 목록을 채웁니다.

드롭다운 위젯의 중요한 속성은 다음과 같습니다.

속성 설명
value 사용자가 드롭다운에서 선택한 항목에 따라 databound 속성에 할당되는 값
options 드롭다운의 내용을 구성하는 옵션의 문자열 표현 배열
names options의 기본 문자열 대신 표시할 문자열 배열. 배열은 options와 동일한 길이여야 합니다.
allowNull 선택되면 드롭다운의 초기 valuenull로 설정하는 체크박스
nullItemName 주로 사용자 선택을 요청하는 메시지로 사용되며 드롭다운의 null 값에 표시되는 문자열

드롭다운 결합의 몇 가지 예는 다음과 같습니다.

이 직관적인 예시에서는 사용자가 목록의 ColorNames 속성 프로젝션으로 표현되는 Colors 목록에서 FavoriteColor를 선택할 수 있게 해줍니다.

  • value: @datasource.item.FavoriteColor
  • options: @datasources.Color.items
  • names: @datasources.Color.items..ColorNames

이 예시에서는 사용자가 해당 possibleValues 속성에 나열된 통화 중 하나에 Currency 필드를 할당할 수 있게 해줍니다.

  • value: @datasource.item.Currency
  • options: @datasource.model.fields.Currency.possibleValues

이 예시에서는 사용자가 배열 리터럴로 구성된 자바스크립트 표현식에 InternetSpeed를 결합할 수 있게 해줍니다.

  • value: @datasource.item.InternetSpeed
  • options: ["Google Fiber", "Cable Modem", "DSL", "Dial up"];

스타일 지정

드롭다운의 모양을 제어하려면 작업 툴바의 테마 선택도구를 사용합니다.

예시

드롭다운 위젯은 Material Gallery 템플릿에서 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

날짜 상자 위젯 날짜 상자

사용자가 날짜를 입력할 수 있게 하려면 날짜 상자 위젯을 사용합니다. 사용자는 수동으로 날짜를 입력하거나 달력 아이콘을 클릭하여 날짜 선택도구를 표시할 수 있습니다.

사용법

페이지 위로 날짜 상자 위젯을 드래그하고 속성 편집기를 사용하여 날짜 상자 위젯의 날짜 형식 및 시간대를 비롯한 옵션을 구성합니다.

일반적인 워크플로

  • 사용자가 표, 양식, 텍스트 영역에 날짜를 입력할 수 있습니다.

스타일 지정

날짜 상자의 모양을 제어하려면 작업 툴바의 테마 선택도구를 사용합니다.

예시

날짜 상자는 여행 승인 템플릿에서 다수 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

라디오 그룹 위젯 라디오 그룹

사용자가 미리 구성된 옵션 몇 개 중 하나를 선택할 수 있게 하려면 라디오 그룹 위젯을 사용합니다.

사용법

페이지 위로 라디오 그룹 위젯을 드래그하고 속성 편집기를 사용하여 라디오 그룹 위젯의 값과 옵션을 구성합니다.

일반적인 워크플로

라디오 그룹은 사용자가 options 배열에서 value를 하나 선택할 수 있게 해줍니다.

스타일 지정

위젯을 가로 또는 세로 방향 중 어느 방향으로 표시할지 제어하려면 작업 툴바의 테마 선택도구를 사용합니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

별표 평점 위젯 별표 평점

사용자가 페이지의 다른 객체에 평점을 적용할 수 있게 하려면 별표 평점 위젯을 사용합니다.

사용법

페이지 위로 별표 평점 위젯을 드래그하고 속성 편집기를 사용하여 총 평점 수 및 위젯 로드 시 선택되는 평점 수를 포함한 별표 평점 위젯의 옵션을 구성합니다.

일반적인 워크플로

  • 별의 개수를 설정하고 값을 데이터 소스에 결합합니다.

스타일 지정

위젯이 별과 하트 중 무엇을 사용하도록 할지 선택하려면 테마 선택도구를 사용합니다.

예시

별표 평점은 공급업체 평점 템플릿에서 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

슬라이더 위젯 슬라이더

사용자가 값의 범위에서 선택할 수 있게 하려면 슬라이더 위젯을 사용합니다.

사용법

페이지 위로 슬라이더 위젯을 드래그하고 속성 편집기를 사용하여 슬라이더 위젯의 값 범위를 포함한 옵션을 구성합니다.

일반적인 워크플로

  • 값의 범위를 설정하고 데이터 소스에 결합합니다.

스타일 지정

이 위젯에는 스타일 지정 옵션이 없습니다.

예시

슬라이더 위젯은 Material Gallery 템플릿에서 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

제안 상자 위젯 제안 상자

사용자가 미리 구성된 값으로 텍스트 필드를 완성하도록 지원하려면 제안 상자 위젯을 사용합니다.

사용법

페이지 위로 제안 상자 위젯을 드래그하고 속성 편집기를 사용하여 제안 상자 위젯의 옵션을 구성합니다.

일반적인 워크플로

  • value 속성을 사용하여 값을 지정하고, options를 사용하여 제안 값을 제공합니다. options의 항목 유형은 value의 항목 유형과 일치해야 합니다.
  • 가능한 값, 관계가 있는 필드에서 제안 사항을 가져오거나 기존 모델에서 레코드로 제안 사항을 가져오도록 제안 상자를 구성할 수 있습니다. 이 작업은 현재 제안 텍스트 필드에 제공된 UI를 사용해야 수행할 수 있습니다.

스타일 지정

제안 상자의 모양을 제어하려면 작업 툴바의 테마 선택도구를 사용합니다.

예시

제안 상자 위젯은 공급업체 평점 템플릿에서 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

텍스트 편집기 위젯 텍스트 편집기

사용자가 더 긴 텍스트 항목을 작성하고 서식을 지정할 수 있는 텍스트 편집기를 제공하려면 텍스트 편집기 위젯을 사용합니다.

사용법

페이지 위로 텍스트 편집기 위젯을 드래그하고 속성 편집기를 사용하여 텍스트 편집기의 옵션을 구성합니다.

일반적인 워크플로

  • 사용자가 긴 스크롤 텍스트 값을 입력할 수 있게 합니다.
  • 데이터 소스에 라벨의 텍스트 속성을 결합합니다.

스타일 지정

텍스트 편집기의 모양을 제어하려면 작업 툴바의 테마 선택도구를 사용합니다.

예시

텍스트 편집기 위젯은 공급업체 평점 템플릿에서 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

다중 선택 위젯 다중 선택

사용자가 다중 선택 위젯을 사용하여 옵션 배열에서 여러 항목을 선택할 수 있게 해줍니다.

사용법

페이지에 다중 선택 위젯을 추가하고 속성 편집기를 사용하여 다중 선택 위젯의 옵션을 구성합니다.

앱 사용자가 선택할 수 있는 옵션을 설정하려면 options 속성을 설정합니다. options를 클릭하고 결합 코드 편집기에서 다음 중 하나를 입력합니다.

  • 옵션 배열(예: ["east", "north", "south", "west"])
  • 다음 구문을 사용하는 데이터 소스 필드의 items로 결합

    @datasource.items..field-name

    ..은 특정 필드의 값 모음 목록에 액세스할 수 있게 해주는 프로젝션 연산자입니다. 예를 들어 모델에 Region이라는 필드가 있다면 다중 선택 옵션을 모든 레코드의 모든 Region 값으로 설정할 수 있습니다(결합 @datasource.items..Region 사용). 한 레코드의 Region이 'east'이고, 다른 레코드는 'north, south'일 경우 사용자는 앱에서 'east', 'north', 'south'를 옵션으로 선택할 수 있습니다.

사용자가 선택하는 값을 저장하려면 데이터 결합을 사용하여 values 속성을 설정합니다. 사용자가 여러 문자열을 선택하면 해당 문자열을 배열로 변환해야 합니다. 배열을 만드는 한 가지 방법은 strToArray 결합 변환기를 사용하는 것입니다.

@datasource.item.field-name#strToArray()

options의 항목 유형은 values의 항목 유형과 일치해야 합니다.

일반적인 워크플로

  • 반복되는 입력란에 값을 할당하거나 관계 종단을 설정하는 데 사용합니다.

스타일 지정

다중 선택 위젯의 모양을 제어하려면 작업 툴바의 테마 선택도구를 사용합니다.

예시

옵션 선택 가이드에서 다중 선택 위젯을 설정하는 방법을 확인할 수 있습니다. 다중 선택 위젯은 공급업체 평점 템플릿에서 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

드라이브 선택도구 위젯 드라이브 선택도구

사용자가 드라이브에 있는 파일을 찾아 앱에 업로드할 수 있게 하려면 드라이브 선택도구 위젯을 사용합니다.

사용법

  1. 사용자 권한으로 실행되도록 앱을 구성합니다.
  2. 페이지 위로 드라이브 선택도구 위젯을 드래그하고 속성 편집기를 사용하여 드라이브 선택도구 위젯의 옵션을 구성합니다.

일반적인 워크플로

이 위젯은 다음을 반환합니다.

  • 파일 이름
  • 파일에 연결하는 데 사용할 수 있는 파일 URL
  • 파일 객체를 가져오는 데 사용할 수 있는 파일 ID. 이를 통해 다음과 같은 작업을 호출할 수 있습니다.
    • File.setOwner(user)
    • File.setStarred(starred)
    • File.setTrashed(trashed)
    • File.makeCopy()
    • File.getDownloadUrl()

이 위젯을 사용하려면 사용자 권한으로 실행되도록 앱을 구성해야 합니다.

기본적으로 드라이브 선택도구 위젯은 사용자가 Google 드라이브의 파일 또는 컴퓨터의 파일을 선택하여 Google 드라이브에 업로드할 수 있게 해줍니다. 드라이브 선택도구에는 뷰에 추가 탭을 추가하는 드라이브 선택도구 속성 그룹의 views 속성이 있습니다. 예를 들어 선택도구에 사용자의 Google 드라이브 폴더를 보여주는 탭을 포함하려면 views 속성에 FOLDERS를 추가합니다. Google 이미지 검색 탭을 추가하려면 IMAGE_SEARCH를 추가합니다. 사용자의 Google 드라이브에 있는 스프레드시트만 보여주는 탭을 표시하려면 SPREADSHEETS를 추가합니다. 드라이브 선택도구 위젯의 뷰에 대한 자세한 내용은 선택도구 클래스 참조에서 확인하세요.

드라이브 선택도구 속성 그룹의 features 속성을 사용하여 뷰의 동작을 수정할 수 있습니다. 예를 들어 사용자가 한 번에 둘 이상의 항목을 선택할 수 있게 하려면 MULTISELECT_ENABLED를 추가합니다. 드라이브 선택도구 위젯의 기능에 대한 자세한 내용은 선택도구 클래스 참조에서 확인하세요.

폴더 뷰를 추가하면 드라이브 선택도구는 사용자가 마지막으로 본 폴더를 기억하고 사용자가 드라이브 선택도구 버튼을 다시 클릭할 때 해당 폴더를 표시합니다. 사용자는 위젯 상단의 탐색 경로에 나타나는 폴더 이름을 클릭하여 해당 폴더로 바로 이동할 수 있습니다.

스타일 지정

드라이브 선택도구의 모양을 제어하려면 작업 툴바의 테마 선택도구를 사용합니다.

예시

드라이브 선택도구 위젯은 공급업체 평점 템플릿에서 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.

사용자 선택도구 위젯 사용자 선택도구

사용자 선택도구 위젯은 사용자가 조직의 다른 사람을 찾을 수 있게 해줍니다. 사용자가 입력을 시작하면 위젯이 사진, 이름, 이메일 주소로 완성된 자동 완성 제안 항목을 제공합니다.

사용법

  1. 앱에 디렉토리 모델을 추가합니다.
  2. 페이지 위로 사용자 선택도구 위젯을 드래그하고 속성 편집기를 사용하여 사용자 선택도구 위젯의 옵션을 구성합니다.

일반적인 워크플로

  • 선택된 사람의 이메일 주소를 모델의 필드에 결합합니다.

스타일 지정

사용자 선택도구의 모양을 제어하려면 작업 툴바의 테마 선택도구를 사용합니다.

예시

사용자 선택도구 위젯은 문서 승인 템플릿에서 사용됩니다.

추가 정보

Widget API에서 스타일, 속성, 메서드, 이벤트에 대한 추가 정보를 확인할 수 있습니다.