HTML フォーム Web パーツを使用して、別の Web パーツ内のデータをフィルター処理して表示する

重要:  この記事は機械翻訳されています。機械翻訳についての「免責事項」をお読みください。この記事の英語版を参照するには、ここをクリックしてください。

HTML フォーム Web パーツを使用して、リスト ビュー Web パーツなどの別の Web パーツに接続してデータを渡すことができます。

この記事の内容

フォーム Web パーツを使用します。

ページに Web パーツを追加します。

HTML フォーム Web パーツを別の Web パーツに接続します。

HTML フォーム Web パーツをカスタマイズします。

既定の HTML フォーム Web パーツをカスタマイズします。

複数行テキスト ボックスを使用します。

オプション ボタンを使う

選択肢のドロップダウン リストを使用します。

チェック ボックスを使用します。

Web パーツの共通プロパティを構成します。

外観

レイアウト

高度な

フォーム Web パーツを使用する

HTML フォーム Web パーツを使用すると、別の Web パーツに接続してデータを渡すことができます。たとえば、既定の HTML フォーム Web パーツを使用して地域名を入力し、その値を顧客データのリスト ビュー Web パーツに渡して、その地域を基にデータをフィルター処理することができます。また、HTML フォーム Web パーツをカスタマイズして、たとえばユーザーがドロップダウン リストから地域名を選択できるようにすることもできます。HTML フォーム Web パーツでは、テキスト ボックス、ドロップダウン リスト、複数行テキスト ボックス、チェック ボックス、またはオプション ボタンを使用できます。

フィールドを他の Web パーツに接続する方法は、他の Web パーツで Web パーツ接続の使用がどのように定義されているかによって異なります。

フォームでは複数の要素 (テキスト ボックスやラジオ ボタンなど) を使用できますが、1 つのリスト ビュー Web パーツに接続できるフィールドは 1 つだけです。ただし、複数のフィールドを別々の Web パーツに同時に接続できます。たとえば、1 つのテキスト ボックスと複数のオプション ボタンを備えた HTML フォーム Web パーツがあるとします。そのテキスト ボックスとオプション ボタンを、別々の 2 つのリスト ビュー Web パーツに接続できます。ユーザーが [検索] ボタンをクリックすると、HTML フォーム Web パーツに入力された情報に従って、両方のリスト ビュー Web パーツがフィルター処理されます。

HTML フォーム Web パーツに含まれる複数のフィールドを別の Web パーツに接続できます (ただし、その Web パーツで複数のパラメーターを受け取ることができる場合に限ります)。この場合、接続を確立するために、SharePoint と互換性のある Web デザイン プログラム (SharePoint Designer 2010 など) が必要になることがあります。

ページの先頭へ

Web パーツをページに追加する

ページを編集するには、最低でも、サイトの既定の "<サイト名> のメンバー" という SharePoint グループに参加することによって得られる権限が必要です。

  1. ページで、リボンの [ページ] タブをクリックし、[編集] をクリックします。

    [ページ] タブの [編集] コマンド

    [編集] コマンドが無効になっている場合は、ページの編集に必要な権限を持っていない可能性があります。担当の管理者に問い合わせてください。

  2. Web パーツを追加するページをクリックし、[挿入] タブをクリックして、[Web パーツ] をクリックします。

    [Web パーツ] コマンド

  3. [カテゴリ] で、カテゴリ ([リストとライブラリ] など) をクリックし、ページに追加する Web パーツ ([お知らせ] など) をクリックして、[追加] をクリックします。

    Web パーツの選択

  4. Web パーツを選択すると、その Web パーツに関する情報が [Web パーツに関する情報] に表示されます。

  5. ページの編集が完了したら、[ページ] タブをクリックし、[保存して閉じる] をクリックします。

ページの先頭へ

HTML フォーム Web パーツを別の Web パーツに接続する

HTML フォーム Web パーツを使用するには、リスト ビュー Web パーツなど、Web パーツ接続を介して値を受信できる別の Web パーツに接続します。リストのフィルターを適用して、フィルターを適用する列は、HTML フォーム Web パーツと同じページ上の Web パーツに表示である必要があります。HTML フォーム Web パーツをページに追加する方法の詳細については、ページに Web パーツの追加を参照してください。

  1. フィルター処理する Web パーツが含まれているページを参照します。

  2. リボンの [ページ] タブをクリックし、[編集] をクリックします。

    [編集] コマンドが無効になっている場合は、ページの編集に必要な権限を持っていない可能性があります。担当の管理者に問い合わせてください。

  3. HTML フォーム Web パーツをポイントし、下矢印をクリックして、[接続] をクリックし、[他の Web パーツにフォームの値を提供] をポイントして、リンク先の Web パーツの名前をクリックします。

  4. [接続の選択] ダイアログ ボックスで、[接続の構成] タブをクリックします。

  5. [接続の種類] メニューで、HTML フォーム Web パーツの情報と一致するフィールドを選択します。

注: フィールドには、同じ名前が必要はありませんについても同じデータ型であるものがあります。HTML フォーム Web パーツから送信される値は、テキスト値

  1. [完了] をクリックし、ページの上部ある [編集モードの終了] をクリックします。

既定では、テキスト ボックスにテキストを入力し、[検索] をクリックするか、Enter キーを押すことができます。もう一方の Web パーツに、入力したテキストに一致するデータのみが表示されます。新しいテキストを入力するためにテキスト ボックスをクリアするには、現在のテキストを選択してから削除します。

ページの先頭へ

HTML フォーム Web パーツをカスタマイズする

HTML フォーム Web パーツをカスタマイズするには、HTML フォーム Web パーツのツール ウィンドウからアクセスする [ソース エディター] を使用するか、SharePoint と互換性のある Web デザイン プログラム (SharePoint Designer 2010 など) を使用します。標準のテキスト ボックスの代わりに、オプション ボタン、チェック ボックス、複数行テキスト ボックス、およびリスト ボックスを使用できます。また、ラベルを追加し、既定値を割り当てることもできます。

HTML フォーム Web パーツをカスタマイズする場合は、次のことに注意してください。

  • 別の Web パーツにデータを渡すために使用できる [検索] ボタン (INPUT 要素を使用) は 1 つのみです。

  • HTML フォーム Web パーツでは、FORM 要素が使用されます。HTML 要素、BODY 要素、FORM 要素など、一部の HTML 要素は FORM 要素内で使用できません。

  • すべてのフォーム フィールド名は一意である必要があります。それぞれの名前の値は、接続先の Web パーツで対応する列名に接続するために使用されます。

フォーム Web パーツをカスタマイズするには、[ソース エディター] をクリックして [テキスト エディター] ダイアログ ボックスを表示してから、HTML ソース コードを変更または追加します。

注: HTML フォーム Web パーツは、別の Web パーツにデータを提供するだけ-から別の Web パーツでデータを取得することはできません。たとえば、データの行を表示するのに詳細フォームとして HTML フォーム Web パーツを使用することはできません。

ページの先頭へ

既定の HTML フォーム Web パーツをカスタマイズする

既定の HTML フォーム Web パーツをカスタマイズするには、次の操作を行います。

  1. HTML フォーム Web パーツを表示するリボンの [ページ] をクリックして、 ] タブの [編集] に入力し、コマンドの編集します。

  2. HTML フォーム Web パーツをポイントし、下向き矢印をクリックし、をクリックしてWeb パーツの編集します。

  3. ツール ウィンドウで、[ソース エディター ] ボタンをクリックします。

  4. [テキスト入力] ダイアログ ボックスが開き、既定の HTML コードが表示されます。

コードを読みやすくし、簡単に変更できるようにするために、次のようにテキストに改行を挿入して、行を分けます。

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input type="text" name="T1"/>
<input type="button" value="Go" onclick="javascript:_SFSUBMIT_"/>
</div>

フィールドの名前の変更、フィールドのラベルの追加、既定値の追加など、いくつかの方法で最初の INPUT 要素を変更できます。

Property/プロパティ

説明

[フィールド名]

フォーム Web パーツの既定のテキスト ボックスの名前があるT1 です。これは、[接続の構成] ダイアログ ボックスで表示される名前です。フィールドには、わかりやすい名前を付ける、 T1の代わりに新しい名前を入力します。引用符は削除しないでください。

フィールド ラベル

フォーム フィールドの前後にラベル テキストを追加できます。入力するテキストには、引用符を含めないでください。

既定値

テキスト領域フィールドに既定値を追加できます。ユーザーは既定値のまま [検索] ボタンをクリックすることも、自分で値を入力することもできます。既定値を追加するには、value 属性を使用します。

たとえば、もっとわかりやすい名前を付けて、既定値とラベルも追加する場合は、次のようにすることができます。

Region: <input type="text" name="Region" value="India"/>

次の例に示すように、ボタンの名前を変更して 2 つ目の INPUT 要素を変更できます。

<input type="button" value="SUBMIT" onclick="javascript:_SFSUBMIT_"/>

また、DIV 要素の前後に他の HTML 要素を追加することもできます。たとえば、ユーザーがすばやくページを更新して FORM 要素をリセットできるようにするには、DIV 終了要素の後に現在のページのアンカー タグを追加すると非常に便利で簡単です。次に例を示します。

<br/>
<a href="http://contoso/SitePages/CustByRegion.aspx">Refresh</a>

重要: テキスト エディター ] ダイアログ ボックスで、他の HTML コードは変更されません。HTML フォーム Web パーツは、その他の Web パーツへの接続を作成するのには、実行時に動的にスクリプト ルーチンを作成します。Onkeydownまたはonclickイベントのコードは変更しないでまたは HTML フォーム Web パーツを誤って切れる可能性があります。

ページの先頭へ

複数行テキスト ボックスを使用する

複数行テキスト入力コントロールは TEXTAREA 要素で定義します。ROWS 属性には、テキスト フィールドに表示される行数を指定します。COLS 属性には、テキスト領域の幅を文字数で指定します。次の例では、幅 30 文字の 5 行のテキスト ボックスが表示されます。ユーザーがこのボックスにテキストを入力すると、テキストは 30 文字で折り返されます。

<textarea name="Region" rows=5 cols=30></textarea>

ヒント: 空き領域がないソース コードの右角かっこ (>) の直後にすることを確認します。

ページの先頭へ

オプション ボタンを使用する

オプション ボタンはラジオ ボタンとも呼ばれ、複数選択不可の選択肢を提供します。次の例では、3 つのラジオ ボタンが表示されます。各ラジオ ボタンで同じ名前を使用します。通常、各ボタンの後にラベルを追加します。各ラジオ ボタンを別々の行に配置する場合は、BR 要素を使用します。

<input type="radio" name="Region" value="India"/> India<BR/>
<input type="radio" name="Region" value="USA"/> USA<BR/>
<input type="radio" name="Region" value="Spain"/> Spain<BR/>

ページの先頭へ

選択肢のドロップダウン リストを使用する

複数選択不可の選択肢が多数ある場合は、SELECT 要素を使用してドロップダウン リストを使用することを検討してください。各オプションはリスト内で個別の選択肢として表示されますが、ユーザーが選択できる選択肢は 1 つだけです。OPTION 要素の右山かっこの後のテキストは、ドロップダウン リストに表示されるテキストです。

<select name="Region">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Spain"> Spain </option>
</select>

Spain などの既定値を指定するには、次のようにします。

<option value="Spain" selected="selected"> Spain </option>

ページの先頭へ

チェック ボックスを使用する

複数選択可能な選択肢がいくつかある場合は、チェック ボックスを使用することを検討してください。各オプションは個別のチェック ボックスとして表示され、ユーザーはいずれかまたはすべての選択肢を選択できます。このオプションを使用するには、Web パーツ接続の一環として複数のパラメーターを受け取る 1 つの Web パーツが必要です。

<input type="checkbox" name="region1" value="India"/> India<BR/>
<input type="checkbox" name="region2" value="USA"/> USA<BR/>
<input type="checkbox" name="region3" value="Spain"/> Spain<BR/>

Spain などの既定値を指定するには、次のようにします。

<input type="checkbox" name="region3" value="Spain" checked="checked"/> Spain<BR/> 

ページの先頭へ

Web パーツの共通プロパティを構成する

Web パーツには、その外観、レイアウト、および細かい特性を制御する共通のプロパティがあります。Web パーツのプロパティは、ツール ウィンドウで変更します。

注: ツール ウィンドウに表示される共通の Web パーツ プロパティは、いくつかの理由で、このセクションに記載されている内容と異なる場合があります。

  • ツール ウィンドウの [詳細] セクションを表示するには適切な権限が必要であるため。

  • Web パーツの開発者によって、特定の Web パーツの共通のプロパティが非表示に設定されていたり、ツール ウィンドウの各セクション ([外観]、[レイアウト]、[詳細設定]) に、以下の表にはないプロパティが作成され、表示されている可能性もあるため。

  • 権限やプロパティの設定によっては、Web パーツのプロパティが無効または非表示になることがある。

[外観]

Property/プロパティ

説明

タイトル

Web パーツのタイトル バーに表示される Web パーツのタイトルを指定します。

高さ

Web パーツの高さを指定します。

Web パーツの幅を指定します。

枠の状態

枠の種類

枠の種類

タイトル バーおよび Web パーツ フレームの枠線を表示するかどうかを指定します。

[レイアウト]

Property/プロパティ

説明

非表示

ユーザーがページを開いたときに、Web パーツが表示されるかどうかを指定します。このチェック ボックスをオンにした場合、自分がデザインしたページのみ、Web パーツが表示され、タイトルには "(非表示)" という接尾辞が追加されます。

Web パーツ接続を介して他の Web パーツにデータを提供する際、Web パーツそのものは表示しないようにする必要がある場合、Web パーツを非表示にすることができます。

方向

Web パーツのコンテンツの文字の方向を指定します。たとえば、アラビア語は右から左に記述され、英語を含むほとんどの欧州言語は左から右に記述されます。Web パーツの種類によっては、この設定を使用できないことがあります。

領域

Web パーツが位置するページ上の領域を指定します。

注: ページ上の領域を変更する権限がない場合、領域はリスト ボックスに表示されません。

領域のインデックス

領域に複数の Web パーツが存在する場合に、その領域内の Web パーツの位置を指定します。

順序を指定するには、テキスト ボックスに正の整数を入力します。

領域内の Web パーツが上から下に配置されている場合、値が 1 の Web パーツが領域の一番上に表示されます。領域内の Web パーツが左から右に配置されている場合、値が 1 の Web パーツが領域の左に表示されます。

たとえば、上から下に表示される空の領域に Web パーツを追加する場合、領域のインデックスは "0" です。領域の一番下に 2 つ目の Web パーツを追加した場合、領域のインデックスは "1" になります。2 つ目の Web パーツを領域の先頭に移動するには「0」と入力し、1 つ目の Web パーツについては「1」を入力します。

注: ゾーン内の Web パーツにはそれぞれ、ゾーンのインデックスとして一意の値が割り当てられている必要があります。したがって、現在の Web パーツの領域のインデックス値を変更すると、その領域内の他の Web パーツの領域のインデックス値も変更される可能性があります。

詳細

Property/プロパティ

説明

最小化を許可する

Web パーツを最小化できるようにするかを指定します。

閉じるのを許可する

Web パーツをページから削除できるかどうかを指定します。

非表示を許可する

Web パーツを非表示にできるようにするかを指定します。

領域の変更を許可する

Web パーツを別の領域に移動できるかどうかを指定します。

接続を許可する

Web パーツを他の Web パーツに接続できるかどうかを指定します。

個人用ビューでの編集を許可する

Web パーツのプロパティを個人用ビューで変更できるかどうかを指定します。

エクスポート モード

この Web パーツに関してエクスポートを許可するデータのレベルを指定します。構成によっては、この設定が利用できない場合もあります。

タイトル URL

Web パーツについての追加情報を含んだファイルの URL を指定します。Web パーツのタイトルをクリックすると、このファイルが別のブラウザー ウィンドウで表示されます。

説明

Web パーツのタイトルまたは Web パーツのアイコンにマウス ポインターを合わせたときに表示されるポップ ヒントを指定します。このプロパティの値は、ツール ウィンドウの [Web パーツの検索] メニューの [検索] コマンドを使った Web パーツ検索時に使用されます。

ヘルプ URL

Web パーツについてのヘルプ情報を含んだファイルの場所を指定します。Web パーツ メニューの [ヘルプ] コマンドをクリックすると、ヘルプ情報が別のブラウザー ウィンドウで表示されます。

ヘルプ モード

Web パーツのヘルプ コンテンツをブラウザでどのように表示するかを指定します。

次のいずれかを選択します。

• [モーダル] 別のブラウザー ウィンドウに表示されます (ブラウザーがこの機能をサポートしている場合)。元の Web ページに戻るには、ウィンドウを閉じる必要があります。

• [モードレス] 別のブラウザー ウィンドウに表示されます (ブラウザーがこの機能をサポートしている場合)。ウィンドウを閉じなくても元の Web ページに戻ることができます。これが既定値です。

• [移動] Web ページが現在のブラウザー ウィンドウに表示されます。

注: カスタムの Microsoft ASP.NET Web パーツがこのプロパティをサポートしている場合でも、SharePoint の既定のヘルプ トピックは必ず別のブラウザー ウィンドウで表示されます。

カタログ アイコン イメージの URL

] Web ページが現在のブラウザー ウィンドウで表示されます。

タイトル アイコン イメージの URL

Web パーツのタイトル バーで使用するイメージが格納されたファイルの場所を指定します。イメージのサイズは 16 × 16 ピクセルであることが必要です。

エラー メッセージのインポート

Web パーツのインポートで問題が発生した場合に表示されるメッセージを指定します。

ページの先頭へ

注: 機械翻訳についての免責事項: この記事の翻訳はコンピューター システムによって行われており、人間の手は加えられていません。マイクロソフトでは、英語を話さないユーザーがマイクロソフトの製品、サービス、テクノロジに関するコンテンツを理解するのに役立てるため、こうした機械翻訳を提供しています。記事は機械翻訳されているため、用語、構文、文法などに誤りがある場合があります。

スキルを磨く
トレーニングの探索
新機能を最初に入手
Office Insider に参加する

この情報は役に立ちましたか?

ご意見をいただきありがとうございます。

フィードバックをお寄せいただき、ありがとうございます。Office サポートの担当者におつなぎいたします。

×