SharePoint Study Notes-ribbon series-8. create (or hide) ribbon tabs on the site

SharePoint 2010 introduces the ribbon feature of Office in terms of appearance and operation. As a Sharepoint developer, it is essential to master ribbon development. Ribbon in SharePoint 2010 can be customized by using XML and JavaScript. XML defines the controls (and appearances) in ribbon, and JavaScript scripts implement the ribbon function. In SharePoint Foundation, there is a specialized ecmascript (JavaScript, JScript) object model, ribbon implements corresponding functions through foreground scripts based on these object models.
First, we can create a ribbontabs on the specified site (you can regard ribbontabs as a large container, it will be loaded with various functional controls ).

The procedure is as follows.
1. Create a Sharepoint 2010 empty project and add an empty element to the Project

XML of this elementCodeAs follows:

<? XML version = "1.0" encoding = "UTF-8" ?>
< Elements Xmlns = "Http://schemas.microsoft.com/sharepoint" >
< Customaction
ID = "Spriboontest. ribbonbutton"
Location = "Commandui. Ribbon" >
< Commanduiextension >
< Commanduidefinitions >
< Commanduidefinition
Location = "Ribbon. Tabs. _ Children" >
< Tab
ID = "Spriboontest. ribbon. hellotab"
Title = "Custom tab" >
< Scaling ID = "Ribbon. Read. Scaling" >
</ Scaling >
< Groups ID = "Ribbon. Read. Groups" >
</ Groups >
</ Tab >
</ Commanduidefinition >
</ Commanduidefinitions >
</ Commanduiextension >
</ Customaction >
</ Elements >

Code Description
 <Customaction/>:Defines user interface extensions, such as buttons on the toolbar or links on the website settings page. You can use the customaction element to add standard ASP. NET controls and user controls (such as text boxes or option buttons) in the toolbar as custom operations ).

However, you can only add controls used to instantiate menu items to the drop-down menu of the toolbar, and cannot add Web components or any controls. For more information, see the customaction element.
 Location:Specify the location of the custom operation. If the customaction element contains a commanduiextension subelement, the location must start with "commandui. Ribbon" (for example ).

The locations and groupids of SharePoint 2010 are divided into four categories:

1-menu Custom Action locations and group IDs

2-page Custom Action locations and group IDs

3-Central Administration Custom Action locations and group IDs
4-server ribbon Custom Action locations and group IDs

The list of default custom operation locations for ribbon (class 4th) is as follows:

Server ribbon Custom Action locations and group IDs

Location	Custom Action Group IDs	Default m Action IDS	Group description)
Commandui. ribbon. listview	Not applicable	SeeDefault Server ribbon customization locations	LocationCorresponds to the List View.
Commandui. ribbon. newform	Not applicable	SeeDefault Server ribbon customization locations	LocationCorresponds to the new form for the list.
commandui. ribbon. editform	not applicable	See default server ribbon customization locations	location corresponds to the edit form for the list.
commandui. ribbon. displayform	not applicable	See default server ribbon customization locations	location corresponds to the display form for the list.
Commandui. Ribbon	Not applicable	SeeDefault Server ribbon customization locations	LocationCorresponds to the List View and edit, new, and display forms for the list.

 

<Commanduiextension>:Contains elements used to expand the user interface.
<Commanduidefinitions>:This node defines the location of the ribbon and the controls in the ribbon to implement the ribbon function. The ribbon and its functions are associated through the command attribute,

Of course, the ribbon function is not involved here. We just create ribbontabs. We will talk about how to implement the ribbon function later.
<Tab>: Tab controls. main attributes include
Command Optional. The ID of the command to be executed when you click the tab.
Cssclass Optional. The name of the CSS class (for example, "Ms-browsetab") to be applied when the tab is rendered.
Description Optional. Tab description.
ID Required. The control string, for example, "ribbon. customtabexample ".
Sequence Optional. An integer used to specify the order of placement among other tab controls.
Title Optional. The title displayed on the tab.
This control has two word elements
<Scaling>: Defines tab scaling. Its property ID is a string that identifies an element. For example, "ribbon. Documents. Scaling" is a required value.
<Groups>: Define a group of controls on the tab. Its property ID is also a string that identifies elements, such as "ribbon. docliblistform. Edit. groups", which is also required.

Here we mainly create ribbontabs, And we will add the required controls to the groups tab to implement the functions assigned by this tabs.

2. The next step is to present the ribbontab on our site.

In the first step, we define the appearance of the ribbontab, but how can we make it appear on our site. You can insert your user control in the header or footer of your masterpage to implement the following code:

Microsoft. Sharepoint. webcontrols. spribbon. getcurrent ( This . Page). maketabavailable ( " Myproject. ribbon. hellotab " );

As an example, I created a button in the searchbox position of masterpage to add the above Code through this button event.

First, create a custom control and let it replace the default searbox of masterpage.

 

 

We can use the following code to determine whether the ribbontab is available:

Microsoft. Sharepoint. webcontrols. spribbon. getcurrent ( This . Page). istabavailable ( " Spriboontest. ribbon. hellotab " );

It should be noted that the above judgment code is only valid for each webpage loading, that is, it needs to be placed in the pageload event for judgment.

Use the following code in the Click Event of the Custom button to make ribbon valid

Protected Void Btnenableribbon_click ( Object Sender, eventargs E)
{
Microsoft. Sharepoint. webcontrols. spribbon. getcurrent ( This . Page). maketabavailable ( " Spriboontest. ribbon. hellotab " );
// Microsoft. Sharepoint. webcontrols. spribbon. getcurrent (this. Page). commanduivisible = false;

}

Of course, you can also use the following code to hide ribbontabs:

Microsoft. Sharepoint. webcontrols. spribbon. getcurrent ( This . Page). commanduivisible = False ;

Build this project and deploy it on your site. Open the website and you can see

 

When you click the button at searchbox, the following results are displayed: