Text input script component


テキスト入力コンポーネントは、エージェントにテキスト入力を求め、そのテキストを検証します。テキスト入力コンポーネントの値は変数にバインドすることができます。

  1. Click the Input icon on the component toolbar. 

  2. [プロパティ] パネルでプレースフォルダー ボックスを使い、何を入力するかをユーザーに伝えるプロンプトで、コントロールを事前入力します。変数はプレースホルダー テキストを格納しません。プレースホルダー テキストは、エージェントに指示を与える一時的なテキストでユーザー入力により自動的に置き換えられます。例:

    example-placeholder-text

    変数値を使ってフィールドを事前入力することができます。これを行うには、コンポーネント プロパティの [変数] リストで変数を選択します。その値は実行時にユーザーに自動的に表示されます。変数値はユーザーが入力するテキストで自動的に更新されます。ただし、検証処理の対象となります。

  3. ユーザー入力を検証するには、一般グループを展開します。次に、[検証] リストをクリックします。

    text_input_validation_drop_list2

  4. [選択] または [カスタム] をクリックして検証方法を選びます。

    [選択] では、事前設定の検証パターンを選択できます。検証の事前設定:

    メール 入力はメールアドレスの構文に従う必要があります。
    アルファベット アルファベット入力のみ許可 (数字は不可)。
    アルファベット - スペース付き アルファベットの入力のみを許可し、単語の間にスペースが必要です。例えば、「cool beans」は受け入れられますが、「cool_beans」は受け入れられません。
    アルファベット - 下線付き アルファベットの入力のみを許可(数字は不可)し、単語の間に下線が必要です。例えば、「cool beans」は受け入れられますが、「cool_beans」は受け入れられません。
    英数字 テキスト入力は 文字と数字の両方を含む必要があります。
    英数文字 - スペース付き テキスト入力は 文字と数字の両方を含み、単語は下線で分かれている必要があります。
    英数文字 - 下線付き テキスト入力は文字と数字の両方を含み、単語は下線で分かれている必要があります。

    事前パッケージの検証が十分ではない場合は、テキスト入力を検証する正規表現を使用できます。[検証] リストで [カスタム] を選択します。次に、テキスト ボックスに正規表現を入力します。正規表現は本トピックの範囲を超えています。例えば、ユーザーにテキスト入力内に「dog」というフレーズを入力させたいとします。カスタム検証プロパティに「dog」と入力すると、dog、  sundog、 hotdog、 my good dog Penny、またはその他の大文字と小文字の区別のある文字列を含む (DOG Doggie は入らない)文字の組み見合わせも受け入れる、単純な正規表現が設定されます。

    もう 1 つの例は ^[a-z]+$ で、アルファベットの小文字のみを受け入れます。

    ヒント:インターネットで正規表現に関する多数の学習リソースを利用することができます。例: http://www.regular-expressions.info/ および https://en.wikipedia.org/?title=Regular_expression.

    テキスト ボックスからフォーカスが移動すると、テキスト入力コンポーネントの値が検証され、選択した検証ルールに従っていることを確実にします。ユーザーによる入力が検証に合格しない場合は、入力した内容に検証の問題があることが示されます。 エディターのプレビュー モ=ドでカスタムおよび事前パッケージの検証をテストすることができます。

    invalid-text-input-entry

  5. Set the Requires Value switch to Yes if the user must type a value into the component. This setting is No by default, meaning that user input is optional.

  6. アクションを設定するには、[詳細プロパティ グループ]、[アクションを変更] の下にある [アクションが選択されていません] をクリックします。 

  7. To select an action, click a row in the list. You can assign a previously defined action or create a new action.

  8. [アクションを選択] リストを閉じます。 

  9. オプションで、このコンポーネントのその他のプロパティを設定します。例えば、余白設定を使って、このコンポーネントの周りのスペースを調整することができます。

    一般



    値は選択した変数にコンポーネントをバインドします。例えば、テキスト入力コンポーネントを変数にバインドすると、入力ボックスには常にその変数の値が表示され、指定したプレースホルダー テキストは無視されます。変数はユーザーが入力したテキストで自動的に更新されます。ただし、検証処理の対象となります。

    例えばラジオ ボタンなどの他のコントロールでは、[値] とともに [選択した値のテキスト] 設定を使用します。実行時にラジオ ボタンが選択されていると、その [選択した値のテキスト] は変数の新しい値になります。これにより、各ラジオ ボタンは同じ変数に別の値を割り当てることができます。

    カレンダー コントロールが変数にバインドされていると、その値はコントロールにより選択された日付に設定されます。変数は視覚コントロールの値をプリセットしたり、コントロールにより設定できるため、バインドは頻繁に使用される強力な方法です。




    Placeholder text displays a hint to the user.

    example-placeholder-property

    For a text input, placeholder text is shown until the user types input. If the user clears the contents of an input box, then placeholder text is re-displayed.

    example-place-holder-displayed

    For a dropdown, placeholder text prompts the user to make a selection.

    Figure shows placeholder text before a selection is made from a dropdown

    The placeholder is replaced after the user selects an item.

    placeholder-replaced-by-selection

    Tip: Manually typed placeholder text is ignored if the component is bound to a variable. If a variable is selected, then its value is always displayed.



    Validation ensures that text entered by an agent is properly formatted. When focus leaves the text input box, its value is tested to ensure it conforms with the selected validation rule. If user input does not pass validation, borders turn red to indicate a validation problem with what was typed.

    ドロップ リストを使って検証方法を選択します。

    select-a-validation-method

    • Select—allows you to select a preset validation pattern:

      メール 入力はメールアドレスの構文に従う必要があります。
      アルファベット順 アルファベット入力のみ許可(数字は不可)
      アルファベット - スペース付き アルファベットの入力のみを許可し、単語の間にスペースが必要です。例えば、「cool beans」は受け入れられますが、「cool_beans」は受け入れられません。
      アルファベット - 下線付き アルファベットの入力のみを許可(数字は不可)し、単語の間に下線が必要です。例えば、「cool_beans」は受け入れられますが、「cool beans」は受け入れられません。
      英数字 テキスト入力は 文字と数字の両方を含む必要があります。
      英数字 - スペース付き テキスト入力は 文字と数字の両方を含み、単語は下線で分かれている必要があります。
      英数字 - 下線付き テキスト入力は文字と数字の両方を含み、単語は下線で分かれている必要があります。
    • [カスタム] — 文字列変数を選択できます。例えば、文字列変数を regex にしてその変数を複数ページで使用し、検証を一定に保つことができます。




    Determines whether or not the user is required to type or select a value. The default is No, meaning that user interaction is optional.

    The user interface visually indicates whether user input is optional. 

     

    Optional input is indicated by a label below the component:

    requires-value-false




    テキスト入力 boxes support a single line by default. When Multiline is set to No (by default), a text input does not wrap text or resize itself vertically.

    multiline-false

    When Multiline is set to No, you can clear any text that was previously typed by clicking this icon:

    multiline-false-clear-button

    If you set Multiline to Yes, then a text input accepts multiple lines of text. 

    multiline-true



    レイアウト



    幅は、固定サイズに設定したり、表示内容の必要性に応じて拡大することができます。またはサイズ調整に影響を与える加重を使って、他のコンポーネントに比べてできる限り多くのスペースを使用することができます。

    設定 説明
    settings-sizing-auto-size 自動サイズ変更により、コンポーネントの内容に従って、そのサイズを縮小または拡大できます。例えば、ラベルの幅はテキストの量に応じて拡大することができます。
    settings-sizing-stretch

    ストレッチでは、サイズ調整に影響を与える加重を使い、他のコンポーネントと比べてできる限り多くのスペースを 1 つのコンポーネントに使用できます。

    2 つのコンポーネントがストレッチに設定されていると、デフォルトでどちらのコンポーネントにも残りのスペースの 50% が割り当てられます。この比率は加重値を変更して調整できます。

    For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.

    settings-sizing-pixels ピクセルで固定サイズを設定します。ボックスに整数を入力するか、上向き矢印か下向き矢印を使ってサイズを増加または減少します。コンポーネントにフォーカスがあると、これらの矢印が表示されます。



    高さは、固定サイズに設定したり、表示内容の必要性に応じて高くすることができます。またはサイズ調整に影響を与える加重を使って、他のコンポーネントに比べてできる限り多くのスペースを使用することができます。

    設定 説明
    settings-sizing-auto-size 自動サイズ変更により、コンポーネントの内容に従って、そのサイズを縮小または拡大できます。
    settings-sizing-pixels ピクセルで固定サイズを設定します。ボックスに整数を入力するか、上向き矢印か下向き矢印を使ってサイズを増加または減少します。コンポーネントにフォーカスがあると、これらの矢印が表示されます。
    settings-sizing-stretch

    ストレッチでは、サイズ調整に影響を与える加重を使い、他のコンポーネントと比べてできる限り多くのスペースを 1 つのコンポーネントに使用できます。

    2 つのコンポーネントがストレッチに設定されていると、デフォルトでどちらのコンポーネントにも残りのスペースの 50% が割り当てられます。この比率は加重値を変更して調整できます。

    For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.




    コンポーネントは、親コンテナーを基準にして、左揃え、右揃え、中央揃えにできます。

    ヒント: 親コンテナーの高さ設定が [自動サイズ変更] に設定されている場合、コンポーネントは垂直方向を基準にして中央揃えにすることはできません。これを修正するには、親コンテナーの高さを [ストレッチ] にするか、ピクセルで固定の高さに設定します。 
    設定
    align-left2 align-left-example2
    align-center2 align-center-example2
    align-right2 align-right-example2
    align-start align-start-example
    align-vertical-center align-vertical-center-example
    align-vertical-end align-vertical-end-example



    境界線の周りの上下左右のスペースに設定されている余白。

    画像は、余白、境界線、およびスペース設定の関係を示しています

    1. To optionally update all margin values at once, press the Set All button for Margin in the properties panel.

      すべて設定ボタンの画像

    2. 余白の値フィールドをクリックします。そのフィールドにスピン コントロールが表示されます。

    3. Use the spin control to increase or decrease the margin. If Set All was selected, the change is applied to all margins.

      settings-margin-spinner

      コンポーネントは新しい余白設定に応じて即座に再配置されます。




    ブール型 (True または False) 変数の値に基づいて、コンポーネントを表示または非表示にします。

    1. [レイアウト] プロパティ グループをクリックします。[表示可能] の下にある [変数を選択] をクリックします。
    2. Select a variable, or optionally create a new Yes/No variable and then assign that new variable to the Visible property.
    3. At runtime, the component is visible when the value of the variable is True. Conversely it is hidden when the variable's value is False.


    詳細



    値は選択した変数にコンポーネントをバインドします。例えば、テキスト入力コンポーネントを変数にバインドすると、入力ボックスには常にその変数の値が表示され、指定したプレースホルダー テキストは無視されます。変数はユーザーが入力したテキストで自動的に更新されます。ただし、検証処理の対象となります。

    例えばラジオ ボタンなどの他のコントロールでは、[値] とともに [選択した値のテキスト] 設定を使用します。実行時にラジオ ボタンが選択されていると、その [選択した値のテキスト] は変数の新しい値になります。これにより、各ラジオ ボタンは同じ変数に別の値を割り当てることができます。

    カレンダー コントロールが変数にバインドされていると、その値はコントロールにより選択された日付に設定されます。変数は視覚コントロールの値をプリセットしたり、コントロールにより設定できるため、バインドは頻繁に使用される強力な方法です。




    Placeholder text displays a hint to the user.

    example-placeholder-property

    For a text input, placeholder text is shown until the user types input. If the user clears the contents of an input box, then placeholder text is re-displayed.

    example-place-holder-displayed

    For a dropdown, placeholder text prompts the user to make a selection.

    Figure shows placeholder text before a selection is made from a dropdown

    The placeholder is replaced after the user selects an item.

    placeholder-replaced-by-selection

    Tip: Manually typed placeholder text is ignored if the component is bound to a variable. If a variable is selected, then its value is always displayed.



    コンポーネントは既定値ではすべて有効です。[無効] プロパティは True/False 変数をコンポーネントにバインドし、変数の実行値に基づいて、コンポーネントを無効または有効にします。

    1. True/False 変数を作成するには、[変数] タブをクリックします。

    2. [+] をクリックして変数を追加します。

      図は、新しい変数を追加するボタンを示しています

    3. データ タイプとして [True/False] を選択します。

      図は、変数のデータ タイプを示しています

    4. [名前] ボックスに記述的な名前を入力します。

      currently-enabled-variable

    5. [デフォルト値] を [True] または [False] に設定します。

      • 変数が True の場合、コンポーネントは無効になります。

      • 変数が False の場合、コンポーネントは有効になります。

    6. [適用] をクリックし、変数を保存します。
    7. [無効] プロパティに変数を割り当てます。[無効] の下にある [変数を選択] をクリックします。

      disabled-property-setting

    8. True/False 変数を選択します。

      currently-enabled-variable-selected

    9. 設定をテストするには、[プレビュー] をクリックします。



    Validation ensures that text entered by an agent is properly formatted. When focus leaves the text input box, its value is tested to ensure it conforms with the selected validation rule. If user input does not pass validation, borders turn red to indicate a validation problem with what was typed.

    ドロップ リストを使って検証方法を選択します。

    select-a-validation-method

    • Select—allows you to select a preset validation pattern:

      メール 入力はメールアドレスの構文に従う必要があります。
      アルファベット順 アルファベット入力のみ許可(数字は不可)
      アルファベット - スペース付き アルファベットの入力のみを許可し、単語の間にスペースが必要です。例えば、「cool beans」は受け入れられますが、「cool_beans」は受け入れられません。
      アルファベット - 下線付き アルファベットの入力のみを許可(数字は不可)し、単語の間に下線が必要です。例えば、「cool_beans」は受け入れられますが、「cool beans」は受け入れられません。
      英数字 テキスト入力は 文字と数字の両方を含む必要があります。
      英数字 - スペース付き テキスト入力は 文字と数字の両方を含み、単語は下線で分かれている必要があります。
      英数字 - 下線付き テキスト入力は文字と数字の両方を含み、単語は下線で分かれている必要があります。
    • [カスタム] — 文字列変数を選択できます。例えば、文字列変数を regex にしてその変数を複数ページで使用し、検証を一定に保つことができます。




    Determines whether or not the user is required to type or select a value. The default is No, meaning that user interaction is optional.

    The user interface visually indicates whether user input is optional. 

     

    Optional input is indicated by a label below the component:

    requires-value-false




    [アクションを変更] プロパティにより、このコンポーネントの状態や値が変更されると実行されるアクションを設定できます。

    change-action-button

    You can select a Scripter action, an Outbound Action, or a custom action. Outbound actions are not available unless the Outbound property is enabled. 




    テキスト入力 boxes support a single line by default. When Multiline is set to No (by default), a text input does not wrap text or resize itself vertically.

    multiline-false

    When Multiline is set to No, you can clear any text that was previously typed by clicking this icon:

    multiline-false-clear-button

    If you set Multiline to Yes, then a text input accepts multiple lines of text. 

    multiline-true