응답형 작성을 위한 구성요소 구성

다양한 양식 요소에 대해 응답형 작성으로 페이지를 만들 때 일부 구성 요소 구성 옵션을 조정하여 더 작은 크기에서 페이지가 더 잘 보이고 작동하도록 하는 방법을 알아봅니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

페이지 가용성을 높이는 방법은 중단점에서 서로 다른 구성을 사용하여 구성 요소의 모양과 느낌을 조정하는 것입니다. 구성요소 구성을 사용하는 방법은 셀 수 없이 많습니다. 이 절차에서는 목록 구성 요소에 대한 몇 가지 구성 옵션을 편집하여 더 작은 폼 팩터에 더 적합하도록 만듭니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. > 경험 생성을 선택하여 작업할 경험을 열거나 경험을 생성합니다.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 응답형 작성으로 처음부터 새로 페이지 생성
   페이지를 생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 생성 섹션을 참조하십시오.
4. 상단에서 데스크톱 폼 팩터 아이콘이 선택되어 있는지 확인합니다.
   
5. 스테이지에서 + 콘텐츠 추가를 선택합니다.
6. 레이아웃 탭에서 단일 열을 선택합니다.
7. 새 열 중앙에 있는 + 아이콘을 선택하여 목록 구성요소를 추가합니다.
8. 구성 요소 탭에서 목록 구성 요소를 찾아 선택합니다.
9. 구성 패널에서 없음 - 구성 요소를 수동으로 구성을 선택합니다.
10. 데스크톱 폼 팩터에서 페이지를 봅니다.
    

    상단의 아이콘, 열 수, 하단의 페이지 매김 정보 등 표시되는 요소를 확인합니다.

11. 모바일 양식 요소 아이콘을 선택합니다.

    

    모바일 폼 팩터에서 목록 구성요소는 복잡하며 세로 및 가로 스크롤 막대를 모두 포함합니다.

    

    간단한 구성 변경을 통해 모바일 폼 팩터의 사용성과 모양을 개선합니다.

12. 컨텐츠 트리에서 목록 1 을 선택합니다.
13. 구성 패널의 구성 탭에서 표시된 열 수 필드를 찾아 1을 입력합니다.
    번호 열만 표시됩니다. 가로 스크롤 막대가 제거되었습니다.
14. 구성 패널의 구성 탭에서 아래로 스크롤하여 헤더 섹션에서 다음과 같이 변경합니다.
    1. 크기를작게 변경합니다.
    2. 마지막 새로 고침 정보 숨기기 옵션을 선택합니다.
    3. 목록 작업 숨기기 옵션을 선택합니다.
       
       변경할 때마다 스테이지가 자동으로 업데이트됩니다. 헤더의 크기가 작아지고 새로 고침 시간이 제거되고 목록 작업 아이콘이 제거되었습니다.
    4. 저장을 선택합니다.
15. 스테이지에서 모바일 뷰의 맨 아래로 스크롤합니다.
16. 구성 패널의 구성 탭에서 아래로 스크롤하여 페이지 매김 섹션에서 다음과 같이 변경합니다(필요한 경우 페이지 매김 을 선택하여 필드를 확장).
    1. 범위 숨기기 옵션을 선택합니다.
    2. 행 개수 숨기기 옵션을 선택합니다.
    3. 페이지당 행 숨기기 선택기를 선택합니다.
    4. 저장을 선택합니다.
    범위, 행 수 및 페이지당 행 수 선택기가 제거되었습니다. (행 수는 모바일 화면 상단에서 계속 확인할 수 있습니다.)

    

    구성 패널에서 편집한 옵션과 필드가 모바일 계단식 아이콘으로 표시됩니다.

17. 옵션 또는 필드 옆에 있는 모바일 계단식 아이콘을 선택하여 값이 모바일 폼 팩터에 대한 것인지 확인합니다.
    
18. 태블릿과 상단의 데스크톱 폼 팩터 아이콘을 선택하여 더 큰 폼 팩터가 변경되지 않았는지 확인합니다.