Zoom In Sharepoint: March 2012

Mar 22, 2012

Customization Ribbon – Opening a sharepoint modal pop window from Ribbon control - Part 4

Objective : In the earlier posts we have already explained , how to add a custom control in the Ribbon of a sharepoint list or document library. We have also explained about the CommandUIHandlers tag and its working. So whatever custom action you want to perform when user selects any item from the Flyout anchor or when user clicks on button can be defined in the CommandUIHandlers tag.

Please read Part 1 – Part 3 for basics of Ribbon customization.

Now we have a standard flyout anchor menu and on selection of any item, we want to open a sharepoint dialog view which in turns hosts an .aspx page. This “.aspx” page is deployed in the layouts folder of the file system.

Note : Important point to remember is that application pages will be supported only by Farm Solutions and not the SandBox solution. So when you are adding application pages always create FarmSolution

Steps :

1) Create Empty sharepoint solution (Farm Solution)

2) Add Feature in it (FlyoutAnchorElementFeature

3) Add Empty element file and name it FlyoutAnchorManifest

4) Add Mapped Layout folder and add an application Page (DemoPage.aspx)

Solution structure will look like this.

Inside DemoPage.aspx , copy the below code snippet inside “PlaceHolderMain” placeholder.

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

<table>

<tr>

<td>

<asp:Label ID="lblHeaderName" runat="server" Text="Welcome to world of Microsoft technologies..."></asp:Label>

</td>

</tr>

</table>

</asp:Content>

This can be customized as per the requirement.

Now paste the below mentioned code in your element file.

<?xml version="1.0" encoding="utf-8"?>

<CommandUIDefinition

Location="Ribbon.Library.Share.Controls._children">

<FlyoutAnchor

Id="Ribbon.Library.Share.FlyoutAnchor"

Sequence="20"

LabelText="Profiles"

Image32by32="_layouts/1033/images/formatmap32x32.png"

TemplateAlias="o1">

<Button

Id="Ribbon.Library.Share.FlyoutAnchor.Menu.MenuSection.MyButton1"

Sequence="0"

Command="AppleCommand"

LabelText="Apple Profile"

TemplateAlias="o1"/>

</Controls>

</MenuSection>

<Button Id="Ribbon.Library.FlyoutAnchor.Menu.MenuSection1.MyButton2"

Sequence="0" Command="MicrosoftCommand" LabelText="Microsoft Profile" TemplateAlias="o1" />

</Controls>

</MenuSection>

</Menu>

</FlyoutAnchor>

</CommandUIDefinition>

</CommandUIDefinitions>

<CommandUIHandler

Command="AppleCommand"

CommandAction="JavaScript:

var options = {

url: '/_Layouts/DemoSharePoint/DemoPage.aspx'};

SP.UI.ModalDialog.showModalDialog(options);"/>

<CommandUIHandler

Command="MicrosoftCommand"

CommandAction="JavaScript:

var options = {

url: '/_Layouts/DemoSharePoint/DemoPage.aspx'};

SP.UI.ModalDialog.showModalDialog(options);"/>

</CommandUIHandlers>

</CommandUIExtension>

</CustomAction>

</Elements>

In this important points to look for is

<CommandUIHandler

Command="AppleCommand"

CommandAction="JavaScript:

var options = {

url: '/_Layouts/DemoSharePoint/DemoPage.aspx'};

SP.UI.ModalDialog.showModalDialog(options);"/>

While opening the page, you can pass values through query string as well and for getting the current site context and current page details, you need to write ECMA script . Will explain more about the ECMA script in coming posts.

So this pop window will like this

As you can see in the URL section we have given the path of our demo page. So this will open the demo page as the pop up dialog window.

Your job is done J

Mar 20, 2012

Customization Ribbon – Adding a Flyout anchor in the Ribbon - Part 3

Please go through the Part -1 and Part -2 for understanding the basics of Ribbon architecture and adding a button in the Ribbon.

In this article we will add Flyout anchor in the Ribbon of a list.

Steps : For creating the solution structure please refer part -2 of the series where I have explained the steps needed to set up the solution and creating the feature.

<?xml version="1.0" encoding="utf-8"?>

<CommandUIDefinition

Location="Ribbon.Library.Share.Controls._children">

<FlyoutAnchor

Id="Ribbon.Library.Share.FlyoutAnchor"

Sequence="20"

LabelText="Notifications"

Image32by32="_Layouts/NotificationImages/Notification.png"

TemplateAlias="o1">

<Button

Id="Ribbon.Library.Share.FlyoutAnchor.Menu.MenuSection.MyButton"

Sequence="0"

Command="AppleProfileCommand"

LabelText="Apple Profile"

TemplateAlias="o1"/>

</Controls>

</MenuSection>

<Button Id="Ribbon.Library.FlyoutAnchor.Menu.MenuSection1.EditNotification″"

Sequence="0" Command="MicrosoftPageCommand" LabelText="Microsoft Profile" TemplateAlias="o1" />

</Controls>

</MenuSection>

</Menu>

</CommandUIDefinitions>

<CommandUIHandler

Command="AppleProfileCommand"

CommandAction="javascript:alert('Hello Steve jobs !!!');"

<CommandUIHandler

Command="MicrosoftPageCommand"

CommandAction="javascript:alert('Hello Bill Gates !!!');"

</CommandUIHandlers>

</CommandUIExtension>

</CustomAction>

</Elements>

On Deploying the solution – flyout anchor will appear like this in the document library.

And on click of any of the items, a javascript method will fire as we have defined in the CommandUIHandlerExtension tag. In this case a simple javascript method will be called.

Your Job is done J

Continue reading for further posts on Customizing Ribbon

Mar 16, 2012

Customizing Ribbon in Sharepoint 2010 – Add a button in the Ribbon - Part -2

Here we will add a button in the Ribbon section of a Generic list in Sharepoint 2010. If you want to go through the basics of Ribbon control architecture, please read Part -1.
Steps :
1) Create an empty sharepoint solution (DemoSol).
2) Add a feature “DemoRibbonControlFeature” .
3) Add an empty element in the project which will be the element manifest file for the feature created above.

Solution structure will look like this.

4) Open Elements.xml file and paste the below code.

<?xml version="1.0" encoding="utf-8"?>

<CustomAction

Id="AlertButton"

RegistrationType="List"

RegistrationId="101"

Location="CommandUI.Ribbon">

<CommandUIDefinition

Location="Ribbon.Documents.New.Controls._children">

<Button

Id="Ribbon.Documents.New.Controls.AlertButton"

Alt="Alert"

Sequence="10"

Image32by32="/_Layouts/AlertImages/Alert.png"

Command="AlertCommand"

LabelText="Alert"

TemplateAlias="o2"/>

</CommandUIDefinition>

</CommandUIDefinitions>

<CommandUIHandler

Command="AlertCommand"

CommandAction="javascript:alert('You have done it !!!');" />

</CommandUIHandlers>

</CommandUIExtension>

</CustomAction>

</Elements>

Now we will go through the tags used in the element xml :

CustomAction : This is element that tell sharepoint that we want to add custom element in sharepoint.

RegistrationType : This tells where the custom element should be visible. In this case it is List.

RegistrationId : Registration ID tells which type of list you want to target to displaying the custom element . In this case we have used “101” for document library.

DocumentLib – 101 ,AnnouncementList : 104 Etc…

Location : It tells that the custome element should go to the Ribbon control of the list

CommandUIExtension : It contains the actual controls and actions that are to be taken with our custom action.

CommandUIDefinitions : Contains the definition of the control

Location: Location tag inside the CommandUIDefinitions tells where exactly this control should appear inside Ribbon. For more information here is the MSDN link.

Command: This tells the button which action to call when it's clicked. Command Action will be specified in CommandUIHandler element. Command name should be same at both the places

TemplateAlias: Can specify the size and styling of the button.

Sequence: This tag decides in which order buttons show up in inside the group.

Will call the simple alert message to on click of button.

<CommandUIHandler

Command="AlertCommand"

CommandAction="javascript:alert('You have done it !!!');" />

</CommandUIHandlers>

Your job is done J

Continue Reading Part -3