에서 팝오버 생성 UI 빌더

UI Builder 페이지의 팝오버를 사용하여 상황별 정보 또는 기능을 오버레이하면 사용자가 작업을 완료할 수 있습니다.

팝오버는 페이지 위에 UI 빌더 표시되는 작은 창 또는 대화 상자로, 현재 컨텐츠 또는 작업과 관련된 추가 정보, 옵션 또는 작업을 포함합니다. 페이지에 모달을 추가하는 것과 같은 방법으로 구성요소를 팝오버에 추가합니다.

추가 정보가 사용자에게 도움이 된다고 생각되는 페이지의 아무 곳에나 UI 빌더 팝오버를 배치할 수 있습니다. 팝오버는 작은 정보 조각이나 관련 콘텐츠에 대한 링크를 제공하기 위한 것이므로 사용자가 상호 작용할 때만 팝오버가 표시되므로 팝오버 내의 정보나 기능의 양을 제한해야 합니다.

이벤트 매핑을 사용하여 팝오버를 표시하거나 숨길 수 있습니다(예: 버튼을 선택하거나 페이지의 일부를 가리킬 때 팝오버가 나타나도록 트리거). 자세한 내용은 맵 이벤트 정의 문서를 참조하십시오.

그림 1. 정보 팝오버

페이지에 팝오버 UI 빌더 추가

에서 팝오버 UI 빌더를 추가하는 방법을 알아보세요. 팝오버는 구성요소를 클릭할 때 페이지 위에 나타나는 컨테이너입니다. 예를 들어, 목록에서 사람 이름을 선택할 때 팝오버에 연락처 정보가 표시될 수 있습니다.

시작하기 전에

필요한 역할: admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
2. 작업할 환경을 열거나 + 만들기를 선택하여 환경을 만듭니다.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호작용하는 방법 구성 UI 빌더 .
3. 페이지 변형을 열거나 생성합니다.
   에서 페이지를 UI 빌더만드는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
4. 버튼 구성요소와 같이 팝오버를 트리거할 페이지에 구성요소를 추가합니다.
   자세한 내용은 구성요소 추가 및 구성 문서를 참조하십시오.
5. 구성 패널에서 이벤트 탭을 선택합니다.
6. + 이벤트 처리기 추가를 선택합니다.
   
7. 팝오버 열기를 선택합니다.
8. Create a new popover(새 팝오버 만들기)를 선택합니다.
   
9. 추가를 선택합니다.
   팝오버가 스테이지 위에 나타납니다.
10. + 아이콘을 선택하여 구성요소를 팝오버에 추가합니다.
    
11. 팝오버 구성을 마쳤으면 팝오버를 닫습니다.

    컨텐츠 트리에서 생성하는 팝오버가 페이지 구조의 본문 위에 있는 것을 볼 수 있습니다.

    
12. 저장을 클릭합니다.
13. 헤더에서 UI 빌더미리 보기를 선택합니다.
14. 버튼을 클릭하여 팝오버를 테스트합니다.