텍스트 입력 스크립트 구성 요소

텍스트 입력 구성 요소는 에이전트에 텍스트 입력을 요청하고 텍스트의 유효성을 검사할 수 있습니다. 텍스트 입력 구성 요소의 값을 변수에 바인딩할 수 있습니다.

  1. 클릭 입력 아이콘 구성 요소 도구 모음에서 

  2. 속성 패널에서 자리 표시자 상자를 사용하여 독자에게 입력할 내용을 알려주는 프롬프트로 컨트롤을 미리 채웁니다. 변수는 자리 표시자 텍스트를 저장하지 않습니다. 자리 표시자 텍스트는 상담원에게 지시하는 임시 텍스트이며 사용자 입력에 의해 자동으로 대체됩니다. 예를 들어:

    예제 자리 표시자 텍스트

    변수 값으로 필드를 미리 채울 수 있습니다. 이렇게 하려면 구성 요소 속성의 값 목록에서 변수를 선택합니다. 값은 런타임에 사용자에게 자동으로 표시됩니다. 변수 값은 선택적 유효성 검사에 따라 사용자가 입력한 텍스트로 자동 업데이트됩니다.

  3. 사용자 입력을 확인하려면 흔한 그룹. 그런 다음 확인 목록.

    text_input_validation_drop_list2

  4. 선택하다 선택하다 또는 관습 확인 방법을 선택합니다.

    • 고르다: 선택하다 사전 설정된 유효성 검사 패턴을 선택할 수 있습니다. 검증 사전 설정은 다음과 같습니다.

      이메일 입력은 이메일 주소 구문을 준수해야 합니다.
      알파벳 알파벳 입력만 허용합니다(숫자 없음).
      알파벳 - 공백 포함 알파벳 입력만 허용하고 단어 사이에 공백이 필요합니다. 예를 들어 "cool bean"은 허용되지만 "cool_beans"는 허용되지 않습니다.
      알파벳 - 밑줄 포함 알파벳 입력만 필요하고(숫자 없음) 단어 사이에 밑줄이 필요합니다. 예를 들어 "cool_beans"는 허용되지만 "cool bean"은 허용되지 않습니다.
      영숫자 텍스트 입력에는 문자와 숫자가 모두 포함되어야 합니다.
      영숫자 - 공백 포함 텍스트 입력에는 공백으로 구분된 단어와 함께 문자와 숫자가 모두 포함되어야 합니다.
      영숫자 - 밑줄 포함 텍스트 입력에는 밑줄로 구분된 단어와 함께 문자와 숫자가 모두 포함되어야 합니다.
    • 사용자 지정: 미리 패키징된 유효성 검사가 충분하지 않은 경우 정규식을 사용하여 텍스트 입력의 유효성을 검사할 수 있습니다. 선택하다 관습 ~로부터 확인 목록. 그런 다음 텍스트 상자에 정규식을 입력합니다. 정규식은 이 항목의 범위를 벗어납니다. 그러나 예를 들어 사용자가 텍스트 입력 내의 어딘가에 "dog"라는 문구를 입력하기를 원한다고 가정합니다. 타자 사용자 정의 유효성 검사 속성에서 dog, sundog, hotdog, my good dog Penny 또는 대소문자 구분 문자열이 포함된 다른 문자 조합을 허용하지만 DOG Doggie 등은 허용하지 않는 간단한 정규식을 설정합니다.

      또 다른 예는 ^[az]+$ 소문자 알파벳 문자만 허용합니다.

      : 인터넷은 정규식에 대해 배울 수 있는 많은 리소스를 제공합니다. 예는 다음과 같습니다. http://www.regular-expressions.info/ 그리고 https://en.wikipedia.org/?title=Regular_expression.

      포커스가 텍스트 상자를 벗어날 때 텍스트 입력 구성 요소의 값은 선택한 유효성 검사 규칙을 준수하는지 확인하기 위해 유효성이 검사됩니다. 사용자 입력이 유효성 검사를 통과하지 못하면 테두리가 빨간색으로 변하여 유효성 검사 문제를 나타냅니다. 편집기의 미리보기 모드에서 사용자 정의 및 사전 패키지 유효성 검사를 테스트할 수 있습니다.

      잘못된 텍스트 입력

  5. 설정 값이 필요합니다 사용자가 구성 요소에 값을 입력해야 하는 경우 예로 전환합니다. 기본적으로 이 설정은 아니요이며 이는 사용자 입력이 선택 사항임을 의미합니다. 

    1. 설정 값이 필요합니다 사용자가 구성 요소에 값을 입력해야 하는 경우 True로 전환합니다. 기본적으로 이 설정은 False이며 이는 사용자 입력이 선택 사항임을 의미합니다.
  6. 동작을 설정하려면 선택한 작업이 없습니다. 아래에 액션 변경 고급 속성 그룹에서. 

  7. 작업을 선택하려면 목록에서 행을 클릭합니다. 이전에 정의한 작업을 할당하거나 새 작업을 만들 수 있습니다.

  8. 작업 선택 목록을 닫습니다. 

  9. 선택적으로 이 구성 요소의 다른 속성을 설정합니다. 예를 들어, 여백 설정을 사용하여 이 구성요소 주변의 간격을 조정할 수 있습니다.

    공통

    값은 구성 요소를 선택한 변수에 바인딩합니다. 예를 들어, 텍스트 입력 구성 요소를 변수에 바인딩하는 경우 입력 상자는 지정된 자리 표시자 텍스트를 무시하고 항상 해당 변수의 값을 표시합니다. 변수는 유효성 검사 처리에 따라 사용자가 입력한 텍스트로 자동 업데이트됩니다.

    다른 컨트롤, 예를 들어 라디오 버튼은 선택한 값 텍스트 설정과 함께 값을 사용합니다. 라디오 버튼이 런타임에 선택되면 "선택한 값 텍스트"가 변수의 새 값이 됩니다. 이런 식으로 각 라디오 버튼은 동일한 변수에 다른 값을 할당할 수 있습니다.

    달력 컨트롤이 변수에 바인딩되면 해당 값은 컨트롤에서 선택한 날짜로 설정됩니다. 변수는 시각적 컨트롤의 값을 미리 설정하고 설정할 수도 있으므로 바인딩은 강력하고 자주 사용되는 기술입니다.

    자리 표시자 텍스트는 사용자에게 힌트를 표시합니다.

    예제 자리 표시자 속성

    텍스트 입력의 경우 사용자가 입력을 입력할 때까지 자리 표시자 텍스트가 표시됩니다. 사용자가 입력 상자의 내용을 지우면 자리 표시자 텍스트가 다시 표시됩니다.

    예제 자리 표시자 표시

    드롭다운의 경우 자리 표시자 텍스트는 사용자에게 선택하라는 메시지를 표시합니다.

    그림은 드롭다운에서 선택하기 전의 자리 표시자 텍스트를 보여줍니다.

    사용자가 항목을 선택하면 자리 표시자가 바뀝니다.

    선택에 의해 대체된 자리 표시자

    팁: 구성 요소가 변수에 바인딩된 경우 수동으로 입력한 자리 표시자 텍스트는 무시됩니다. 변수를 선택하면 해당 값이 항상 표시됩니다.

    유효성 검사를 통해 에이전트가 올바른 형식의 텍스트를 입력했는지 확인합니다. 초점이 나갈 때 텍스트 입력 상자에서 Genesys Cloud는 텍스트 값을 테스트하여 선택한 유효성 검사 규칙을 준수하는지 확인합니다. 텍스트가 유효성 검사를 통과하지 못하면 테두리가 빨간색으로 변하여 텍스트에 유효성 검사 문제가 있음을 나타냅니다.

    드롭 목록을 사용하여 유효성 검사 방법을 선택합니다.

    검증 방법 선택

    • 선택하다- 사전 설정된 유효성 검사 패턴을 선택할 수 있습니다.

      이메일 입력은 이메일 주소 구문을 준수해야 합니다.
      알파벳 알파벳 입력만 허용(숫자 없음)
      알파벳 - 공백 포함 알파벳 입력만 허용하고 단어 사이에 공백이 필요합니다. 예를 들어 "cool bean"은 허용되지만 "cool_beans"는 허용되지 않습니다.
      알파벳 - 밑줄 포함 알파벳 입력만 필요하고(숫자 없음) 단어 사이에 밑줄이 필요합니다. 예를 들어 "cool_beans"는 허용되지만 "cool beans"는 허용되지 않습니다.
      영숫자 텍스트 입력에는 문자와 숫자가 모두 포함되어야 합니다.
      영숫자 - 공백 포함 텍스트 입력에는 공백으로 구분된 단어와 함께 문자와 숫자가 모두 포함되어야 합니다.
      영숫자 - 밑줄 포함 텍스트 입력에는 밑줄로 구분된 단어와 함께 문자와 숫자가 모두 포함되어야 합니다.
    • 관습- 문자열 변수를 선택할 수 있습니다. 예를 들어 문자열 변수를 정규식으로 만든 다음 여러 페이지에서 해당 변수를 사용하여 유효성 검사를 동일하게 유지할 수 있습니다. 맞춤 유효성 검사 방법에 대한 자세한 내용은 텍스트 입력 스크립트 구성요소를 참조하세요.

    사용자가 값을 입력하거나 선택해야 하는지 여부를 결정합니다. 기본값은 False이며 사용자 상호 작용이 선택 사항임을 의미합니다.

    사용자 인터페이스는 사용자 입력이 선택 사항인지 여부를 시각적으로 나타냅니다. 

    선택적 입력은 구성 요소 아래에 레이블로 표시됩니다.

    텍스트 입력 상자는 기본적으로 한 줄을 지원합니다. 여러 줄을 아니요(기본값)로 설정하면 텍스트 입력이 텍스트를 줄 바꿈하거나 세로로 크기를 조정하지 않습니다.

    여러 줄-거짓

    여러 줄을 아니요로 설정하면 이 아이콘을 클릭하여 이전에 입력한 모든 텍스트를 지울 수 있습니다.

    여러 줄 거짓 지우기 버튼

    여러 줄을 예로 설정하면 텍스트 입력에 여러 줄의 텍스트가 허용됩니다. 

    여러 줄 참

    암호

    암호에 대한 입력 구성 요소를 구성하려면 암호를 다음으로 설정하십시오. . 암호 텍스트는 숨겨져 있습니다. 암호의 기본 설정은 다음과 같습니다. 아니요.

    비밀번호 전환 표시

    암호를 표시하는 토글을 표시하려면 암호 토글 표시를 다음으로 설정하십시오. . 비밀번호 전환 표시의 기본 설정은 다음과 같습니다. 아니요.

     

    레이아웃

    크기 조정에 영향을 주는 가중치를 사용하여 너비를 고정 크기로 구성하고, 콘텐츠를 표시하기 위해 필요에 따라 늘리거나, 다른 구성 요소에 비해 가능한 한 많은 공간을 사용합니다.

    환경 설명
    스크립트 레이아웃 자동 크기 조정 자동 크기 조정은 구성 요소가 내용에 따라 줄어들거나 커지도록 구성합니다. 예를 들어, 레이블의 너비는 포함된 텍스트의 양에 따라 커질 수 있습니다.
    설정-사이징-스트레치

    Stretch를 사용하면 가중치를 사용하여 크기 조정에 영향을 주어 구성 요소가 다른 구성 요소에 비해 가능한 한 많은 공간을 사용할 수 있습니다.

    두 구성 요소가 모두 늘이도록 설정된 경우 기본적으로 둘 다 남은 공간의 50%가 할당됩니다. 이 비율은 가중치 값을 변경하여 조정할 수 있습니다.

    예를 들어, 한 구성요소를 가중치 200으로 설정하고 다른 구성요소를 가중치 100으로 설정하면 첫 번째 구성요소는 나머지 공간의 2/3를 차지하는 반면 다른 구성요소는 1/3만 차지합니다. 첫 번째 구성 요소의 가중치는 두 번째 구성 요소의 가중치의 두 배이기 때문에 첫 번째 구성 요소는 다른 구성 요소의 두 배 크기로 나타납니다.

    스크립트 레이아웃 픽셀 픽셀 단위로 고정 크기를 설정합니다. 상자에 정수 값을 입력하거나 위쪽 또는 아래쪽 화살표를 사용하여 크기를 늘리거나 줄일 수 있습니다. 이 화살표는 구성 요소에 포커스가 있을 때 표시됩니다.

    크기 조정에 영향을 미치는 가중치를 사용하여 높이를 고정된 크기로 구성하고, 콘텐츠를 표시하기 위해 필요에 따라 늘리거나, 다른 구성 요소에 비해 가능한 한 많은 공간을 사용합니다.

    환경 설명
    스크립트 레이아웃 자동 크기 조정 높이 자동 크기 조정은 구성 요소가 내용에 따라 줄어들거나 커지도록 구성합니다.
    스크립트 레이아웃 픽셀 높이 픽셀 단위로 고정 크기를 설정합니다. 상자에 정수 값을 입력하거나 위쪽 또는 아래쪽 화살표를 사용하여 크기를 늘리거나 줄일 수 있습니다. 이 화살표는 구성 요소에 포커스가 있을 때 표시됩니다.
    설정-사이징-스트레치

    Stretch를 사용하면 가중치를 사용하여 크기 조정에 영향을 주어 구성 요소가 다른 구성 요소에 비해 가능한 한 많은 공간을 사용할 수 있습니다.

    두 구성 요소가 모두 늘이도록 설정된 경우 기본적으로 둘 다 남은 공간의 50%가 할당됩니다. 이 비율은 가중치 값을 변경하여 조정할 수 있습니다.

    예를 들어, 한 구성요소를 가중치 200으로 설정하고 다른 구성요소를 가중치 100으로 설정하면 첫 번째 구성요소는 나머지 공간의 2/3를 차지하는 반면 다른 구성요소는 1/3만 차지합니다. 첫 번째 구성 요소의 가중치는 두 번째 구성 요소의 가중치의 두 배이기 때문에 첫 번째 구성 요소는 다른 구성 요소의 두 배 크기로 나타납니다.

    상위 컨테이너를 기준으로 구성 요소를 왼쪽, 오른쪽 또는 중앙에 정렬합니다.

    팁: 상위 컨테이너의 높이 설정이 다음과 같으면 구성 요소를 중앙에 수직으로 정렬할 수 없습니다 자동 크기 조정. 이를 수정하려면 상위 컨테이너의 높이를 다음으로 설정하십시오. 뻗기 또는 고정 높이로 픽셀.
    환경
    왼쪽 정렬2 왼쪽 정렬 예시2
    align-center2 align-center-example2
    오른쪽 정렬2 오른쪽 정렬 example2
    정렬 시작 정렬 시작 예
    align-vertical-center align-vertical-center-example
    align-vertical-end align-vertical-end-example

    여백은 테두리 주위의 왼쪽, 오른쪽, 위쪽 및 아래쪽 간격을 설정합니다.

    이미지는 여백, 테두리 및 패딩 설정 간의 관계를 보여줍니다.

    1. 선택적으로 모든 여백 값을 한 번에 업데이트하려면 모두 설정 속성 패널에서 여백 버튼.

      모두 설정 버튼의 이미지

    2. 여백에 대한 값 필드를 클릭합니다. 해당 필드에 스핀 컨트롤이 나타납니다.

    3. 스핀 컨트롤을 사용하여 여백을 늘리거나 줄입니다. 만약에 모두 설정 를 선택하면 변경 사항이 모든 여백에 적용됩니다.

      설정 여백 스피너

      구성 요소는 새 여백 설정을 사용하여 즉시 재배치됩니다.

    부울(True 또는 False) 변수 값을 기반으로 구성요소의 가시성을 설정합니다.

    1. 클릭 형세 속성 그룹. 표시 아래에서 변수 선택.
    2. 변수를 선택하거나 선택적으로 새 예/아니오 변수를 만든 다음 해당 새 변수를 보이는 재산.
    3. 런타임 시 변수 값이 True일 때 구성 요소가 표시됩니다. 반대로 변수 값이 다음과 같을 때 숨겨집니다. 거짓.

    고급

    값은 구성 요소를 선택한 변수에 바인딩합니다. 예를 들어, 텍스트 입력 구성 요소를 변수에 바인딩하는 경우 입력 상자는 지정된 자리 표시자 텍스트를 무시하고 항상 해당 변수의 값을 표시합니다. 변수는 유효성 검사 처리에 따라 사용자가 입력한 텍스트로 자동 업데이트됩니다.

    다른 컨트롤, 예를 들어 라디오 버튼은 선택한 값 텍스트 설정과 함께 값을 사용합니다. 라디오 버튼이 런타임에 선택되면 "선택한 값 텍스트"가 변수의 새 값이 됩니다. 이런 식으로 각 라디오 버튼은 동일한 변수에 다른 값을 할당할 수 있습니다.

    달력 컨트롤이 변수에 바인딩되면 해당 값은 컨트롤에서 선택한 날짜로 설정됩니다. 변수는 시각적 컨트롤의 값을 미리 설정하고 설정할 수도 있으므로 바인딩은 강력하고 자주 사용되는 기술입니다.

    자리 표시자 텍스트는 사용자에게 힌트를 표시합니다.

    예제 자리 표시자 속성

    텍스트 입력의 경우 사용자가 입력을 입력할 때까지 자리 표시자 텍스트가 표시됩니다. 사용자가 입력 상자의 내용을 지우면 자리 표시자 텍스트가 다시 표시됩니다.

    예제 자리 표시자 표시

    드롭다운의 경우 자리 표시자 텍스트는 사용자에게 선택하라는 메시지를 표시합니다.

    그림은 드롭다운에서 선택하기 전의 자리 표시자 텍스트를 보여줍니다.

    사용자가 항목을 선택하면 자리 표시자가 바뀝니다.

    선택에 의해 대체된 자리 표시자

    팁: 구성 요소가 변수에 바인딩된 경우 수동으로 입력한 자리 표시자 텍스트는 무시됩니다. 변수를 선택하면 해당 값이 항상 표시됩니다.

    모든 구성 요소는 기본적으로 활성화되어 있습니다. Disabled 속성은 True/False 변수를 구성 요소에 바인딩하여 변수의 런타임 값을 기반으로 비활성화하거나 활성화합니다.

      1. 참/거짓 변수를 생성하려면 변수 탭.

      2. 추가를 클릭합니다. 변수를 추가합니다.

        그림은 새 변수를 추가하는 버튼을 보여줍니다.

      3. 선택하다 허위 사실 데이터 유형으로.

        그림은 가변 데이터 유형을 보여줍니다.

      4. 에서 이름 상자에 설명이 포함된 이름을 입력합니다.

        현재 활성화된 변수

      5. 기본값을 다음으로 설정 진실 또는 거짓.

        • 변수가 True이면 구성 요소가 비활성화됩니다.

        • 변수가 False이면 구성 요소가 활성화됩니다.

      6. 변수를 저장하려면 적용하다.
      7. Disabled 속성에 변수를 할당합니다. 아래에 장애가있는, 클릭 변수 선택.

        비활성화된 속성 설정

      8. 참/거짓 변수를 선택합니다.

        현재 활성화 변수 선택

    작업을 테스트하려면 시사.

    유효성 검사를 통해 에이전트가 올바른 형식의 텍스트를 입력했는지 확인합니다. 초점이 나갈 때 텍스트 입력 상자에서 Genesys Cloud는 텍스트 값을 테스트하여 선택한 유효성 검사 규칙을 준수하는지 확인합니다. 텍스트가 유효성 검사를 통과하지 못하면 테두리가 빨간색으로 변하여 텍스트에 유효성 검사 문제가 있음을 나타냅니다.

    드롭 목록을 사용하여 유효성 검사 방법을 선택합니다.

    검증 방법 선택

    • 선택하다- 사전 설정된 유효성 검사 패턴을 선택할 수 있습니다.

      이메일 입력은 이메일 주소 구문을 준수해야 합니다.
      알파벳 알파벳 입력만 허용(숫자 없음)
      알파벳 - 공백 포함 알파벳 입력만 허용하고 단어 사이에 공백이 필요합니다. 예를 들어 "cool bean"은 허용되지만 "cool_beans"는 허용되지 않습니다.
      알파벳 - 밑줄 포함 알파벳 입력만 필요하고(숫자 없음) 단어 사이에 밑줄이 필요합니다. 예를 들어 "cool_beans"는 허용되지만 "cool beans"는 허용되지 않습니다.
      영숫자 텍스트 입력에는 문자와 숫자가 모두 포함되어야 합니다.
      영숫자 - 공백 포함 텍스트 입력에는 공백으로 구분된 단어와 함께 문자와 숫자가 모두 포함되어야 합니다.
      영숫자 - 밑줄 포함 텍스트 입력에는 밑줄로 구분된 단어와 함께 문자와 숫자가 모두 포함되어야 합니다.
    • 관습- 문자열 변수를 선택할 수 있습니다. 예를 들어 문자열 변수를 정규식으로 만든 다음 여러 페이지에서 해당 변수를 사용하여 유효성 검사를 동일하게 유지할 수 있습니다. 맞춤 유효성 검사 방법에 대한 자세한 내용은 텍스트 입력 스크립트 구성요소를 참조하세요.

    사용자가 값을 입력하거나 선택해야 하는지 여부를 결정합니다. 기본값은 False이며 사용자 상호 작용이 선택 사항임을 의미합니다.

    사용자 인터페이스는 사용자 입력이 선택 사항인지 여부를 시각적으로 나타냅니다. 

    선택적 입력은 구성 요소 아래에 레이블로 표시됩니다.

    NS 액션 변경 속성을 사용하면 이 구성 요소의 상태나 값이 변경될 때 실행되는 작업을 설정할 수 있습니다.

    Scripter 작업, 아웃바운드 작업 또는 사용자 지정 작업을 선택할 수 있습니다. Outbound 속성이 활성화되어 있지 않으면 아웃바운드 작업을 사용할 수 없습니다. 

    텍스트 입력 상자는 기본적으로 한 줄을 지원합니다. 여러 줄을 아니요(기본값)로 설정하면 텍스트 입력이 텍스트를 줄 바꿈하거나 세로로 크기를 조정하지 않습니다.

    여러 줄-거짓

    여러 줄을 아니요로 설정하면 이 아이콘을 클릭하여 이전에 입력한 모든 텍스트를 지울 수 있습니다.

    여러 줄 거짓 지우기 버튼

    여러 줄을 예로 설정하면 텍스트 입력에 여러 줄의 텍스트가 허용됩니다. 

    여러 줄 참

    암호

    암호에 대한 입력 구성 요소를 구성하려면 암호를 다음으로 설정하십시오. . 암호 텍스트는 숨겨져 있습니다. 암호의 기본 설정은 다음과 같습니다. 아니요.

    비밀번호 전환 표시

    암호를 표시하는 토글을 표시하려면 암호 토글 표시를 다음으로 설정하십시오. . 비밀번호 전환 표시의 기본 설정은 다음과 같습니다. 아니요.