SharePoint Framework 拡張機能プレースホルダーの領域を事前に割り当てる

アプリケーション カスタマイザーを使用して、モダン ページに構造とコンテンツを追加できます。 これは、ページ内の特定のプレースホルダーを使用して実現できます。その後、カスタム拡張機能が読み込まれます。 拡張機能は、ページの読み込みライフ サイクルにかなり遅れて読み込まれるので、拡張機能を追加すると、追加のページ移動が発生する可能性があります。

注:

この機能は SharePoint Online でのみサポートされています。

ページの移動を減らすために、ページ構造の作成時に、サーバー側に既に拡張領域を 事前に割り当てることができます 。 この構成は、コレクションで新しい HostProperties プロパティを UserCustomAction 使用して、ページに読み込まれるアプリケーション カスタマイザーをサーバー側で示すことによって適用できます。

構成で HostProperties 使用できる 2 つの異なるプロパティがあります。

• preAllocatedApplicationCustomizerTopHeight: 上位プレースホルダーに事前に割り当てられた高さ
• preAllocatedApplicationCustomizerBottomHeight: 下のプレースホルダーに事前に割り当てられた高さ

高さはピクセル単位で定義されています。

ソリューションでの HostProperties の割り当ての定義SharePoint Framework

SharePoint Framework ソリューション コードでサーバー側の事前割り当てを直接定義できます。これにより、ソリューションの使用時に事前割り当てが確実に適用されます。 事前割り当ては、ソリューションの設計に応じて、 elements.xml または ClientSideInstance.xml ファイルで定義できます。

ソリューションのパッケージ化が正常に行われるように、ホスト プロパティの値を xml ファイルに適切にエンコードする必要があります。

サイト スコープ展開での事前割り当ての定義

拡張機能がサイト スコープにインストールされるように設計されている場合は、 ./sharepoint/assets/elements.xml ファイルを使用して事前割り当てを構成できます。 このファイルに含まれる構成は、SharePoint Framework ソリューションがサイト スコープにインストールされている場合、既定でサイトに適用されます。

次の xml フラグメントが追加 HostProperties のエントリで更新され、既定の高さが 50 ピクセルに定義されています。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
      Title="HeaderDemo"
      Location="ClientSideExtension.ApplicationCustomizer"
      ClientSideComponentId="03dd08c7-2575-4336-899e-68cfce663c4d"
      ClientSideComponentProperties="{&quot;testMessage&quot;:&quot;Test message&quot;}"
      HostProperties="{&quot;preAllocatedApplicationCustomizerTopHeight&quot;:&quot;50&quot;,&quot;preAllocatedApplicationCustomizerBottomHeight&quot;:&quot;50&quot;}">
  </CustomAction>
</Elements>

テナント全体のデプロイ オプションを使用して事前割り当てを定義する

テナント全体の展開オプションを使用してアクティブ化する対象となる拡張機能は、./sharepoint/assets/ClientSideInstance.xml ファイル内の 要素の プロパティをClientSideComponentInstance追加HostPropertiesすることで、事前に割り当てられた領域を使用するように構成できます。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <ClientSideComponentInstance
      Title="HeaderDemo"
      Location="ClientSideExtension.ApplicationCustomizer"
      ComponentId="03dd08c7-2575-4336-899e-68cfce663c4d"
      Properties="{&quot;testMessage&quot;:&quot;Test message&quot;}"
      HostProperties="{&quot;preAllocatedApplicationCustomizerTopHeight&quot;:&quot;50&quot;,&quot;preAllocatedApplicationCustomizerBottomHeight&quot;:&quot;50&quot;}">
  </ClientSideComponentInstance>
</Elements>

HostProperties この構成のエントリは、アプリ カタログ サイト コレクションの テナント全体の拡張機能 リスト エントリに追加されます。このエントリには、各項目の [ホストプロパティ] 列があります。

考慮事項

実装に応じて、注意すべき考慮事項がいくつかあります。

• 指定された高さが大きすぎると、指定した位置に div に余分な領域が追加されます。 高さがアプリケーション カスタマイザーよりも小さい場合、アプリケーション カスタマイザーはプレースホルダーに圧縮されます。
• 事前割り当てを定義したが、アプリケーション カスタマイザーがコードにプレースホルダーを作成しない場合、またはページに関連付けられていない場合、サーバー側で割り当てられた領域はページに残ります。

注:

HostPropertiesまた、既存のアプリケーション カスタマイザーに対して、サイト レベルの CustomAction オブジェクトを変更するか、アプリ カタログ サイトの [テナント全体の拡張機能] リストの [ホスト プロパティ] 列を使用して定義することもできます。 これはサーバー側の設定であるため、古いバージョンのSharePoint Frameworkを使用してビルドされた拡張機能にも適用できます。