Ajouter un ruban par programmation

Introduction

Je vous présente, dans cet article, comment on peut ajouter un ruban de SharePoint par programmation : dans un WebPart, dans un Contrôle ascx ou bien une page d’application. Afin d’avoir finalement le résultat de la figure 1.
ribbon

Figure 1

1. ruban avec deux boutons
2. deux checkbox  qui permet d’activer/désactiver les boutons de ruban.

Création des fichier

On va créer deux fichier:
« RibbonPage.aspx » : page d’application sous le dossier mappé ‘Layouts/Blog.Ribbon
« PageComponent.js » script js sous le même dossier

Code Behind de RibbonPage

private void CreateRibbon()
 {
uint lang = SPContext.Current.Web.Language;
#region MainTab
//code xml de ruban
string mainTab = @"<Tab Id='Ribbon.Test'
 Title='Test'
 Description='Tab Test'
 Sequence='500'>
<Scaling Id='Ribbon.Test.Scaling'>
<MaxSize Id='Ribbon.Test.group1.MaxSize'
 GroupId='Ribbon.Test.group1'
 Size='OneLargeTwoMedium'/>
 <Scale Id='Ribbon.Test.group1.Scaling'
 GroupId='Ribbon.Test.group1'
 Size='OneLargeTwoMedium' />
 </Scaling>
 <Groups Id='Ribbon.Test.groups'>
 <Group Id='Ribbon.Test.group1'
 Description='group 1 description'
 Title='group 1'
 Sequence='52'
 Template='Ribbon.Templates.groups'>
 <Controls Id='Ribbon.Test.group1.Controls'>
 <Button Id='Ribbon.Test.group1.cmd1'
 Description='Button 1'
 Command='cmd1'
 Image32by32='/_layouts/images/actionseditpage.png'
 LabelText='Button 1'
 TemplateAlias='btn1'/>
 <Button Id='Ribbon.Test.group1.cmd2'
 Description='Button 2'
 Command='cmd2'
 Image32by32='/_layouts/images/allcontent32.png'
 LabelText='Button 2'
 TemplateAlias='btn2'/>
</Controls>
 </Group>
</Groups>
 </Tab>";

 #endregion MainTab
#region contextualTabTemplate
string contextualTabTemplate = @"<GroupTemplate Id='Ribbon.Templates.groups'>
 <Layout Title='OneLargeTwoMedium' LayoutTitle='OneLargeTwoMedium'>
 <Section Alignment='Top' Type='OneRow'>
 <Row>
 <ControlRef DisplayMode='Large' TemplateAlias='btn1' />
 <ControlRef DisplayMode='Large' TemplateAlias='btn2' />

 </Row>
 </Section>
 </Layout>
 </GroupTemplate>";
#endregion contextualTabTemplate
#region Add Ribbon tab
 // Récupérer le ruban de lapge
 Microsoft.Web.CommandUI.Ribbon ribbon = SPRibbon.GetCurrent(this.Page);
//charger notre chaine dans une classe XMLDocument
 XmlDocument ribbonExtensions = new XmlDocument();
//Injecter notre tab dans le ruban
 ribbonExtensions.LoadXml(mainTab);
 ribbon.RegisterDataExtension(ribbonExtensions.FirstChild, "Ribbon.Tabs._children");
ribbonExtensions.LoadXml(contextualTabTemplate);
 ribbon.RegisterDataExtension(ribbonExtensions.FirstChild, "Ribbon.Templates._children");
ribbon.Minimized = false;
 ribbon.CommandUIVisible = true;
//id de ruban
 const string initialTabId = "Ribbon.Test";
 if (!ribbon.IsTabAvailable(initialTabId))
 ribbon.MakeTabAvailable(initialTabId);
 ribbon.InitialTabId = initialTabId;
 #endregion
#region Events
var commands = new List<IRibbonCommand>();
// Enregistrement des commandes
//définir les actions de chaque bouton
commands.Add(new SPRibbonCommand("cmd1", "Bt1Cmd()", "BT1Enabled()"));
 commands.Add(new SPRibbonCommand("cmd2", "Bt2Cmd()", "BT2Enabled()"));

 //Register initialize function par le script Manager
 SPRibbonScriptManager manager = new SPRibbonScriptManager();
 MethodInfo methodInfo = typeof(SPRibbonScriptManager).GetMethod("RegisterInitializeFunction", BindingFlags.Instance | BindingFlags.NonPublic);

 methodInfo.Invoke(manager,
 new object[] { Page,
 "InitPageComponent",
 "/_layouts/Blog.Ribbon/PageComponent.js", //chemin d’accès au fichier compenent
 false,
 "RibbonCustomization.PageComponent.initialize()"
 }
 );
// Register ribbon scripts
 manager.RegisterGetCommandsFunction(Page, "getGlobalCommands", commands);
 manager.RegisterCommandEnabledFunction(Page, "commandEnabled", commands);
 manager.RegisterHandleCommandFunction(Page, "handleCommand", commands);
#endregion
}

Et voila nous avons terminer l’implémentation de méthode qui permet d’injecter le ruban. cette méthode doit être appeler dans le cors de méthode Load de votre classe page.

fichier  PageComponent.js

function ULS_SP() {
 if (ULS_SP.caller) {
 ULS_SP.caller.ULSTeamName = "Windows SharePoint Services 4";
 ULS_SP.caller.ULSFileName = "/_layouts/Blog.Ribbon/PageComponent.js";//accès vers le fichier
 }
}
Type.registerNamespace('RibbonCustomization');
// RibbonApp Page Component
RibbonCustomization.PageComponent = function () {
 ULS_SP();
 RibbonCustomization.PageComponent.initializeBase(this);
}
RibbonCustomization.PageComponent.initialize = function () {
 ULS_SP();
 ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null, RibbonCustomization.PageComponent.initializePageComponent), 'SP.Ribbon.js');
}
RibbonCustomization.PageComponent.initializePageComponent = function () {
 ULS_SP();
var ribbonPageManager = SP.Ribbon.PageManager.get_instance();
if (null !== ribbonPageManager) {
 ribbonPageManager.addPageComponent(RibbonCustomization.PageComponent.instance);
 ribbonPageManager.get_focusManager().requestFocusForComponent(RibbonCustomization.PageComponent.instance);
 }
}
RibbonCustomization.PageComponent.refreshRibbonStatus = function () {
 SP.Ribbon.PageManager.get_instance().get_commandDispatcher().executeCommand(Commands.CommandIds.ApplicationStateChanged, null);
}
RibbonCustomization.PageComponent.prototype =
{
 getFocusedCommands: function () {
 ULS_SP();
 return [];
 },
getGlobalCommands: function () {
 ULS_SP();
 return getGlobalCommands();
 },
isFocusable: function () {
 ULS_SP();
 return true;
 },
receiveFocus: function () {
 ULS_SP();
 return true;
 },
yieldFocus: function () {
 ULS_SP();
 return true;
 },
canHandleCommand: function (commandId) {
 ULS_SP();
 return commandEnabled(commandId);
 },
handleCommand: function (commandId, properties, sequence) {
 ULS_SP();
 return handleCommand(commandId, properties, sequence);
 }
}
RibbonCustomization.PageComponent.registerClass('RibbonCustomization.PageComponent', CUI.Page.PageComponent);
RibbonCustomization.PageComponent.instance = new RibbonCustomization.PageComponent();

NotifyScriptLoadedAndExecuteWaitingJobs("/_layouts/Blog.Ribbon/PageComponent.js");

veuillez copier et coller ce fichier javascript.. Il suffit de garder le même name space ‘RibbonCustomization’ définit dans les deux fichiers.
Code RibbonPage.aspx

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript">

 var bt1EnabledValue = false;
 var bt2EnabledValue = false;

//définit dans le command, permet de activer/désactiver le bouton1
 function BT1Enabled() {
return bt1EnabledValue;
 }

//action de click
function Bt1Cmd() {
 alert('command 1');
 }
function BT2Enabled() {
return bt2EnabledValue;
 }
function Bt2Cmd() {
 alert('command 2');
 }
function changeBT1() {
 bt1EnabledValue = document.getElementById('Checkbox1').checked;

//refresh de ruban de appeler les commande activation/désactivation
 RefreshCommandUI();
 }
function changeBT2() {
 bt2EnabledValue = document.getElementById('Checkbox2').checked;
 RefreshCommandUI();
 }
</script>
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

 Button 1 <input id="Checkbox1" type="checkbox" onchange="changeBT1()" /><br />
 Button 2 <input id="Checkbox2" type="checkbox" onchange="changeBT2()" />
</asp:Content>
Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s