環境 : SharePoint Foundation 2010 (Beta 2), Visual Studio 2010 (Beta 2)
<<SharePoint 2010 開発 新機能>>
- 環境について
- LINQ を使ったデータアクセス
- ADO.NET Data Services を使用した SharePoint 2010 へのアクセス
- Visual Studio による Business Connectivity Services (BCS) の外部リスト (Externel List) 作成
- ダイアログフレームワーク、Client OM (JavaScript) を使った開発
- カスタムの SharePoint リボンの作成
- Visual Studio 2010 の拡張アドイン (Extensibility)
- カスタムの Workflow Service を使用した外部システム連携 (ローカルサービス)
- VSeWSS プロジェクトの移行 (Import VSeWSS)
- 【ご参考】SharePoint 2010 開発ガイド 日本語版
こんにちは。
今日は、説明だけで (デモを) 飛ばしてしまったリボンカスタマイズの話です。
前回 JavaScript を使用した SharePoint 開発について記載しましたが、端的に表現するなら、リボンはこれをカスタムアクションのフィーチャーとして作成するというだけです。
では、早速。。。
まず、Visual Studio 2010 で [空の SharePoint プロジェクト] を新規作成します。
ソリューションエクスプローラーでプロジェクトを右クリックし、[追加] – [新しい項目] で、[空の要素] を追加します。(下図)
作成された Elements.xml に以下 (囲み) の通り記述してみましょう。
ここでは、作成するリボンコントロールとしてカスタムのボタン (1つ) の定義をおこなっており、かいつまんで記載すると、以下を意味しています。
- RegistrationId=”101″
「ドキュメント ライブラリ」に対するアクションであることを指定しています。(例えば、ここが 100 の場合には「リスト」になります。)
ここでは、既存のドキュメント ライブラリーのリボンにボタンを追加するだけのサンプルですが、この RegistrationType、RegistrationId を使って、開発者が追加したカスタムのリスト定義や、カスタムのコンテンツ タイプだけに、独自のリボン (コマンド群) を表示することなどが可能です。 - Location=”Ribbon.Documents.New.Controls._children”
ドキュメントライブラリの一覧画面のリボンの [ドキュメント] タブの [新規] グループのコントロールとして追加します。(あとで、どこに追加されるか、図を掲載しておきましょう。。。)
なお、Location ID の一覧は、「MSDN : Default Server Ribbon Customization Locations」 に掲載されています。 - Command=”Demo_HelloWorld”
このボタンを押した際に、「Demo_HelloWorld」という Id のコマンドを実行します。このコマンドは、<CommandUIHandler> 要素の中に記述されているのがわかります。 - Image32by32、Image16by16
これらは、リボンに表示するアイコンで、それぞれ 32 px X 32 px のサイズ、16 px X 16 px のサイズのアイコンです (このイメージファイルは、このあと作成・配置をしていきます)。リボンというは、Office でも何でも同様ですが、ウィンドウのサイズを変えると表示方法が変化しますね。つまり、静的にキャンパス上にブラシなどで描画をしているのではなく、このように定義に基づいて記述し、描画方法の詳細は開発者が決めることではありません。 - TemplateAlias=”o1″
TemplateAlias は、実はレイアウトを考える際などに重要になりますが、とりあえずここでは、こういうものだと思っておきましょう。(あとで、TemplateAlias を使用したサンプルを例示してみます。)
<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Id="DemoButtonAction" RegistrationId="101" RegistrationType="List" Location="CommandUI.Ribbon" Sequence="20" title=''> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.Documents.New.Controls._children"> <Button Id="Ribbon.Documents.New.DemoButton" Sequence="20" Command="Demo_HelloWorld" Image32by32="/_layouts/images/ribbondemo/demobutton.png" Image16by16="/_layouts/images/ribbondemo/demobutton16.png" LabelText="This is test" TemplateAlias="o1" /> </CommandUIDefinition> </CommandUIDefinitions> <CommandUIHandlers> <CommandUIHandler Command="Demo_HelloWorld" CommandAction="javascript:alert('test');" /> </CommandUIHandlers> </CommandUIExtension> </CustomAction></Elements>つぎに、ここで使用している 16 X 16 の png ファイルと 32 X 32 の png ファイルを適当に作成し、このソリューションパッケージ (wsp) のインストールと共に SharePoint ルートフォルダ (SharePoint hive) 下の template\images\ribbondemo (%programfiles%\Microsoft Shared\Web Server Extensions\14\TEMPLATE\IMAGES\ribbondemo) にこれらの png ファイルを配置するようにします。
このため、ソリューションエクスプローラーでプロジェクトを右クリックして、[追加] – [SharePoint “イメージ” のマップされたフォルダー] を選択します。
作成された Images マップフォルダに、以下の通り ribbondemo のサブディレクトリを作成して、png ファイルを追加しましょう。
以上で開発は完了です。(簡単ですね。)
いつもの通り Visual Studio から配置 (Deploy) をおこないます。SharePoint サイトを表示して、共有ドキュメントなどのドキュメントライブラリを選択し、[ドキュメント] タブを選択してみましょう。すると、[新規] のグループに、以下の通り、カスタムのリボンのボタンが表示されているのがわかります。(これをクリックすると、言うまでもなく「test」という JavaScript のアラートダイアログが表示されます。)
さて、前回、SharePoint の JavaScript プログラミングを学んだので、もっと楽しい応用をしてみましょう。
上記の要素マニフェスト (.xml) で、コマンド (CommandAction) を以下の通り書き換えてみましょう (すべて 1 行で書いてます)。
ここで使用している {SiteUrl}、{ListId} などはトークンと呼ばれるもので、フィーチャーがこの箇所の文字列を書き換えてくれます。(使用可能なトークンは、「MSDN : CommandUIHandler Element」を参照してください。) これ、何を実施しているかわかりますか ? 前回の投稿を読んだ方はわかると思いますが、ダイアログ フレームワークを使用して、/_layouts/Upload.aspx (つまり、ドキュメントライブラリへアイテムを追加する際に使用されるフォーム) を表示しています。引数には、選択中のドキュメントライブラリの Id を渡しています。
(同様に、カスタムのアプリケーション ページを配置して、ダイアログ フレームワークで表示することもできます。)
. . . . . <CommandUIHandlers> <CommandUIHandler Command="Demo_HelloWorld" CommandAction="javascript:var options = { url: '{SiteUrl}/_layouts/Upload.aspx?List={ListId}&RootFolder=&Source={Source}', title: 'Upload Document', allowMaximize: false, showClose:false, width: 700, height: 450, dialogReturnValueCallback: testCallback }; SP.UI.ModalDialog.showModalDialog(options); function testCallback() { }" /> </CommandUIHandlers> </CommandUIExtension> </CustomAction></Elements>リボンのボタンを押すと、下図の通りドキュメントの登録画面がダイアログフレームワークで表示されて、ちゃんとアップロードしたドキュメントが、このドキュメントライブラリに登録されます。
ここではボタンのサンプルを示しましたが、例えば、以下のように記述すると、タブ自体もカスタムに作成することなどが可能です。
タブの場合には、下記の通り <GroupTemplate> 要素によってレイアウト (どの配置にするか) を決めることが可能で、前述した TemplateAlias を使って、どのコントロールが、どのレイアウトに対応するかを指定します。
<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Id="DemoTab" Location="CommandUI.Ribbon.ListView" RegistrationId="101" RegistrationType="List"> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.Tabs._children"> <Tab Id="Ribbon.DemoTab" title=''> <Scaling Id="Ribbon.DemoTab.Scaling"> <MaxSize Sequence="10" Id="Ribbon.DemoTab.Scaling.MaxSize" GroupId="Ribbon.DemoTab.Groups.Group" Size="OneMediumTwoLarge"/> <Scale Sequence="20" Id="Ribbon.DemoTab.Scaling.Scale" GroupId="Ribbon.DemoTab.Groups.Group" Size="OneMediumTwoLarge" /> </Scaling> <Groups Id="Ribbon.DemoTab.Groups"> <Group Id="Ribbon.DemoTab.Groups.Group" Description="This is a custom group!" title='' Sequence="10" Template="Ribbon.Templates.DemoGroupTemplate"> <Controls Id="Ribbon.DemoTab.Groups.Group.Controls"> <Button Id="Ribbon.DemoTab.Groups.Group.DemoButton1" Command="Demo_HelloWorld" Sequence="10" LabelText="Test1" TemplateAlias="textarea1"/> <Button Id="Ribbon.DemoTab.Groups.Group.DemoButton2" Command="Demo_HelloWorld" Sequence="20" LabelText="Test2" TemplateAlias="textarea2"/> <Button Id="Ribbon.DemoTab.Groups.Group.DemoButton3" Command="Demo_HelloWorld" Sequence="30" LabelText="Test3" Image16by16="/_layouts/images/ribbondemo/demobutton16.png" Image32by32="/_layouts/images/ribbondemo/demobutton.png" TemplateAlias="iconarea1"/> </Controls> </Group> </Groups> </Tab> </CommandUIDefinition> <CommandUIDefinition Location="Ribbon.Templates._children"> <GroupTemplate Id="Ribbon.Templates.DemoGroupTemplate"> <Layout title='' Layouttitle=''> <Section Alignment="Top" Type="TwoRow"> <Row> <ControlRef DisplayMode="Medium" TemplateAlias="textarea1" /> </Row> <Row> <ControlRef DisplayMode="Medium" TemplateAlias="textarea2" /> </Row> </Section> <Section Alignment="Top" Type="OneRow"> <Row> <ControlRef DisplayMode="Large" TemplateAlias="iconarea1" /> </Row> </Section> </Layout> </GroupTemplate> </CommandUIDefinition> </CommandUIDefinitions> <CommandUIHandlers> <CommandUIHandler Command="Demo_HelloWorld" CommandAction="javascript:alert('test');" /> </CommandUIHandlers> </CommandUIExtension> </CustomAction></Elements>
また、既定でいろいろなコマンド (Command) が登録されていると思いますので、こうした組み込みのコマンドを呼び出すことも可能でしょう。
SharePoint のリボンを使って、いろいろと遊んでみてください。
[補足] .js ファイルの使用
CustomAction 要素に ScriptSrc 属性を指定すると、.js ファイルを参照できます。このため、一連の処理を関数として .js ファイルにあらかじめ記述 (定義) しておいて、カスタム アクションからこの関数を呼び出すことができます。
<CustomAction Id=”Ribbon.Library.Actions.Scripts”
Location =”ScriptLink”
ScriptSrc=”~site/SiteAssets/Scripts/test.js” />
[補足] 状態に依存したリボンの有効化 (Enable) / 無効化 (Disable)
SharePoint 2010 のリボンでは、選択中のアイテムなど、状態に応じたコマンドの有効化 (Enable) / 無効化 (Disable) の切り替えや、表示されているコントロールや Web パーツなど、状況に応じた専用のタブ (Contextual Ribbon) の表示も可能です。(コマンドの有効化 / 無効化では <CommandUIHandler /> の EnabledScript 属性を使用し、Contextual Ribbon では、SPRibbon クラスの MakeTabAvailable メソッド、MakeContextualGroupInitiallyVisible メソッドなどを使用します。)
Categories: Uncategorized
tsmatz
12 replies»