튜토리얼: 주문 생성 흐름 사용자 지정하기

이 튜토리얼에서는 기존 차세대 주문 허브의 주문 생성 흐름을 사용자 정의하는 방법을 배웁니다.

이 튜토리얼에서는 기존 페이지에 간단한 업데이트를 수행하기 위해 구성 기반 맞춤 설정 방식을 사용합니다.

이 튜토리얼에서는 코드 기반 커스터마이징 방식을 사용하며, 여기서:
  • 오버라이드 방식의 커스터마이징은 기존 페이지를 수정하여 추가 데이터(고객 구매 주문 번호)를 수집한 후 해당 데이터를 백엔드 API로 전송하는 데 사용됩니다. 주문 상세 페이지를 수정할 수 있는 buc-fields-details.json 파일이 없으므로, 오버라이드 방식을 통한 커스터마이징을 사용해야 합니다.
귀사의 회사가 주문 생성 흐름을 맞춤 설정하여 다음과 같은 추가 기능을 포함해야 한다고 가정합니다:
  1. 주문을 생성할 때, 선택적으로 "고객 구매 주문 번호"를 입력할 수 있도록 하고 싶습니다.
  2. 주문에 추가할 품목을 검색할 때, 품목의 UPC 코드, EAN 또는 제조사 코드를 나타내기 위해 사용하는 사용자 정의 ' ItemAlias ' 필드로 품목을 검색할 수 있어야 합니다.
  3. UI의 레이블을 변경하고 싶습니다. 기존 라벨인 "요청된 출고일", "요청된 취소일" 및 "요청된 배송일" 대신 "희망 출고일", "희망 취소일" 및 "희망 배송일"이라는 라벨을 사용하고자 합니다.

학습 목표

  • 주문 애플리케이션에서 페이지를 사용자 정의하는 방법.
  • 페이지 내 기존 코드를 수정하여 추가 데이터를 수집한 후 해당 데이터를 백엔드 API로 전송하는 방법.
  • 페이지 및 API에 구성 설정을 통한 맞춤화를 통해 추가 검색 매개변수를 추가하는 방법.
  • 구성 설정을 통한 사용자 정의로 애플리케이션 내 라벨 및 메시지를 변경하는 방법.

필요한 시간

이 학습서를 완료하려면 약 30분이 소요됩니다. 이 학습과 관련된 다른 개념을 탐색하는 경우 시간이 더 걸릴 수 있습니다.

기술 레벨

비기너

대상

주문 허브를 맞춤 설정하려는 개발자들.

전제조건

예상 결과

사용자가 주문 검색 페이지에서 '주문 생성'을 클릭하면 사용자 정의 설정이 적용된 주문 생성 페이지가 로드됩니다.
  • 주문 상세 페이지에는 사용자 정의 필드인 '고객 구매 주문 번호'가 포함됩니다.
    주문 생성 > 주문 상세 정보 페이지 화면 캡처
  • 줄 추가 > 고급 검색 모달에는 사용자 정의 검색 필드 '별칭 값 '이 포함됩니다.
    주문 생성 > 고급 검색 모달 화면 캡처
  • 관리 라인 테이블에는 사용자 정의 테이블 헤더 문자열인 '희망 배송 날짜', '희망 이용 가능 날짜', '희망 종료 날짜'가 포함됩니다.
    주문 생성 > 주문 상세 정보 페이지 화면 캡처