표시 위젯

링크 위젯 링크

클릭 가능한 링크를 표시하려면 링크 위젯을 사용합니다. 예를 들어 사용자가 다른 사용자가 만든 링크를 클릭할 수 있도록 링크를 데이터 소스에 결합할 수 있습니다.

사용법

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

일반적인 워크플로

  • 앱 사용자에게 클릭 가능한 링크를 제공합니다.
  • 사용자가 다른 사용자가 추가한 링크를 쉽게 열 수 있도록 링크를 데이터 소스에 결합합니다.
  • 앱의 다른 페이지로 이동 또는 데이터 소스 다시 로드와 같이 미리 구성된 작업을 수행하도록 onclick 작업을 설정합니다.

스타일 지정

작업 툴바의 테마 선택도구를 사용하여 링크가 표시되는 방식을 제어합니다.

추가 정보

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

예시

링크는 다양한 샘플템플릿에서 사용됩니다.

이미지 위젯 이미지

앱 외부에서 호스팅되는 이미지를 표시하려면 이미지 위젯을 사용합니다.

사용법

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

일반적인 워크플로

  • 이미지가 호스팅되는 URL을 url 속성에 추가합니다.
  • 사용자가 이미지를 클릭하여 앱 외부로 이동하도록 하려면 href 속성을 사용합니다.
  • 사용자가 이미지를 클릭하여 앱 어딘가로 이동하도록 하려면 onClick 이벤트를 사용합니다.

스타일 지정

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

추가 정보

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

예시

이미지는 다양한 샘플템플릿에서 사용됩니다.

Google 지도 위젯 Google 지도

앱 내에 지도를 표시하려면 Google 지도 위젯을 사용하세요.

사용법

페이지 위로 Google 지도 위젯을 드래그하고 속성 편집기를 사용하여 Google 지도 위젯의 기능을 구성합니다.

일반적인 워크플로

  • 사용자가 페이지를 로드할 때 지도의 중앙에 배치할 위치를 맞춤설정하려면 address 속성을 사용합니다.
  • 사용자가 주소를 입력하고 지도에 표시할 수 있도록 지도를 데이터 소스에 결합합니다.

스타일 지정

Google 지도 위젯에는 미리 구성된 스타일 지정 옵션이 없습니다.

추가 정보

Google 지도 위젯은 API 키가 필요한 Maps JavaScript API를 사용합니다. Google 지도 위젯을 패널로 드래그하면 App Maker에서 API 키가 누락되었다는 오류를 표시합니다. API 키를 추가하려면 다음 단계를 수행하세요.

  1. G Suite 관리자에게 조직의 키를 요청하거나 API 키를 받습니다.
  2. App Maker에서 앱을 엽니다. 아직 추가하지 않았다면 Google 지도 위젯을 페이지에 추가합니다.
  3. Google 지도 위젯을 클릭하여 위젯의 속성 편집기를 엽니다.
  4. apiKey 상자에 API 키를 붙여넣습니다.

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

도움말 아이콘 위젯 도움말 아이콘

앱 내에 팝업 도움말을 표시하려면 도움말 아이콘 위젯을 사용합니다.

사용법

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

일반적인 워크플로

  • html 속성에 도움말 텍스트를 추가합니다.

스타일 지정

도움말 아이콘 위젯에는 미리 구성된 스타일 지정 옵션이 없습니다.

추가 정보

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

스피너 위젯 스피너

사용자에게 앱이 데이터를 로드 중임을 알리려면 스피너 위젯을 사용합니다.

사용법

페이지 위로 스피너 위젯을 드래그하고 속성 편집기를 사용하여 스피너 위젯의 모양과 기능을 구성합니다.

일반적인 워크플로

  • 스피너를 데이터 소스에 결합하면 데이터 소스가 새 데이터를 로드할 때마다 App Maker에서 해당 스피너를 표시합니다.

스타일 지정

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

추가 정보

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

예시

스피너는 다양한 샘플템플릿에서 사용됩니다.

Html 위젯 Html

임의의 HTML을 표시하려면 HTML 위젯을 사용합니다. 편집기에서 HTML 위젯은 스크립트를 실행하거나 전역 스타일을 상속하지 않으므로 앱을 미리보거나 게시할 때 위젯이 약간 다르게 표시될 수 있습니다.

사용법

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

일반적인 워크플로

  • HTML 속성을 사용하여 텍스트를 표시합니다.

스타일 지정

추가 정보

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

예시

HTML 위젯을 사용하는 많은 샘플템플릿이 있습니다.

페이저 위젯 페이저

사용자가 앱 페이지를 탐색할 수 있게 하려면 페이저 위젯을 사용합니다.

사용법

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

일반적인 워크플로

  • 사용자에게 앱을 쉽게 탐색할 수 있는 방법을 제공합니다.
  • 사용자가 페이저를 클릭할 때 실행되는 동작을 제어하려면 nextEnabledpreviousEnabled 속성을 사용합니다.

스타일 지정

페이저 위젯에는 미리 구성된 스타일 지정 옵션이 없습니다.

추가 정보

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

예시

페이저 위젯은 다양한 샘플템플릿에서 사용됩니다.