Skip to main content

This is documentation for Caché & Ensemble. See the InterSystems IRIS version of this content.Opens in a new tab

For information on migrating to InterSystems IRISOpens in a new tab, see Why Migrate to InterSystems IRIS?

フォーム上でのデータの非表示、表示、およびロード

ページは対話式にする必要があります。つまり、ユーザ・アクションに応答するようにします。特に、作成したフォームは以下のように動作する必要があります。

  • 既定では、ページにフォームは表示されません。

  • Contact テーブルの行にある edit リンクをクリックすると、ページにフォームが表示され、選択した連絡先のデータがフォーム・フィールドに表示されます。

このアクティビティは、クライアント側の JavaScript 関数を使用して実装します。これらの関数は、ページ上のユーザのアクションに応答して、ブラウザ内部で実行されます。

最初に、以下のクライアント側 JavaScript 関数を HomePage.cls に追加します。この関数は XDATA Contents ブロックの後に追加してください。


ClientMethod showContactForm(id) [ Language = javascript ]
{
  var controller = zenPage.getComponentById('contactData');
  controller.setProperty('modelId',id);
  var contactFormGroup=zenPage.getComponentById("contactFormGroup");
  contactFormGroup.setProperty('hidden',false);
}

このメソッドは、以下を実行します。

  1. <controller> 要素の modelId 属性の値を、メソッドに渡される ID 値に設定します。これにより、controller コンポーネントは、指定された Contact オブジェクトのデータをフォームにロードします。

  2. <fieldSet> 要素の hidden 属性の値を “false” に変更します。これにより、ページに fieldSet コンポーネントとその内容が表示されます。

次に、<fieldSet> 要素の hidden 属性の既定値を “true” に変更します。これにより、fieldSet コンポーネントとその内容が既定でページに表示されなくなります。

<fieldSet id="contactFormGroup" hidden="true" legend="Edit Contact">
</fieldSet>

最後に、<column> 要素では、tablePaneedit リンク列を定義します。この <column> は既に定義されています。


<column header="" width="5%" linkCaption="edit" 
     link="javascript:zenPage.showContactForm('#(%query.ID)#');"/>

ユーザがリンクをクリックしたときの動作は、link 属性の値により決まります。この場合、リンクをクリックすると、showContactForm が実行されます。link については、以下の点に注意してください。

  • showContactForm の呼び出しには zenPage オブジェクトが使用されます。

  • tablePane 行で表される Contact オブジェクトの ID 値を showContactForm に渡します。ページの生成時に、実行時式 #(%query.ID)# がこの値を関数呼び出しに挿入します。

Note:

zenPage オブジェクトの詳細は、"Zen アプリケーションの開発" の "Zen アプリケーション" のセクションにある "%page および zenPage" を参照してください。

Zen 実行時式の詳細は、"Zen アプリケーションの開発" の "Zen アプリケーション" のセクションにある "Zen 実行時式" を参照してください。

FeedbackOpens in a new tab