12 Sep 2011

Customize Menus, Ribbons, Controls, and Pages User Interface

Custom Actions

Custom actions are features that can extend or change the standard behaviour of any of the following items: menu items, link menus of administrative pages, and Ribbons.

  • CustomAction Creates a new custom action to define a new control on a Ribbon bar, a new menu item on a standard menu, or a new link on a settings page.
  • CustomActionGroup Creates a new group of custom actions for better usability from the perspective of the end user.
  • HideCustomAction Hides an existing custom action defined by another custom action or implemented by default in SharePoint.

 

<CustomAction
RequiredAdmin = "Delegated | Farm | Machine"
ControlAssembly = "Text"
ControlClass = "Text"
ControlSrc = "Text"
Description = "Text"
FeatureId = "Text"
GroupId = "Text"
Id = "Text"
ImageUrl = "Text"
Location = "Text"
RegistrationId = "Text"
RegistrationType = "Text"
RequireSiteAdministrator = "TRUE" | "FALSE"
Rights = "Text"
RootWebOnly = "TRUE" | "FALSE"
ScriptSrc = "Text"
ScriptBlock = "Text"
Sequence = "Integer"
ShowInLists = "TRUE" | "FALSE"
ShowInReadOnlyContentTypes = "TRUE" | "FALSE"
ShowInSealedContentTypes = "TRUE" | "FALSE"
Title = "Text"
UIVersion = "Integer">
<UrlAction />
<CommandUIExtension />
</CustomAction>

Attribute Name Description
ID Optional Text attribute that specifies the ID of the custom action.
Location Specifies the location of the custom action.

http://msdn.microsoft.com/en-us/library/bb802730.aspx

Most Useful Locations

DisplayFormToolbar  
EditControlBlock

per-item ECB
menu

EditFormToolbar  
Microsoft.SharePoint.SiteSettings On Various SiteSetting pages like:
Customization, Galleries, SiteAdministration, SiteCollectionAdmin, UsersAndPermissions
Microsoft.SharePoint.StandardMenu On Various Menus groups like:

ActionsMenu Actions menu in list and document
library views.
ActionsMenuForSurvey Site Actions menu for surveys.
NewMenu New menu in list and document
library views.
SettingsMenu Settings menu in list and document
library views.
SettingsMenuForSurvey Site Settings links for surveys.
SiteActions Site Actions menu.
UploadMenu Upload menu in document library
views.
ViewSelectorMenu View selection menu for changing views provided on the list editing
tab of the Ribbon.

NewFormToolbar  
ViewToolbar  
RegistrationId

ID of the target list, content
type, or file type associated with the custom action.

Example:

101 = Document Library

RegistrationType None, List, ContentType, ProgId, or FileType.
Title

Title will be
used in the user interface to present the action

UrlAction

This attribute can link to any kind of URL and can contain tokens that will be replaced
by the environment during page rendering


  • ~site Website (SPWeb) relative link.
  • ~sitecollection Site collection (SPSite) relative link.
  • {ItemId} Integer ID that represents the item within a list.
  • {ItemUrl} URL of the current item. This only works for documents in libraries.
  • {ListId} ID (GUID) of the list on which the action is currently working.
  • {SiteUrl} URL of the website (SPWeb).
  • {RecurrenceId} Recurrence index in when related to recurring event items.
Example:

<UrlAction Url="~site/_layouts/Dev.SP2010.UIExtensions/
DevLeapInvoiceChangeStatus.aspx?ItemId={ItemId}&amp;ListId={ListId}&amp;
Status=Archived" />

 

<CustomAction
Location="EditControlBlock"
RegistrationType="List"
RegistrationId="101"
Id="Dev.CustomActions.DemoECB.SampleAction"
Title="Sample Action"
ImageUrl="/_layouts/images/Dev.SP2010.UIExtensions/SampleIcon.gif"
Description="Sample custom action.">
<UrlAction Url="javascript:window.alert('Sample Action!');"/>
</CustomAction>

 

image

 

CustomActionGroup Element

Using this elements, you can define groups of actions

<CustomActionGroup
Description = "Text"
Id = "Text"
Location = "Text"
Sequence = "Integer"
Title = "Text">
</CustomActionGroup>

Example:

A CustomActionGroup element extending the Site Settings administrative page

 

<CustomActionGroup
Location="Microsoft.SharePoint.SiteSettings"
Id="DevLeap.CustomActions.Invoices.Settings"
Description="View Invoices Settings"
Title="New Group"
ImageUrl="/_layouts/images/Dev.SP2010.UIExtensions/DevLeap-Icon-48x48.png" />
<CustomAction
Location="Microsoft.SharePoint.SiteSettings"
GroupId="Dev.CustomActions.Invoices.Settings"
Id="Dev.CustomActions.Invoices.SampleSettings"
Title="Link 1"
Description="Go to a custom page for managing Invoices' settings.">
<UrlAction Url="~site/_layouts/Dev.SP2010.UIExtensions/InvoicesSettings.aspx" />
</CustomAction>

image

 

 

 

HideCustomAction Element

Using this element, you can hide existing actions

<HideCustomAction
GroupId = "Text"
HideActionId = "Text" <!-- specifies the ID of the action to hide. -->
Id = "Text"
Location = "Text">
</HideCustomAction>

Example:

Hide the Site Theme menu item in the Look And Feel group of the Site Settings page

 

<HideCustomAction
GroupId="Customization"
HideActionId="Theme"
Id="Dev.CustomActions.HideThemeFromSettings"
Location="Microsoft.SharePoint.SiteSettings"
/>

image

 

Server-Side Custom Actions

You can create custom actions that define their content dynamically by using serverside code, instead of using an XML declaration

 

<CustomAction
Location="Microsoft.SharePoint.StandardMenu"
GroupId="SiteActions"
ControlAssembly="Dev.SP2010.UIExtensions, Version=1.0.0.0, Culture=neutral, PublicKeyToken=3b722076bf78362f"
ControlClass="Dev.SP2010.UIExtensions.SwitchToMobileMode"
Id="Dev.CustomActions.SwitchToMobileMode">
</CustomAction>

 

public class SwitchToMobileMode : System.Web.UI.WebControls.WebControl
{
protected override void CreateChildControls()

{
SPWeb web = SPControl.GetContextWeb(HttpContext.Current);
MenuItemTemplate switchToMobile = new MenuItemTemplate();
switchToMobile.Text = "Switch to mobile mode";
switchToMobile.Description =
"Switches the current site rendering mode to mobile";
switchToMobile.ImageUrl = "/_layouts/images/Dev.SP2010.UIExtensions/Mobile32x32.png";
switchToMobile.ClientOnClickNavigateUrl = String.Format("{0}?Mobile=1", web.Url);
this.Controls.Add(switchToMobile);
}
}

Additionally, you can configure the ClientOnClickScript property to configure an ECMAScript

image

 

Ribbons

developer can define specific CustomAction elements to define his own Ribbon commands, groups, and tabs

 

Ribbon Command

They represent single items to place in a previously existing Ribbon tab and group

Example: A sample Ribbon that shows an alert upon clicking it.


<CustomAction
RegistrationType="ContentType"
RegistrationId="0x0101008D8333333333387B30061DC"
Id="DevLeap.CustomActions.Invoices.SampleRibbonCommand"
Location="CommandUI.Ribbon.ListView">
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children">
<Button Id="SampleRibbonCommand"
Alt="Shows an alert."
Description="Shows an alert, just to make an example."
Sequence="25"
Command="ShowSampleAlert"
Image16by16="/_layouts/images/DevLeap.SP2010.UIExtensions/Baloon_16x16.png"
Image32by32="/_layouts/images/DevLeap.SP2010.UIExtensions/Baloon_32x32.png"
LabelText="Show Alert"
TemplateAlias="o1" />
</CommandUIDefinition>
</CommandUIDefinitions>

<CommandUIHandlers>
<CommandUIHandler Command="ShowSampleAlert"
CommandAction="javascript:
window.alert('This an alert from the ribbon');" />
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>

 

image

 

Sequence : attribute has a value that is a multiple of 10. Thus, the first button has a Sequence of 10, the second has a Sequence of 20,and so on.

CommandUIDefinition: Supported children elements : http://msdn.microsoft.com/en-us/library/ff458373.aspx

Default Server Ribbon Customization Locations,”  is available on MSDN Online at http://msdn.microsoft.com/enus/library/ee537543.aspx

Environment Tokens

  • {ItemId} ID (GUID) taken from the list view
  • {ItemUrl} Web-relative URL of the list item (Url)
  • {RecurrenceId} ID of a recurrent item (RecurrenceID)
  • {SiteUrl} The fully qualified URL to the site (Url)
  • {ListId} ID (GUID) of the list (ID)
  • {ListUrlDir} Server-relative URL of the site plus the list’s folder
  • {Source} Fully qualified request URL
  • {SelectedListId} ID (GUID) of the list that is currently selected from a list view
  • {SelectedItemId} ID of the item that is currently selected from the list view

 

Define a new tab of Ribbons

By utilize the Tab, Scaling, Groups, and Group elements

 

image

 

Hierarchy of elements to create Tab, Groups and controls

<CustomAction>
  <CommandUIExtension>
     <CommandUIDefinitions>
        <CommandUIDefinition  Location="Ribbon.Tabs._children">
             <Tab>
                <Scaling>

                           <MaxSize>

                           <Scale>
                <Groups>
                       <Group>
                             <Controls>
                                      <Button>

       <CommandUIDefinition Location="Ribbon.Templates._children">             

              <GroupTemplate>

                       <Layout>

                             <Section>

                                      <Row>

                                

 

Delegate Controls

Allows to extend native pages and mainly master pages, without having to modify them directly

<SharePoint:DelegateControl />. This is a control that defines a placeholder, with a ControlId attribute, unique within the page or the master page that will be replaced during page rendering with a proper ASP.NET server control

Example : Search box at top

<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>

By default, this delegate control will be replaced by the native control defined by the class Microsoft.SharePoint.Portal.WebControls.SearchBoxEx, which is available in assembly Microsoft.Office.Server.Search.dll

 

Developer can define feature element that overrides the default delegate control for the SmallSearchInputBox

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Control Id="SmallSearchInputBox"
Sequence="10"
ControlAssembly="Dev.SP2010.UIExtensions, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=3b7c6eeee78362f"
ControlClass="Dev.SP2010.UIExtensions.CustomSmallSearchInputBox" />
</Elements>

 

A feature element overriding the default delegate control for the SmallSearchInputBox with a custom .ascx template control

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Control Id="SmallSearchInputBox"
Sequence="10"
ControlSrc="/_controltemplates/CustomSmallSearchInputBox.ascx" />
</Elements>

 

image

 

The Control element feature can target Farm, WebApplication, Site, or Web.

 

Main ControlId Values Available in SharePoint 2010


AdditionalPageHead

Defines additional headers for the page. AdditionalPageHead supports declaration of multiple delegate controls, which will be loaded inside the HTML header of the page. You can use it to provide custom
metatags, headers, and scripts in the master page of your site.

GlobalNavigation

Defines a control that will be rendered at the top of the page, if you are using the v4.master master page. It can be used to provide the site with a custom global navigation bar.


SmallSearchInputBox
Defines a custom small search box.


TopNavigationDataSource
Defines a custom data source for the Top Navigation Bar.


PublishingConsole
Defines a custom publishing console, which is the control that renders the page editing toolbar.

QuickLaunchDataSource
Defines a custom data source for the Quick Launch.

TreeViewAndDataSource
Defines a custom data source for the TreeView of the site.

 

Custom Contents as Feature

 

Images and Generic Content

By default, SharePoint stores images in the SharePoint14_Root\TEMPLATE\IMAGES folder and makes them available through a virtual directory named _layouts/images/.

 

SharePoint Mapped Folder

image

 

Application Pages

Physical folder : SharePoint14_Root\TEMPLATE\LAYOUTS

Virtual Path: _layouts

 

 

Content Pages, Web Part Pages, and Galleries

Deploy a custom page or a Web Part Page to a single target site, eventually supporting customization by the end user or by using Microsoft SharePoint Designer 2010.

<Module
HyperlinkBaseUrl = string
IncludeFolders = "Text"
List = "Integer"
Name = "Text"
Path = "Text"
RootWebOnly = "TRUE" | "FALSE"
SetupPath = "Text"
Url = "Text">

<File
DocumentTemplateForList = string
DoGUIDFixUp = "TRUE" | "FALSE"
IgnoreIfAlreadyExists = "TRUE" | "FALSE"
Level = Draft
Name = string
NavBarHome = "TRUE" | "FALSE"
Path = string
Type = "Ghostable" | "GhostableInLibrary"
Url = string>
<AllUsersWebPart />
<BinarySerializedWebPart />
<NavBarPage />
<Property />
<View />
<WebPartConnection />
</File>
</Module>

Example: A Module feature to deploy an image into the Site Assets library of a SharePoint site.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="SiteAssetsImage" Url="SiteAssets">
<File IgnoreIfAlreadyExists="True"
Path="SiteAssetsImage\SP2010-Developer-Reference.png"
Url="SP2010-Developer-Reference.png"
Type="GhostableInLibrary" />
</Module>
</Elements>

No comments:

Post a Comment