Adding Custom Ribbon Tab To the SharePoint 2013 Server Ribbon

Introduction 

In this article we will explore to how to create a custom tab in SharePoint 2013 Custom Action Ribbon.

I wanted to create a Custom Action Tab in my SharePoint Hosted app. Consider that SharePoint 2013 already provides a home that may be suitable for your customization, for list pages at least; the Custom Commands tab. It only appears on list pages and contains just one lonely button under normal circumstances. This tab is actually the post-upgrade home for any SharePoint 2007 CustomActions you had, assuming you don't introduce changes during your upgrade process, any CustomActions that didn't target the ECB will end up here. In any case, it could help avoid tab proliferation so don't forget it when building your customizations.

Solutions

1. Add a ribbon custom action for the App project that you have created. Right click on the project [Add] [New Item] [Ribbon Custom Action] and enter the Name and click on the Add button. It will start the wizard for creating a custom action for the Ribbon control.
   
   
2. In this wizard select the host web where you want to expose the custom action. In other words your custom action will be available in that host web.
   
   The custom action scoped can be a List template or a List instance or None. In this example I am selecting List template and the item is the custom action scoped to be "Custom list".
   
   
3. Selected "Ribbon.ListItem.Actions". What this does is, it will show the custom action under the Items section of the List Ribbon control.
   
   
4. The following is the Custom Ribbon XML that I created for the Custom Tab. Refer to the Ribbon XML Schema for more options: Server Ribbon schema.
   
   1. <?xml version="1.0" encoding="utf-8"?>  
   2. <Elements xmlns="http://schemas.microsoft.com/sharepoint/">  
   3.   
   4.   <CustomAction Id="Team Collaborate"  
   5.                 RegistrationType="List"  
   6.                 RegistrationId="100"  
   7.                 Location="CommandUI.Ribbon"  
   8.                 Sequence="10001"  
   9.                 Title="Team Collaborate"  
   10.               >  
   11.     <CommandUIExtension>  
   12.       <CommandUIDefinitions>  
   13.         <CommandUIDefinition Location="Ribbon.Tabs._children">  
   14.           <Tab Id="Team Collaborate.Tab"  
   15.                 Title="Team Collaborate"  
   16.                 Description="Special Risk Tracking Functionality"  
   17.                 Sequence="550">  
   18.   
   19.             <Scaling Id="Team Collaborate.Tab.Scaling">  
   20.               <MaxSize Id="Team Collaborate.Tab.EnterpriseRiskGroup.MaxSize"  
   21.                         GroupId="Team Collaborate.Tab.EnterpriseRiskGroup"  
   22.                         Size="OneLarge"/>  
   23.               <Scale Id="Team Collaborate.Tab.EnterpriseRiskGroup.Scaling.CustomTabScaling"  
   24.                       GroupId="Team Collaborate.Tab.EnterpriseRiskGroup"  
   25.                       Size="OneLarge" />  
   26.             </Scaling>  
   27.             <Groups Id="Team Collaborate.Tab.Groups">  
   28.               <Group Id="Team Collaborate.Tab.EnterpriseRiskGroup"  
   29.                       Description="Functions that can be performed on Enterprise Risks"  
   30.                       Title="Sharepoint Consulting"  
   31.                       Sequence="10"  
   32.                       Template="Ribbon.Templates.OneLargeExample">  
   33.                 <Controls Id="Team Collaborate.Tab.EnterpriseRiskGroup.Controls">  
   34.                   <Button Id="Team Collaborate.Tab.EnterpriseRiskGroup.Notify"  
   35.                           Command="Team Collaborate.EnterpriseRisk"  
   36.                           Sequence="10"  
   37.                           Image16by16="_layouts/15/TeamCollaborate.png"  
   38.                           Image32by32="_layouts/15/TeamCollaborate.png"  
   39.                           Description="Selected Largest Team of Certified SharePoint developers."  
   40.                           LabelText="Expert Sharepoint"  
   41.                           TemplateAlias="cust1"/>  
   42.                 </Controls>  
   43.               </Group>  
   44.   
   45.             </Groups>  
   46.           </Tab>  
   47.         </CommandUIDefinition>  
   48.         <CommandUIDefinition Location="Ribbon.Templates._children">  
   49.           <GroupTemplate Id="Ribbon.Templates.OneLargeExample">  
   50.             <Layout Title="OneLarge" LayoutTitle="OneLarge">  
   51.               <Section Alignment="Top" Type="OneRow">  
   52.                 <Row>  
   53.                   <ControlRef DisplayMode="Large" TemplateAlias="cust1" />  
   54.   
   55.                 </Row>  
   56.               </Section>  
   57.             </Layout>  
   58.           </GroupTemplate>  
   59.         </CommandUIDefinition>  
   60.       </CommandUIDefinitions>  
   61.   
   62.       <CommandUIHandlers>  
   63.         <CommandUIHandler Command="Team Collaborate.EnterpriseRisk"  
   64.                         CommandAction="~remoteAppUrl/Pages/TeamCollaborate.aspx?{StandardTokens}&Source={Source}&ListURLDir={ListUrlDir}&list={ListId}&SelectedItems={SelectedItemId}" />  
   65.   
   66.       </CommandUIHandlers>  
   67.   
   68.     </CommandUIExtension>  
   69.   
   70.   </CustomAction>  
   71. </Elements>  
5. Build and publish App and add into the apps in the Testing Library and deploy; Trust it.
   
   
   
   
   
   
   
   The following shows the final output Custom Ribbon Tab:
   
   

SummaryThe ribbon is a key building block for SharePoint 2013 solutions and if you see a ribbon tab for a Custom List on the Ribbon Control Bar then it can be customized.

Custom Ribbon Action and Set the Customize Icon to Ribbon Button in a SharePoint Hosted App

Introduction 
In this article you will learn how to set the Customize Icon to Ribbon Button in a SharePoint Hosted App.

This article explains the Custom Ribbon Action to set the Custom Image to a Ribbon button and that is absolutely awesome! I was creating a Custom Action in my SharePoint Hosted app. I wanted to add a Button into the Ribbon of any Custom List to my App Web and do some work based on List Information. I started by adding a Custom Ribbon Action.







You can see the following code snippet of elements.xml of the Custom Ribbon Action that will be generated for you based on your settings selected in the wizard.



Have a look at the highlighted code in the previous block. You will notice that the icon of the button is a placeholder you have the ability to change. The next screenshot shows the button with the placeholder icon:



Solution:
A better workaround is to use Data URIs that is a way of embedding the actual image data in the src attribute of the img tag. The only limitation is browser support for example.

The code after applying this workaround will be like this:



The following is the final output of the Customize Icon to Ribbon button.



Note: There are many image data URI generators online like this one.

SharePoint: Customization Evolution

Introduction

In this article we explore SharePoint’s customization evolution from SharePoint 2007 popularly known as MOSS to SharePoint 2010 and then towards the current version in use, SharePoint 2013.

In all the versions there are various architecture-level upgrades highlighted in this article.





Full trust solutionsYou're missing control, since we basically grant full access rights for the code across our application and in servers. In previous versions you could have limited provide access, but that was difficult to do and was not used that often. In general deployment always causes a service break on the servers, since there's really no way to update the server without at least recycling the application pool. 

SandboxOur customization story basically grew up a little bit or from an administrative perspective when we gained some control. This was introduced in 2010 but was too strict from the server-side API level that developers have been used to use and client-side APIs were also so limited that even though you could have implemented some.

App modelThe Model is growing up with key objectives being on control, trust and management.

SharePoint Application Evolution:

• 2007: Everything is an application
  
  
  • Push to embrace SharePoint for LOB applications
  • Experience was to write custom server-side code
• 2010: Choose the right application
  
  
  • SharePoint and Developer Tools come together
  • Silverlight, CSOM and other new capabilities
  • Partially trusted code reduces impact and risk to the Farm
• 2013: Redefine application as app
  
  
  • Client-side experience via HTML or iFrame
  • Leverage CSOM and REST APIs from Azure and other clients
  • Investments in app discovery and management via SharePoint store

SharePoint 2013: Where is the Recycle Bin?

Introduction
This article explains the two-stage recycle bin in SharePoint.

Looking for the Recycle Bin in SharePoint 2013? You won't find it in its previous location (Quick Launch with the All Site Contents).

In a SharePoint site, the Recycle Bin provides temporary storage for all items deleted from that site. The Recycle Bin can be accessed from the following the Quick Launch Bar on the left of the screen. SharePoint offers a two-stage Recycle Bin so items that are deleted from the end user Recycle Bin may still be recoverable from the site collection Recycle Bin by a site collection administrator.

First StageThe Recycle Bin is accessed. On the SharePoint site, click Site Settings and select “Site Contents”. The link is then available from the “Site Contents” page. Alternatively, this can be accessed by adding “/_layouts/15/Recyclebin.aspx” or “/_layouts/15/viewlsts.aspx” to the end of your site's root URL.





Second Stage
The Second Stage Recycle Bin is available to site collection administrators only and can be access from “Site Actions” > “Site Settings”. Alternatively, this can be accessed by adding “/_layouts/15/AdminRecyclebin.aspx” to the end of your site's root URL items.

Go to the Site Collection Recycle Bin:



As a site collection administrator, I go to Site Actions (or the gear) Site Settings in order to get to the Site Collection Recycle Bin link. Click the Site Collection Recycle Bin link as in the following:



When I click on the Recycle Bin link in the Site Collection Administration section of the Site Settings page I am taken to the Site Collection Recycle Bin page. Go to the Site Collection Recycle Bin as in the following:



From here I can see all the items that have been deleted and are sitting in the first stage or end user Recycle Bins, as well as those that have been deleted from those locations and are now sitting in the second stage Recycle Bin. I click the link "Deleted from end user Recycle Bin".