So-net無料ブログ作成

Provider hosted SharePoint Add-in - 3 [SharePoint]

単純にプロバイダー ホスト型の SharePoint アドインを構築すると独自の書式を持ってしまうため、統一感のない画面になってしまう。今回は、アドインの書式を SharePoint に合わせる方法。

今回の元記事はコレ。 ただし、オリジナルは Web フォームを使用しているので、MVC のプロジェクトで同様のことができるように変更している。

  1.  MicrosoftAjax
    [ツール] - [NuGet パッケージマネージャ] - [ソリューションの NuGet パッケージの管理] を実行し、MicrosoftAjax を Web アプリケーションプロジェクトに追加する。
  2. ChromeLoader
    左記の元記事にある ChromeLoader.js をファイルとして保存し Web アプリケーション プロジェクトに追加する。ここでは、Scripts フォルダに配置しています。
    参考
    こちらに英語版の記事のアーカイブが公開されているようです。当該ファイルをダウンロードして利用できます。
    • 26 行目付近で、appIconUrl の設定を行っているのですが、単純なファイル名("siteicon.png")ではなく絶対パス表記("/siteicon.png")に変更した方がよさそうですね。
  3. _layouts.cshtml
    以下のように書き換えます。ハイライトが修正箇所、取り消し線は削除します。
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script type="text/javascript" src="~/Scripts/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/ChromeLoader.js"></script>
    </head>
    <body>
    <div id="chrome_ctrl_placeholder"></div>
    :

    :
    </body>
    </html>
  4. アイコン
    Web アプリケーション プロジェクトのルートにサイトのアイコンをsiteicon.png という名称で配置します。
  5. 実行
    20160922-1.png
    サイトのデザインを変更すると、、、適用される。
    20160922-2.png

ASP.NET MVC のサンプルコードにあったスタイルシートを外してしまっているので、書式が崩れてしまっているのだけれど、代わりに SharePoint の書式が適用されている。なお、この段階では Account Settings、Contact us および Help のリンクは機能しませんので注意。

ちなみに、アドイン プロジェクトの AppManifest.xml のクエリ文字列に、&SPHostTitle={HostTitle} を追加してやると、ウィンドウ左上にある Back to Site となっているところがサイト名に変化するようになります。

 


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。