에서 레이아웃 업그레이드 UI 빌더

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

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

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

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

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

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

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

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

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

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

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

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

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

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

   주:

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