의 레이아웃 업그레이드 UI 빌더

생성된 QuebecRome 레이아웃을 새 레이아웃 시스템으로 업그레이드합니다.

UI 빌더 레이아웃 시스템은 릴리스에서 San Diego 개선되고 업데이트되었습니다. 이 새로운 레이아웃 시스템은 단순화된 콘텐츠 트리와 레이아웃 구성 및 구성 요소 스타일링을 위한 새로운 스타일 지정 패널을 제공합니다. 새로 만든 모든 페이지 변형은 새 레이아웃 시스템을 사용합니다. 기존 페이지와 사용자 지정 페이지에 대해 새 레이아웃 시스템으로 업그레이드할 수 있는 옵션이 있습니다.

새 레이아웃 시스템에는 다음이 포함됩니다.

• 단순화된 콘텐츠 트리
• 레이아웃 구성 및 구성요소 스타일 지정을 위한 스타일 지정 패널 개선
• CSS, Flexbox 및 Grid 레이아웃을 구성하기 위한 로우 코드 UI입니다.
• 구성요소 스타일 지정을 위한 향상된 UI
• 업데이트된 레이아웃에는 슬롯이 필요하지 않습니다.

레이아웃 업그레이드 후 찾아야 할 사항

변형과 페이지는 개별적으로 업그레이드됩니다.

페이지/변형은 레이아웃, 구성요소 및 하위 구성요소로 구성되며, 데이터 자원, 이벤트 바인딩 및 컴포지션과 함께 레이아웃 내 컨테이너에 래핑됩니다. 새 레이아웃 시스템으로 업그레이드하면 페이지의 레이아웃만 업그레이드되므로 데이터, 구성요소 또는 구성요소 스타일링에는 영향을 미치지 않습니다.

이전 레이아웃 시스템의 모든 슬롯은 업그레이드 프로세스 중에 새 레이아웃으로 마이그레이션됩니다. 업그레이드 프로세스는 페이지에서 구성요소 컨테이너가 구조화되는 방식을 변경합니다.

구성요소 스타일은 영향을 받지 않지만 구성요소가 배치된 방식에 대한 일대일 스타일 마이그레이션이 없을 수 있습니다. 복잡한 페이지에는 스타일이 슬롯에서 컨테이너로 병합될 때 업그레이드 프로세스를 통해 발생하는 시각적 오정렬이 있을 수 있습니다. 일부 문제는 수동으로 해결해야 합니다.

레이아웃을 새 레이아웃 시스템으로 업그레이드

페이지를 새 레이아웃 시스템으로 업그레이드합니다 UI 빌더 .

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 업그레이드할 페이지가 있는 경험을 엽니다.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 다음에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 업그레이드할 페이지를 선택합니다.
   

   빨간색 점으로 태그가 지정된 새 레이아웃 시스템으로 업그레이드할 수 있는 페이지 변형을 찾을 수 있습니다.

   주:

   사전Quebec 행/열 레이아웃 시스템을 사용하여 만든 레거시 페이지는 업그레이드할 수 없으며 새 레이아웃 시스템으로 다시 빌드해야 합니다.
4. 레이아웃 업데이트 단추를 선택합니다.
   
   UI 빌더 페이지 레이아웃을 새 레이아웃 시스템으로 업데이트하기 시작합니다. 프로세스가 완료되면 알림이 나타납니다.
5. 알림을 편집하기 전에 레이아웃에 검토가 필요함에서 두 레이아웃 버전 비교를 선택하여 이전 레이아웃을 업그레이드된 레이아웃과 비교할 수 있습니다.
   
   두 개의 브라우저 탭이 열리고 하나는 현재 레이아웃이 표시되고 다른 하나는 업그레이드된 레이아웃이 표시됩니다.
6. 페이지를 새 레이아웃 시스템으로 업데이트하려면 새로 유지 를 선택하고, 페이지 레이아웃을 그대로 유지하려면 이전 항목 사용을 선택합니다.
   선택을 확인하라는 모달이 나타납니다.
7. 새로 유지를 선택하여 새 레이아웃 시스템으로의 업그레이드를 완료하거나 이전 항목 사용을 선택하여 업그레이드 프로세스를 되돌리고 페이지를 이전 레이아웃 시스템으로 되돌립니다.
   
8. 변경 내용이 적용된 페이지가 다시 로드됩니다.
9. 미리 보기 버튼( )을 선택하여 페이지를 보고 테스트합니다.