株式会社イルミネート・ジャパン 株式会社イルミネート・ジャパン

  • トレーニング
    • コース スケジュール
    • 受講要項/お支払い方法について
    • 研修会場へのアクセス
    • オンラインコース ご受講ガイド
  • 研修 コース一覧
    • Power Platform
    • SharePoint
    • Microsoft 365
    • コース検索
  • コンサルティング・技術サポート
  • コンテンツ開発
  • 会社概要
    • ニュース
    • 技術者一覧
    • 書籍一覧
    • アクセス
  • ブログ
  • お問い合わせ
    • よくあるご質問
  • ホーム »
  • ブログ »
  • SharePoint »
  • SharePoint Designer でリボン内にメニュー作成 – 他のサイトにお知らせコピー

SharePoint

SharePoint Designer でリボン内にメニュー作成 – 他のサイトにお知らせコピー

  • 2014.12.25

こんばんは、奥田です。昨日の投稿で SharePoint Designer を利用したカスタム アクション作成 (ワークフロー起動ボタン) をご紹介しました。今日はカスタム アクション作成 JS 書ける人向けバージョンです。

SharePoint Designer でカスタム アクションを作成する場合、独自で作成したボタンクリック時の操作として、URL も指定できます。ここで JavaScript を指定することでボタンクリック時にさまざまな操作を組み込めます。

SharePoint はサイト内のほとんどの操作が JavaScript で操作できる API が用意されているため、標準機能だとすこし手が届かないような機能を、カスタム アクションと JavaScript を組み合わせてカスタマイズしてみます。

たとえば、下記は別のサイトにお知らせ データをコピーする例です。

javascript:var context=SP.ClientContext.get_current();var clientContext=new SP.ClientContext(‘別サイトURL’);var web=context.get_web();context.load(web);var source=web.get_lists().getByTitle(‘お知らせリスト名’);var oList = clientContext.get_web().get_lists().getByTitle(‘書き込み先サイトのお知らせリスト名’);clientContext.load(oList);var currentItem = source.getItemById({SelectedItemId});context.load(currentItem);context.executeQueryAsync(Function.createDelegate(this,copyItem),Function.createDelegate(this,error));function copyItem(sender, args){var itemCreateInfo = new SP.ListItemCreationInformation();var oListItem = oList.addItem(itemCreateInfo);oListItem.set_item(‘Title’, currentItem.get_item(‘Title’));oListItem.update();oList.update();clientContext.executeQueryAsync(Function.createDelegate(this,copyCompleted),Function.createDelegate(this,error));}function error(sender, args){alert(args.get_message());}function copyCompleted(sender, args){alert(‘コピーしました!’);}

組み込み方は次のとおりです。

    1. SharePoint Designer 2013 で対象のサイトを開きます。
    2. [サイト オブジェクト] より [リストとライブラリ] をクリックします。
    3. リストとライブラリの一覧が表示されます。対象のリストもしくはライブラリをクリックします。
    4. リボンより、[ユーザー設定のアクション] – [リボンの表示] をクリックします。
    5. [ユーザー設定のアクションの作成] ダイアログ ボックスが表示されます。
      次の設定を行い [OK] をクリックします。
      ● 名前:任意のメニュー名
      ● アクションの種類:[URLへの移動] を選択し、上記スクリプトを改行やスペースなしで挿入
      ● ボタンイメージのURL:メニューに表示したい画像ファイルのパスを指定

CAAnoリスト ビュー Web パーツを利用してお知らせ新着データをトップページに表示することは、SharePoint 基本としてよく利用する機能ですが、リストビュー Web パーツは同じサイト内でのみという仕様制限があるため、他のサイトにお知らせデータを一覧表示したい場合、クエリ結果 Web パーツを利用するとかコンテンツ検索 Web パーツを利用するなど、少し設定の難易度が上がります。クエリ結果 Web パーツやコンテンツ検索 Web パーツを利用しても、リスト ビュー Web パーツのように、表形式での一覧表示は標準でできないので、なかなか悩ましいですよね。

いっそ、お知らせを表示させたい他サイト内のお知らせ リストに、お知らせデータを表示したいものだけ、このボタンをクリックしてデータをコピーさせてしまえ!そしてリストビュー Web パーツで表示したい! というカスタマイズ例です。
(以前勉強会かなにかでしゃべった内容を記事にしました)

SharePoint 2013 で利用できる JavaScript API は下記が参考になります。http://msdn.microsoft.com/ja-jp/library/office/jj163201(v=office.15).aspx

SharePoint Server 関連コース

  • CI635-H SharePoint Server サイト構築

    SharePoint Server のサイト管理やサイト構築を行う方を対象に、サイト構築や運用管理に必要となる基本スキルやサイト構築方法を習得いただけるコースです。これから SharePoint の管理を行う IT 管理者の方や、サイト管理やサイト構築を行う担当者の方に最適です。Subscription Edition に対応しており、アップデートによる新しい機能やこれまでとの差異も含めて解説!

JavaScript SharePoint Designer SharePoint 2013 SharePoint 2016 クライアントAPI

  • SharePoint Designer でリボン内にメニュー作成 – ワークフロー起動
  • SharePoint Designer でカスタム アクション作成するときのリボン内の場所

最新記事

  • マネージドID で完全自動化!Azure Automation × Graph API で SharePoint レポートを定期取得する

  • デバイスコードフローから マネージドID へ!Azure Automation で Graph API を動かすための環境構築

  • デバイスコードフロー × Graph API でクイック取得!管理センターでは出せない SharePoint サイト URL 付きレポートの出力

  • 「できるPower BI データ集計・分析・可視化ノウハウが身に付く本 改訂版」発売

  • M365 Copilot Chat の履歴を一括削除

カテゴリ一覧

  • Power Apps
  • Power Automate
  • Power BI
  • Copilot Studio
  • SharePoint
  • SharePoint Framework
  • Teams
  • Dataverse for Teams
  • Microsoft 365
  • アナウンス
  • 未分類

お問い合わせ

イルミネート・ジャパンが提供するトレーニングやサービスに関するご相談など、
お気軽にご連絡ください。

担当者に相談する
    • ホーム »
    • ブログ »
    • SharePoint »
    • SharePoint Designer でリボン内にメニュー作成 – 他のサイトにお知らせコピー
  • トレーニング
  • コンサルティング・技術サポート
  • コンテンツ開発
  • 会社概要
  • ブログ
  • 個人情報保護方針
  • 個人情報の取り扱いについて
  • 情報セキュリティ基本方針
  • お問い合わせ
  • よくあるご質問

株式会社イルミネート・ジャパン

〒105-0001
東京都港区虎ノ門 3-18-16 虎ノ門菅井ビル 3F
TEL : 03-5777-9977
Mail : training@illuminate-j.jp

  • 会社概要
  • プライバシーポリシー
  • サイトマップ
Copyright ©2026 Illuminate Japan Inc. All Rights Reserved.

イルミネート 研修サポートデスク