[]{class="badge informative"}

フォームの編集 editing-forms

概要

マーケターやオペレーターは、入力フォームを使用してレコードを作成、変更、プレビューできます。 Forms:データを視覚的に表現

入力フォームを作成および変更できます。

  • デフォルトで配信されるファクトリ入力フォームを変更できます。 工場出荷時の入力フォームは、工場のデータスキーマに基づいています。
  • 定義したデータスキーマにもとづいて、カスタム入力フォームを作成できます。

Formsはxtk:form タイプのエンティティです。 入力フォーム構造は、xtk:form スキーマで表示できます。 このスキーマを表示するには、メニューから​管理 > 設定 > データスキーマ​を選択します。 ​ フォーム構造の詳細をご覧ください。

入力フォームにアクセスするには、メニューから​ 管理 > 設定 > 入力フォーム ​を選択します。

フォームをデザインするには、XML エディターでXML コンテンツを編集します。

詳細情報

フォームをプレビューするには、「プレビュー」タブをクリックします。

フォームタイプ

さまざまな種類の入力フォームを作成できます。 フォームタイプは、ユーザーがフォームをどのように移動するかを決定します。

  • コンソール画面

    これはデフォルトのフォームタイプです。 フォームは1 ページで構成されます。

  • コンテンツ管理

    コンテンツ管理にこのフォームタイプを使用します。 この​ ユースケース ​を参照してください。

  • アシスタント

    このフォームは、特定の順序で並べられた複数のフローティングスクリーンで構成されます。 利用者は、ある画面から次の画面へ移動します。 詳細情報

  • アイコンボックス

    このフォームは複数のページで構成されます。 フォームを移動するには、フォームの左側にあるアイコンを選択します。

  • ノートブック

    このフォームは複数のページで構成されます。 フォームを移動するには、ユーザーはフォームの上部にあるタブを選択します。

  • 縦長ペイン

    このフォームにはナビゲーションツリーが表示されます。

  • 横長ペイン

    このフォームには、項目のリストが表示されます。

コンテナ

フォームでは、様々な目的でコンテナを使用できます。

  • フォーム内のコンテンツの整理
  • 入力フィールドへのアクセスを定義
  • 他のフォーム内にフォームをネストする

詳細情報

コンテンツを整理

コンテナを使用して、フォーム内のコンテンツを整理します。

  • フィールドをセクションにグループ化することができます。
  • ページを複数のページフォームに追加できます。

コンテナを挿入するには、<container>要素を使用します。 詳細情報

グループフィールド

コンテナを利用して、入力フィールドを整理されたセクションにグループ化できます。

フォームにセクションを挿入するには、次の要素を使用します:<container type="frame">。 必要に応じて、セクションタイトルを追加するには、label属性を使用します。

構文:<container type="frame" label="section_title"> […] </container>

この例では、コンテナが​作成 セクションを定義します。このセクションには、作成者​および​ 名前 ​の入力フィールドが含まれます。

<form _cs="Coupons (nms)" entitySchema="xtk:form" img="xtk:form.png" label="Coupons"
      name="coupon" namespace="nms" type="default" xtkschema="xtk:form">
  <input xpath="@code"/>
  <input xpath="@type"/>
  <container label="Creation" type="frame">
    <input xpath="createdBy"/>
    <input xpath="createdBy/@name"/>
  </container>
</form>

複数ページフォームへのページの追加

複数ページフォームの場合は、コンテナを使用してフォームページを作成します。

次の例は、フォームの​ General ​および​Details ページのコンテナを示しています。

<container img="ncm:book.png" label="General">
[…]
</container>
<container img="ncm:detail.png" label="Details">
[…]
</container>

フィールドへのアクセスを定義

コンテナを使用して表示内容を定義し、フィールドへのアクセスを定義します。 フィールドグループのオンとオフを切り替えることができます。

ネストフォーム

コンテナを使用して、他のフォーム内にフォームをネストします。 詳細情報

画像への参照

画像を検索するには、メニューから​管理 > 構成 > 画像​を選択します。

画像をフォーム内の要素(アイコンなど)に関連付けるには、画像への参照を追加します。 例えば、<container>要素でimg属性を使用します。

構文:img="namespace:filename.extension"

次の例は、ncm名前空間からbook.pngおよびdetail.png画像への参照を示しています。

<container img="ncm:book.png" label="General">
[…]
</container>
<container img="ncm:detail.png" label="Details">
[…]
</container>

これらの画像は、ユーザーがクリックして複数ページのフォームを移動するアイコンに使用されます。

シンプルなフォームの作成 create-simple-form

フォームを作成するには、次の手順に従います。

  1. メニューから、管理 > 設定 > 入力フォーム​を選択します。

  2. リストの右上にある「新規」ボタンをクリックします。

  3. フォームプロパティを指定します。

    • フォーム名と名前空間を指定します。

      フォーム名と名前空間は、関連するデータスキーマと一致する可能性があります。 次の例は、cus:order データスキーマのフォームを示しています。

      code language-xml
      <form entitySchema="xtk:form" img="xtk:form.png" label="Order" name="order" namespace="cus" type="iconbox" xtkschema="xtk:form">
        […]
      </form>
      

      または、entity-schema属性でデータスキーマを明示的に指定することもできます。

      code language-xml
      <form entity-schema="cus:stockLine" entitySchema="xtk:form" img="xtk:form.png" label="Stock order" name="stockOrder" namespace="cus" xtkschema="xtk:form">
        […]
      </form>
      
    • フォームに表示するラベルを指定します。

    • 必要に応じて、フォームタイプを指定します。 フォームタイプを指定しない場合は、デフォルトでコンソール画面タイプが使用されます。

      マルチページフォームをデザインする場合は、<form>要素でフォームタイプを省略し、コンテナでタイプを指定できます。

  4. 保存」をクリックします。

  5. フォーム要素を挿入します。

    例えば、入力フィールドを挿入するには、<input>要素を使用します。 xpath属性をXPath式としてフィールド参照に設定します。 詳細情報

    この例では、nms:recipient スキーマに基づく入力フィールドを示します。

    code language-xml
    <input xpath="@firstName"/>
    <input xpath="@lastName"/>
    
  6. フォームが特定のスキーマタイプに基づいている場合は、このスキーマのフィールドを検索できます。

    1. 挿入/ドキュメントフィールド​をクリックします。

    2. フィールドを選択し、OK​をクリックします。

  7. 必要に応じて、フィールドエディターを指定します。

    デフォルトのフィールドエディターは、各データタイプに関連付けられます。

    • 日付タイプフィールドの場合、フォームには入力カレンダーが表示されます。
    • 列挙タイプのフィールドの場合、フォームには選択リストが表示されます。

    次のフィールドエディタータイプを使用できます。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    フィールドエディター フォーム属性
    ラジオボタン type="radiobutton"
    チェックボックス type="checkbox"
    ツリーを編集 type="tree"

    詳しくは、​ メモリリストコントロール ​を参照してください。

  8. オプションで、フィールドへのアクセスを定義します。

    table 0-row-3 1-row-3 2-row-3 3-row-3
    要素 属性 説明
    <input> read-only="true" フィールドへの読み取り専用アクセスを提供します
    <container> type="visibleGroup" visibleIf="edit-expr" 条件付きで表示されるフィールドグループ
    <container> type="enabledGroup" enabledIf="edit-expr" 条件付きでフィールドグループを有効にする

    例:

    code language-xml
    <container type="enabledGroup" enabledIf="@gender=1">
      […]
    </container>
    <container type="enabledGroup" enabledIf="@gender=2">
      […]
    </container>
    
  9. 必要に応じて、コンテナを使用してフィールドをセクションにグループ化します。

    code language-xml
    <container type="frame" label="Name">
       <input xpath="@firstName"/>
       <input xpath="@lastName"/>
    </container>
    <container type="frame" label="Contact details">
       <input xpath="@email"/>
       <input xpath="@phone"/>
    </container>
    

複数ページフォームの作成 create-multipage-form

複数のページフォームを作成できます。 他のフォーム内にフォームをネストすることもできます。

iconbox フォームの作成

iconbox フォームの種類を使用して、フォームの左側にアイコンを表示し、ユーザーをフォーム内の別のページに移動させます。

既存のフォームの種類をiconboxに変更するには、次の手順に従います。

  1. <form>要素のtype属性をiconboxに変更します:

    code language-xml
    <form […] type="iconbox">
    
  2. 各フォームページのコンテナを設定します。

    1. <container>要素を<form>要素の子として追加します。

    2. アイコンのラベルと画像を定義するには、label属性とimg属性を使用します。

      code language-xml
      <form entitySchema="xtk:form" name="Service provider" namespace="nms" type="iconbox" xtkschema="xtk:form">
          <container img="xtk:properties.png" label="General">
              <input xpath="@label"/>
              <input xpath="@name"/>
              […]
          </container>
          <container img="nms:msgfolder.png" label="Details">
              <input xpath="@address"/>
              […]
          </container>
          <container img="nms:supplier.png" label="Services">
              […]
          </container>
      </form>
      

    または、既存の<container>要素からtype="frame"属性を削除します。

ノートブックフォームの作成

notebook フォームの種類を使用して、ユーザーを別のページに移動させるタブをフォームの上部に表示します。

既存のフォームの種類をnotebookに変更するには、次の手順に従います。

  1. <form>要素のtype属性をnotebookに変更します:

    code language-xml
    <form […] type="notebook">
    
  2. 各フォームページのコンテナを追加します。

    1. <container>要素を<form>要素の子として追加します。
    2. アイコンのラベルと画像を定義するには、label属性とimg属性を使用します。
    code language-xml
      <form entitySchema="xtk:form" name="Service provider" namespace="nms" type="notebook" xtkschema="xtk:form">
          <container label="General">
              <input xpath="@label"/>
              <input xpath="@name"/>
              […]
          </container>
          <container label="Details">
              <input xpath="@address"/>
              […]
          </container>
          <container label="Services">
              […]
          </container>
      </form>
    

    または、既存の<container>要素からtype="frame"属性を削除します。

ネストフォーム

他のフォーム内にフォームをネストできます。 例えば、ノートブックフォームをアイコンボックスフォーム内にネストすることができます。

ネストのレベルでナビゲーションを制御します。 利用者は、サブフォームにドリルダウンできます。

別のフォーム内にフォームをネストするには、<container>要素を挿入し、type属性をフォームタイプに設定します。 最上位フォームの場合、外部コンテナまたは<form>要素でフォームタイプを設定できます。

次の例は、複雑なフォームを示しています。

  • 最上位のフォームはアイコンボックスフォームです。 このフォームは、General​と​ Details ​の2つのコンテナで構成されています。

    その結果、外側のフォームには、上位レベルに​General ページと​Details ページが表示されます。 これらのページにアクセスするには、フォームの左側にあるアイコンをクリックします。

  • サブフォームは、General コンテナ内にネストされたノートブックフォームです。 サブフォームは、名前​と​ 連絡先 ​のラベルが付いた2つのコンテナで構成されています。

<form _cs="Profile (nms)" entitySchema="xtk:form" img="xtk:form.png" label="Profile" name="profile" namespace="nms" xtkschema="xtk:form">
  <container type="iconbox">
    <container img="ncm:general.png" label="General">
      <container type="notebook">
        <container label="Name">
          <input xpath="@firstName"/>
          <input xpath="@lastName"/>
        </container>
        <container label="Contact">
          <input xpath="@email"/>
        </container>
      </container>
    </container>
    <container img="ncm:detail.png" label="Details">
      <input xpath="@birthDate"/>
    </container>
  </container>
</form>

その結果、外部フォームの​General ページには、Name​と​Contact タブが表示されます。

別のフォーム内にフォームをネストするには、<container>要素を挿入し、type属性をフォームタイプに設定します。 最上位フォームの場合、外部コンテナまたは<form>要素でフォームタイプを設定できます。

次の例は、複雑なフォームを示しています。

  • 最上位のフォームはアイコンボックスフォームです。 このフォームは、General​と​ Details ​の2つのコンテナで構成されています。

    その結果、外側のフォームには、上位レベルに​General ページと​Details ページが表示されます。 これらのページにアクセスするには、フォームの左側にあるアイコンをクリックします。

  • サブフォームは、General コンテナ内にネストされたノートブックフォームです。 サブフォームは、名前​と​ 連絡先 ​のラベルが付いた2つのコンテナで構成されています。

<form _cs="Profile (nms)" entitySchema="xtk:form" img="xtk:form.png" label="Profile" name="profile" namespace="nms" xtkschema="xtk:form">
  <container type="iconbox">
    <container img="ncm:general.png" label="General">
      <container type="notebook">
        <container label="Name">
          <input xpath="@firstName"/>
          <input xpath="@lastName"/>
        </container>
        <container label="Contact">
          <input xpath="@email"/>
        </container>
      </container>
    </container>
    <container img="ncm:detail.png" label="Details">
      <input xpath="@birthDate"/>
    </container>
  </container>
</form>

その結果、外部フォームの​General ページには、Name​と​Contact タブが表示されます。

工場出荷時の入力フォームの変更 modify-factory-form

ファクトリフォームを変更するには、次の手順に従います。

  1. 工場出荷時の入力フォームを変更します。

    1. メニューから、管理 > 設定 > 入力フォーム​を選択します。
    2. 入力フォームを選択して修正します。

    ファクトリ データ スキーマを拡張することはできますが、ファクトリ入力フォームを拡張することはできません。 ファクトリ入力フォームを再作成することなく、直接変更することをお勧めします。 ソフトウェアのアップグレード時に、工場出荷時の入力フォームの変更がアップグレードと結合されます。 自動結合が失敗した場合は、競合を解決できます。 詳細情報

    例えば、追加フィールドを含むファクトリスキーマを拡張する場合、このフィールドを関連するファクトリフォームに追加できます。

フォームの検証 validate-forms

フォームに検証コントロールを含めることができます。

フィールドへの読み取り専用アクセス権の付与

フィールドへの読み取り専用アクセス権を付与するには、readOnly="true"属性を使用します。 例えば、レコードのプライマリキーを表示し、読み取り専用アクセスを使用する場合があります。 詳細情報

この例では、nms:recipient スキーマのプライマリキー(iRecipientId)が読み取り専用アクセスで表示されます。

<value xpath="@iRecipientId" readOnly="true"/>

必須フィールドの確認

次の必須情報を確認できます。

  • 必須フィールドにはrequired="true"属性を使用します。
  • <leave> ノードを使用して、これらのフィールドを確認し、エラーメッセージを表示します。

この例では、電子メールアドレスが必要で、ユーザーがこの情報を提供していない場合はエラーメッセージが表示されます。

<input xpath="@email" required="true"/>
<leave>
  <check expr="@email!=''">
    <error>The email address is required.</error>
  </check>
</leave>

式フィールド ​​ フォームコンテキスト ​の詳細をご確認ください。

値の検証

JavaScript SOAP呼び出しを使用して、コンソールからフォームデータを検証できます。 これらの呼び出しを使用して複雑な検証を行います。例えば、値を承認済み値のリストと照合します。 詳細情報

  1. JS ファイルに検証関数を作成します。

    例:

    code language-js
    function nms_recipient_checkValue(value)
    {
      logInfo("checking value " + value)
      if (…)
      {
        logError("Value " + value + " is not valid")
      }
      return 1
    }
    

    この例では、関数の名前はcheckValueです。 この関数は、nms名前空間のrecipient データ型を確認するために使用されます。 チェックされている値がログに記録されます。 値が無効な場合は、エラーメッセージがログに記録されます。 値が有効な場合は、値1が返されます。

    返された値を使用して、フォームを変更できます。

  2. フォームで、<soapCall>要素を<leave>要素に追加します。

    この例では、SOAP呼び出しを使用して@valueToCheck文字列を検証します。

    code language-xml
    <form name="recipient" (…)>
    (…)
      <leave>
        <soapCall name="checkValue" service="nms:recipient">
          <param exprIn="@valueToCheck" type="string"/>
        </soapCall>
      </leave>
    </form>
    

    この例では、checkValue メソッドとnms:recipient サービスが使用されています。

    • サービスは名前空間とデータタイプです。
    • メソッドは関数名です。 名前では大文字と小文字が区別されます。

    呼び出しは同期して実行されます。

    すべての例外が表示されます。 <leave>要素を使用する場合、入力された情報が検証されるまで、ユーザーはフォームを保存できません。

次の例では、フォーム内からサービス呼び出しを行う方法を示します。

<enter>
  <soapCall name="client" service="c4:ybClient">
    <param exprIn="@id" type="string"/>
    <param type="boolean" xpathOut="/tmp/@count"/>
  </soapCall>
</enter>

この例では、入力はプライマリキーであるIDです。 ユーザーがこのIDのフォームに入力すると、このIDを入力パラメーターとしてSOAP呼び出しが行われます。 出力はこのフィールドに書き込まれるブール値です:/tmp/@count。 このブール値はフォーム内で使用できます。 ​ フォームコンテキスト ​の詳細をご覧ください。

recommendation-more-help
campaign-classic-help