SharePoint の Web パーツをアップロードする

[アーティクル]
04/08/2023

ユーザー用に事前に構成されている標準の SharePoint Web パーツを展開します。

適用対象: SharePoint 2013 | SharePoint アドイン | SharePoint Online

事前に構成された標準的な SharePoint Web パーツをアップロードして、ユーザーが自分の SharePoint サイトに追加できるようにすることができます。たとえば、事前に構成された以下のパーツをアップロードできます。

リモート Web 上で JavaScript ファイルを使用する Script Editor Web パーツ。
コンテンツ検索 Web パーツ。

この記事では、リモート Web 上の JavaScript ファイルを使用するように Script Editor Web パーツを事前に構成して、UI のカスタマイズを実行する方法を説明します。このソリューションを使用して、以下を行うことができます。

ホスト Web 上の [サイトのリソースファイル] リストにあるスクリプトを参照する代わりに、Web パーツのリモート Web にあるスクリプトファイルを使用します。
カスタムサイトプロビジョニングプロセスで、事前に構成された Web パーツを展開します。たとえば、カスタムサイトプロビジョニングプロセスの一環として、新しいサイトが作成される際にユーザーにサイト使用状況のポリシーの情報を表示できます。
ユーザーに対して、フィルター処理されたコンテンツが Web パーツに自動的に読み込まれます。たとえば、スクリプトファイルには、外部システムから読み取られるローカルニュース情報を表示できます。
ユーザーが [Web パーツギャラリー] にある Web パーツを使用してサイトに他の機能を追加できるようにします。

はじめに

開始するには、GitHub の Office365 開発者パターンとプラクティスプロジェクトから Core.AppScriptPart サンプルアドインをダウンロードします。

Core.AppScriptPart アドインを使用する

コードサンプルを実行して、[シナリオの実行] を選択するとき:

[サイトに戻る] を選択します。
[ページ]>[編集]>[挿入]>[Web パーツ] を選択します。
[カテゴリ] で、[アドインスクリプトパート] を選択してから [ユーザープロファイル情報] を選択します。
[追加] を選択します。
[ユーザープロファイル情報] Web パーツの右上隅にあるドロップダウンで、[Web パーツの編集] を選択します。
[スニペットを編集] を選択します。
<SCRIPT> 要素を検討します。

src 属性は、リモート Web 上の JavaScript ファイルにリンクしていることに注意してください。 The <SCRIPT> element is set by the Content property in the Core.AppScriptPartWeb\userprofileinformation.webpart, as shown in the following example. The JavaScript file linked to by the src attribute is Core.AppScriptPartWeb\Scripts\userprofileinformation.js. Userprofileinformation.js reads the current user's profile information from the user profile service, and then displays this information in the Web Part.

注:

この記事で提供されるコードは、明示または黙示のいかなる種類の保証なしに現状のまま提供されるものであり、特定目的への適合性、商品性、権利侵害の不存在についての暗黙的な保証は一切ありません。

<property name="Content" type="string">&amp;lt;script type="text/javascript" src="https://localhost:44361/scripts/userprofileinformation.js"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;div id="UserProfileAboutMe"&amp;gt;&amp;lt;div&amp;gt;
</property>

[キャンセル] を選択します。
[保存] を選択します。

注:

ユーザープロファイル画像が表示されない場合は、OneDrive for Business サイトを開いて、ホスト Web に戻ります。

Core.AppScriptPartWeb\Pages\Default.aspx で、[シナリオの実行] は btnScenario_Click を実行し、その結果として以下が行われます。

[Web パーツギャラリー] フォルダーへの参照を取得します。
FileCreationInformation を使用して、プロバイダーホスト型アドインから [ Web パーツギャラリー] にアップロードする userprofileinformation.webpart ファイルを作成します。 フォルダー。Files.Add メソッドは、Web パーツギャラリーにファイルを追加します。
[Web パーツギャラリー] 内のすべてのリスト項目を取得して、userprofileinformation.webpart を検索します。
userprofileinformation.webpart が見つかると、Web パーツを [アドインスクリプトパーツ] という名前のカスタムグループに割り当てます。

protected void btnScenario_Click(object sender, EventArgs e)
        {
            var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
            using (var clientContext = spContext.CreateUserClientContextForSPHost())
            {
                var folder = clientContext.Web.Lists.GetByTitle("Web Part Gallery").RootFolder;
                clientContext.Load(folder);
                clientContext.ExecuteQuery();

                // Upload the "userprofileinformation.webpart" file.
                using (var stream = System.IO.File.OpenRead(
                                Server.MapPath("~/userprofileinformation.webpart")))
                {
                    FileCreationInformation fileInfo = new FileCreationInformation();
                    fileInfo.ContentStream = stream;
                    fileInfo.Overwrite = true;
                    fileInfo.Url = "userprofileinformation.webpart";
                    File file = folder.Files.Add(fileInfo);
                    clientContext.ExecuteQuery();
                }

                // Update the group that the Web Part belongs to. Start by getting all list items in the Web Part Gallery, and then find the Web Part that was just uploaded.
                var list = clientContext.Web.Lists.GetByTitle("Web Part Gallery");
                CamlQuery camlQuery = CamlQuery.CreateAllItemsQuery(100);
                Microsoft.SharePoint.Client.ListItemCollection items = list.GetItems(camlQuery);
                clientContext.Load(items);
                clientContext.ExecuteQuery();
                foreach (var item in items)
                {
                    // Create new group.
                    if (item["FileLeafRef"].ToString().ToLowerInvariant() == "userprofileinformation.webpart")
                    {
                        item["Group"] = "add-in Script Part";
                        item.Update();
                        clientContext.ExecuteQuery();
                    }
                }

                lblStatus.Text = string.Format("add-in script part has been added to Web Part Gallery. You can find 'User Profile Information' script part under 'App Script Part' group in the <a href='{0}'>host web</a>.", spContext.SPHostUrl.ToString());
            }
        }

次の方法で共有

SharePoint の Web パーツをアップロードする

はじめに

Core.AppScriptPart アドインを使用する

関連項目

その他のリソース