팝업 및 대화상자

정보를 표시하거나 사용자에게 응답을 요청하려면 팝업 및 대화상자를 사용합니다. 이는 다음과 같은 경우에 유용합니다.

  • 레코드 삭제와 같은 사용자 요청을 확인하는 경우
  • 새로운 재고 주문 생성과 같은 중요한 태스크에 포커스를 지정하는 경우
  • 사용자가 확인해야 하는 중요한 정보를 표시하는 경우
  • 사용자가 작업을 완료한 후에 트랜잭션이 진행 중임을 표시하는 경우

App Maker는 다음과 같은 두 가지 대화상자를 지원합니다.

  • 팝업 - 다양한 알림 시나리오를 다루는 사전 구성 대화상자. 팝업은 머티리얼 디자인 표준을 준수합니다.
  • 커스텀 대화상자 - 앱 사용자에게 알리기 위해 작성한 페이지 또는 페이지 조각. 커스텀 대화상자를 설정하려면 더 많은 작업을 수행해야 합니다. 그러나 앱이 머티리얼 디자인과 다른 모양과 느낌을 사용하는 경우에는 이 대화상자가 유용할 수 있습니다.

App Maker의 기본 제공 팝업 사용

팝업은 모달 및 비모달 상호작용과 알림을 앱에 빠르게 추가하는 좋은 방법입니다.

페이지 또는 페이지 조각을 추가하는 것처럼 팝업을 추가합니다.

  1. 페이지 위로 마우스 포인터를 가져가서 추가 add를 클릭한 후 팝업을 클릭합니다.
  2. 팝업 대화상자 텍스트를 수정합니다.
  3. 속성 편집기를 사용하여 팝업의 작동 방식을 제어하는 onClick 및 기타 속성을 구성합니다.

빈 팝업

이는 커스텀 팝업을 만들 때 빈 캔버스로 사용됩니다. 여기에는 생성된 콘텐츠가 없기 때문에 위젯을 추가하여 대화상자를 제작해야 합니다.

이 팝업 맞춤설정

속성 편집기에서 팝업 및 위젯의 모양과 이벤트를 구성합니다.

화면 왼쪽에서 슬라이드되면서 앱의 탐색 대상을 표시하는 메뉴를 추가하려면 이 메뉴를 사용합니다. 탐색 메뉴는 생성 당시에 존재하는 페이지로만 연결됩니다. 나중에 앱에 추가한 페이지는 수동으로 이 메뉴에 추가해야 합니다.

이 팝업 맞춤설정

속성 편집기에서 팝업의 모양과 이벤트를 구성합니다. 메뉴에 표시되는 텍스트를 수정하고 페이지를 드래그하여 순서를 재정렬할 수도 있습니다.

확인 대화상자

사용자에게 방금 호출한 작업을 계속 진행하기를 원하는지 확인을 요청하려면 확인 대화상자를 사용합니다. 이 대화상자는 대개 해당 작업과 관련된 경고 또는 중요한 정보와 쌍을 이룹니다.

이 팝업 맞춤설정

속성 편집기에서 팝업의 모양과 이벤트를 구성합니다.

또한 이 팝업을 사용하려면 다음을 수행해야 합니다.

  • 제목 수정. 확인 대화상자 제목은 의미가 있으면서 요청하는 작업을 반영하는 제목이어야 합니다.
  • 사용자가 작업을 완료하면 어떤 일이 발생할지 설명하는 내용이 포함되도록 텍스트 필드 수정
  • 버튼 텍스트를 변경한 후 onClick 이벤트 할당

알림 대화상자

중요하지 않은 이벤트 또는 작업을 사용자에게 알리려면 이 팝업을 사용합니다. 사용자 입력은 필요 없습니다.

이 팝업 맞춤설정

속성 편집기에서 팝업의 모양과 이벤트를 구성합니다. 기본적으로 확인 버튼을 클릭하면 대화상자가 닫힙니다.

또한 이 팝업을 사용하려면 다음을 수행해야 합니다.

  • 제목 수정. 대화상자 제목은 의미가 있어야 하며 뒤따라 나오는 설명을 잘 나타내야 합니다.
  • 앱이 수행하는 작업을 설명하는 내용을 포함하도록 텍스트 필드 수정

앱이 태스크를 완료하는 동안 사용자에게 기다리도록 요청하려면 이 팝업을 사용합니다.

이 팝업 맞춤설정

속성 편집기에서 팝업의 모양과 이벤트를 구성합니다.

스낵바

화면 하단의 메시지를 통해 작업에 대한 간단한 의견을 제공하려면 이 팝업을 사용합니다. 여기에는 작업과 관련된 텍스트 한 줄이 들어 있습니다.

이 팝업 맞춤설정

속성 편집기에서 팝업의 모양과 이벤트를 구성합니다.

또한 이 팝업을 사용하려면 다음을 수행해야 합니다.

  • 텍스트 필드 수정. 작업과 관련된 텍스트 한 줄이어야 합니다.
  • 필요한 경우 버튼 텍스트를 Dismiss에서 더 적절한 작업으로 변경하고 onClick 이벤트를 업데이트합니다.

커스텀 대화상자 만들기

페이지 또는 페이지 조각을 대화상자로 사용할 수 있습니다.

  1. 버튼을 페이지 위로 드래그한 다음 onClick 속성을 클릭합니다.
  2. 대화상자 열기라는 미리 설정된 작업을 선택합니다.
  3. 대화상자로 표시할 페이지 또는 페이지 조각을 선택합니다.

또는 클라이언트 측 스크립트에 코드를 작성하여 MyDialog라는 페이지를 대화상자로 표시할 수 있습니다.

app.showDialog(app.pages.MyDialog);
    

대화상자 닫기

앱 사용자가 버튼을 클릭할 때 열려 있는 대화상자를 닫으려면 다음 안내를 따르세요.

  1. 버튼 위젯을 선택한 다음 onClick 속성을 클릭합니다.
  2. 대화상자 닫기 작업을 선택합니다.

또는 클라이언트 측 스크립트에 코드를 작성할 수 있습니다.

app.closeDialog();
    

CSS 속성

애플리케이션의 대화상자 속성을 맞춤설정하려면 다음 CSS 클래스를 사용합니다.

  • .app-Dialog: 대화상자의 최상위 요소에 적용됩니다.
  • .app-DialogGlass: 대화상자가 열려 있는 동안 나머지 UI를 덮는 glass 요소에 적용됩니다.
  • .app-DialogBody: 대화상자의 내용에 적용됩니다.

대화상자 크기

대화상자의 크기는 페이지 또는 페이지 조각의 크기에 따라 결정됩니다.

대화상자의 크기를 변경하려면 페이지 또는 페이지 조각을 클릭한 다음 속성 편집기에서 크기를 수정하세요.