SharePoint and Microsoft Azure Blog: August 2017

There are certain cases where we need to Customize SharePoint Ribbon. Customizing ribbon in SharePoint is easy. today we will see what we can do in Customizing Ribbon in SharePoint.

Ribbon customization consists of two component

1. a custom Action

2. Command UI Extension or ribbon xml

1. Creating Custom Action

Lets start by creating a ribbon custom action so start by creating an empty SharePoint project and add an empty element named customribbon. now we can write the custom action in elements.xml file of customribbon.

Here is how we write a custom action.

<CustomAction Id="TestRibbon" Location="CommandUI.Ribbon.ListView" RegistrationId="101" RegistrationType="List">

</CustomAction>

Location is where you want to insert the ribbon. here in my case ribbon will be inserted where ever is listview web part is present. below are some of locations

Location	Description
CommandUI.Ribbon	Add customization any where for registration id
CommandUI.Ribbon.ListView	Add customization when list view is rendered
CommandUI.Ribbon.EditForm	Add customization on the edit form of list
CommandUI.Ribbon.NewForm	Add customization on new form of list
CommandUI.Ribbon.DisplayForm	Add customization on display form.

for further regarding the locations you can have a look of cmdui.xml in SharePoint hive/template/global/xml.

Apart from this declarative method you can also create custom action from server side code here is an example
SPUserCustomAction testribbonaction = web.UserCustomActions.Add();
testribbonaction.Location = "CommandUI.Ribbon.ListView";
testribbonaction.RegistrationId = "101" // ; document library , 100 for custom list etc
testribbonaction.RegistrationType = SPUserCustomActionRegistrationType.List;
testribbonaction.CommandUIExtension = "";//command ui extension ribbon xml
testribbonaction.Update();

So now we know how to create ribbon custom action so lets move to the next that is command ui xml

2. Ribbon XML

Customizing SharePoint Ribbon is about to write a ribbon xml and deploy it using a custom action.

There are two major component in ribbon xml CommandUIDeffinition and CommandUIHandler.

so it looks like bolow.

</CommandUIDefinition>

</CommandUIDefinition>

</CommandUIDefinitions>

<CommandUIHandler Command="<command to handle>" CommandAction="<action javascript>" EnabledScript="<conditionaly enable or disable the command>"> </CommandUIHandler>

</CommandUIHandlers>

</CommandUIExtension>

So basically a command ui extension can contain several command ui deffinitions and handlers.

Location is very important here for example with first commanduidefinition we are defining some template so the location is Ribbon.Templates._children and with second we are defining a tab in the tabs so the location is Ribbon.Tabs._children.

Suppose we need to add custom action in library tab of document lirary and under actions group.

note these things and search for the library tab in cmdui.xml as described earlier and try to find the actions group there and note the id.

I found the id was Ribbon.Library.Actions so if you want to add a button to actions group of library tab then you should set Location to Ribbon.Library.Actions.Controls._children

To dig little more lets create a tab. Tabs can have the maxsize , scaling and groups. Groups can have controls that have command and rendered by templates defined in Ribbon.Templates._children

So lets first create Template that will be later used to render the controls

<Row>

</Row>

</Section>

<Row>

</Row>

</Section>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

So we have defined a GroupTemplate named TestTemplate it contains layout element which defines title . it contains section and overflow section which i have not used but of course you can use

Section have alignment and type which can be OneRow,TwoRow or ThreeRow on the basis of that you can have more row elements.

ControlRef is like a placeholder where controls will be placed. please note the DisplayMode and TemplateAlias.

TemplateAlias defines the alias of the template and DisplayMode can have values Small , Medium , Large and Text which is self explanatory.

Our template is ready now lets create a tab and place a group and two buttons

</Scaling>

<Button Id="Ribbon.TestTab.TestGroup.TestButton2" TemplateAlias="test2" Alt="test button 2" Command="Ribbon.TestTab.TestGroup.TestButton2Command" Image16by16="" Image32by32="/_layouts/15/1033/images/formatmap32x32.png?rev=23"

LabelText="Button 2" />

</Controls>

</Group>

</Groups>

</Tab>

</CommandUIDefinition>

The tab is ready however there are some important points the sequence should not be in multiple of 100 . it is used to arrange the controls or tabs for what to be shows first and what will be later.

Maxsize defines the max size of the controls and scale defines how the controls will be scaled when controls are added these are controlled by the layout we defined earlier.

Similary the group we have created is using the template that we defined in previous commandui definition.

Now the thing remains is CommandUIHandler. notice that the button defined above have command and we need to define the handler.

here is an example

</CommandUIHandlers>

Command is the Command that has to be handled , CommandAction is the javascript that performs action and EnabledScript is the script that decideds when the command should be enabled.

So here is everything on one place.

<Row>

</Row>

</Section>

<Row>

</Row>

</Section>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

</Scaling>

</Controls>

</Group>

</Groups>

</Tab>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>

</CustomAction>

This custom action can be copied in an empty element and can be deployed to see the tab in action.

Microsoft Azure is a cloud computing platform developed by microsoft to build, deploy and manage applications in microsoft managed datacenters.

What is cloud computing?

When we say cloud then it means data is stored on internet. there are organisations that provide cloud computing platforms and are called as vendors like Google,Amazon Microsoft etc. Microsoft Azure is provided by microsoft.

Cloud computing usually is classified in three categories: SaaS, PaaS, and IaaS. However, as the cloud matures, the distinction among these is being very less.

SaaS : Software as a Service

When a software is centrally hosted and managed for end customers then it is called software as a service. for example office365.

typically SaaS uses multi tenant architecture and same version is used for all customer. other example of SaaS includes mails, dropbox etc.

PaaS : Platform as a Service

With Paas , you deploy your application in a application hosting environment that is provided by cloud vendor.

so here you develop the application and cloud vendor provides the platform to deploy and run it.

here developer do not thinks about the infrastructure and focuses only on development.

Microsoft Azure provides several PaaS features like Web apps feature of app service.

here developer do not need to think about VM's and all those thing. just build and deploy your application.

IaaS : Infrastructure as a Service

With Iaas , cloud vendor runs and manages server farms running virtualisation software, enabling you to create VM's that run on the vendor’s infrastructure. Depending on the vendor, you can create a VM of windows or linux and install anything on it.

Azure provides ability to create VM's of windows or Linux and it provide ability to setup virtual network , load balancer and storage etc.

it also provide ability setup many other services that can be used.

Azure Services

Microsoft Azure provides many services in cloud.

to understand better it is grouped in four categories below.

a. Compute services :

following service comes under this category.

Azure Virtual Machines—both Linux and Windows

Cloud Services, App Services (Web Apps, Mobile Apps, Logic Apps, API Apps, and Function Apps)

Batch (for large-scale parallel and batch compute jobs)

RemoteApp

Service Fabric

Azure Container Service.

b. Data services :

following services comes under this category.

Microsoft Azure Storage (comprised of the Blob, Queue, Table, and Azure Files services)

Azure SQL Database

DocumentDB

StorSimple

Redis Cache.

c. Application services :

following services comes under this category.

this includes services that you can use to help build and operate your applications

Azure Active Directory (Azure AD)

Service Bus for connecting distributed systems

HDInsight for processing big data

Azure Scheduler

Azure Media Services.

d. Network services :

following services comes under this category

Virtual Networks

ExpressRoute

Azure DNS

Azure Traffic Manager

Azure Content Delivery Network.

SharePoint and Microsoft Azure Blog

Labels

Sunday 6 August 2017

Customizing Ribbon in SharePoint

1. Creating Custom Action

2. Ribbon XML

Wednesday 2 August 2017

Microsoft Azure Basics

Setup dev environment for spfx

Total Pageviews

Labels