구성요소에 클라이언트 상태 매개변수 생성 및 바인딩(고급 기능)

클라이언트 상태 매개변수 값을 만들고 의 UI 빌더구성 요소에 바인딩합니다. 구성요소에 사용자 지정 값을 추가하면 이러한 구성요소를 스크립트를 통해 자동으로 업데이트할 수 있습니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

페이지에 두 개의 구성 요소를 추가한 다음 클라이언트 상태 매개 변수 및 스크립트를 사용하여 연결할 수 있습니다. 먼저 클라이언트 상태 매개변수를 만든 다음 클라이언트 상태 매개변수를 레이블과 같은 구성요소 중 하나에 바인딩합니다. 다음으로, 클라이언트 스크립트를 만들고 이벤트 핸들러를 사용하여 버튼과 같은 두 번째 구성요소에 바인딩합니다. 이벤트 핸들러를 생성할 때 클라이언트 상태 매개변수 값을 이벤트 핸들러에 바인딩하여 두 구성요소를 연결합니다. 한 구성요소를 클릭하면 다른 구성요소의 상태가 변경됩니다. 클라이언트 상태는 스크립트를 통해 자동으로 업데이트될 수 있는 사용자 지정 값을 구성요소에 추가할 수 있기 때문에 유용합니다. 클라이언트 상태는 페이지와 관련된 정보를 저장하기 위한 버킷으로 생각하십시오.

예를 들어 페이지에 버튼 및 레이블 구성요소를 추가할 수 있습니다. 이 버튼은 텍스트 색을 변경하는 등 레이블 값을 변경합니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 작업할 경험을 열거나 다음을 선택하여 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 다음에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 페이지를 만들거나 엽니다.
   자세한 내용은 페이지 및 페이지 변형 관리 UI 빌더 문서를 참조하십시오.
4. 페이지에 두 가지 구성요소를 추가합니다.
   자세한 내용은 구성요소 추가 및 구성 문서를 참조하십시오.
5. 연결된 값으로 클라이언트 상태 매개변수를 정의하려면 왼쪽 하단 패널에서 클라이언트 상태 매개변수를 선택합니다.
   
6. + 추가를 선택합니다.
   
7. 클라이언트 상태 이름, 유형 및 초기 값의 이름을 입력합니다.

   클라이언트 상태는 문자열, 숫자, 부울 및 JSON을 지원합니다. 예를 들어 이름을 dynamic_label_value로, 유형을 문자열로, 초기 값을 초기 값으로 입력할 수 있습니다.

   
8. 클라이언트 상태 매개변수의 값을 구성요소에 바인딩합니다.
   1. 클라이언트 상태 매개변수를 바인딩할 구성요소를 선택합니다.
   2. 구성 패널을 열고 구성 탭을 선택합니다.
   3. 데이터를 바인딩할 필드를 가리키고 동적 데이터 바인딩 아이콘( )을 선택합니다.
      
      데이터 바인딩 모달이 나타납니다.

      

   4. 데이터 형식 탭에서 클라이언트 상태를 선택합니다.
   5. 구성요소에 바인딩할 클라이언트 스크립트를 두 번 클릭합니다.
      
   6. 적용을 선택합니다.
      
9. 저장을 선택합니다.
10. 클라이언트 상태 값을 한 구성요소에 바인딩하고 스크립트를 생성하여 두 번째 구성요소를 첫 번째 구성요소에 연결합니다.
    1. 왼쪽 창에서 클라이언트 스크립트 옆에 있는 + 아이콘을 선택합니다.
       
    2. 작업을 설명하는 스크립트 이름을 입력합니다.
       예를 들어, 스크립트에서 수행하기를 원하는 레이블 값 업데이트를 입력할 수 있습니다.
    3. Now 코드 편집기에서 스크립트를 추가합니다.

       호출할 API와 API에 대한 매개 변수(예: 상태 및 값)를 선택한다고 가정해 보겠습니다. 예를 들어 api.setState를 호출하고 dynamic_label_value 를 첫 번째 매개변수로 포함하고 NEW VALUE 를 두 번째 매개변수로 포함할 수 있습니다.

       
11. 두 번째 구성요소에 이벤트 핸들러를 추가하여 생성한 새 클라이언트 스크립트를 호출합니다.
    1. 페이지에서 스크립트를 바인딩할 구성요소를 선택합니다.
    2. 이벤트 탭을 선택합니다.
    3. + 새 이벤트 처리기 추가를 선택합니다.
    4. 이벤트 처리기의 스크립트 섹션에서 만든 스크립트를 선택하고 + 를 선택하여 구성 요소에 대한 이벤트 처리기로 추가합니다.
       
12. 저장을 선택합니다.
13. 페이지를 미리 보고 구성 요소가 연결되어 있는지 테스트하려면 미리 보기를 선택합니다.
    하나의 구성 요소를 선택하면 두 번째 구성 요소의 상태가 변경됩니다. 예를 들어 버튼 구성요소를 선택하여 레이블 값 구성요소 텍스트를 초기 값 에서 새 값으로 변경합니다.

결과

이 절차에서 수행한 작업:

• 페이지에 두 가지 구성요소를 추가했습니다.
• 초기 값이 있는 클라이언트 상태 매개변수를 정의했습니다.
• 클라이언트 상태 매개변수를 첫 번째 구성요소에 바인딩했습니다.
• 클라이언트 상태 매개변수로 정의된 값을 업데이트하는 클라이언트 스크립트를 작성했습니다.
• 방금 생성한 새 클라이언트 스크립트를 호출하는 두 번째 구성요소의 이벤트 핸들러를 생성했습니다.
• 첫 번째 구성 요소의 상태를 변경하도록 두 번째 구성 요소를 선택했습니다.