Tuesday, October 11, 2011

Ribbon Customizations and CustomActions in SharePoint 2010

In the beginning of October 2011 we did the second off-site meeting with our User Groups in Bansko (Bulgaria). Below are the slides and demo code from my presentation.


I covered the development of customizations, for SharePoint 2010 user interface, meaning custom actions, ribbon elements, notifications, statuses and dialog framework.




You could download the full Visual Studio project from here:http://db.tt/eZncKy2E


It contains an extra code for playing with bulk selection, ribbon button and modal dialog. Feel free to use it Smile


Simple ribbon button


                <!-- Simple button -->
<
CommandUIDefinition Location="Ribbon.Library.Share.Controls._children">
<
Button Id="Ribbon.Library.Share.SugbgButton"
Command="SugbgButtonCommand"
Image32by32="/_layouts/images/PPEOPLE.GIF"
LabelText="Hello SUGBG"
TemplateAlias="o1" />
</
CommandUIDefinition>


Tooltip ribbon button


                <!-- ToolTip button -->
<
CommandUIDefinition Location="Ribbon.Documents.New.Controls._children">
<
Button Id="Ribbon.Documents.New.Ribbontest"
Alt ="Test Button"
Sequence="5"
Command="RibbonTestCommand"
LabelText="Test Button"
Image32by32="/_layouts/images/QuickTagILikeIt_32.png"
TemplateAlias="o1"
ToolTipTitle="My test button tool tip"
ToolTipDescription="My tool tip description"
ToolTipShortcutKey="Ctrl-T,E"
ToolTipImage32by32="/_layouts/images/mwac_infob.gif"
ToolTipHelpKeyWord="WSSEndUser"/>
</
CommandUIDefinition>


Replace an existing ribbon button (New Folder)


                <!-- Replace a button -->
<
CommandUIDefinition Location="Ribbon.Documents.New.NewFolder" >
<
Button Id="Ribbon.Documents.New.NewFolder.MyNewFolderButton"
Alt ="Test button"
Sequence="5"
Command="MyNewFolderButtonCommand"
LabelText="New Folder"
Image32by32="/_layouts/images/menureply.gif"
TemplateAlias="o1" />
</
CommandUIDefinition>


Add ribbon button to edit form


                <!--Add a button to the edit form-->
<
CommandUIDefinition Location="Ribbon.DocLibListForm.Edit.Actions.Controls._children" >
<
Button Id="Ribbon.DocLibListForm.Edit.Actions.MySettings"
Command="EditFormButtonCommand"
Description="Go to settings"
LabelText="Site Settings"
Image32by32="_layouts/images/settingsIcon.png"
TemplateAlias="o2"
Sequence="91"/>
</
CommandUIDefinition>


All elements above are using the these handlers:



            <CommandUIHandlers>
<
CommandUIHandler Command="SugbgButtonCommand"
CommandAction="javascript:HelloRibbon();" />


<
CommandUIHandler Command="RibbonTestCommand"
CommandAction="javascript:alert('RIBBON-test was clicked');" />


<
CommandUIHandler Command="MyNewFolderButtonCommand"
CommandAction="javascript:alert('I replaced the OOB New Folder :)');" />


<
CommandUIHandler Command="EditFormButtonCommand"
CommandAction="/_layouts/settings.aspx" />
</
CommandUIHandlers>


HelloRibbon() function and related javascriptcode also could be deployed with CustomAction



    <CustomAction Id="Ribbon.Library.Actions.NewButton.Script"
Location="ScriptLink"
ScriptBlock="
function HelloRibbon()
{
alert('Hello, Ribbon Script is here!');
}
" />


Very powerful Visual Studio add-in for quick start with ribbon customizations are SharePoint 2010 Extensibility Projects and especially SharePoint Ribbon VSIX



 



Other CustomActions



    <!-- Custom Action Group in Site Settings page -->
<
CustomActionGroup
Id="MyActionGroup"
Description="This group contains all my custom actions."
Title="My Action Group"
Location="Microsoft.SharePoint.SiteSettings"
Sequence="30"
ImageUrl="/_layouts/images/mwac_textpb.gif"/>

<!--
Custom Action in Custom Action Group in Site Settings page -->
<
CustomAction
Id="MyCustomAction"
Description="This link is a custom action."
Title="My Custom Action"
GroupId="MyActionGroup"
Location="Microsoft.SharePoint.SiteSettings"
Rights="ManageWeb"
RequireSiteAdministrator="FALSE"
Sequence="20">
<
UrlAction Url="~sitecollection/_layouts/create.aspx" />
</
CustomAction>

<!--
Custom Action in Site Actions Menu -->
<
CustomAction
Id="MyNewCustomAction"
Description="This menu item is a new custom action."
Title="My New Custom Action"
GroupId="SiteActions"
Location="Microsoft.SharePoint.StandardMenu"
ImageUrl="/_layouts/images/mwac_thumbb.gif"
Sequence="10">
<
UrlAction Url="~sitecollection/_layouts/settings.aspx" />
</
CustomAction>

<!--
Adding Custom action for items in Document Library-->
<
CustomAction Id="ListMenuForMyPage"
RegistrationType="List"
RegistrationId="101"
ImageUrl="/_layouts/images/GORTL.GIF"
Location="EditControlBlock"
Sequence="105"
Title="My Page" >
<
UrlAction Url="DispForm.aspx?ItemId={ItemId}&amp;ListId={ListId}" />
</
CustomAction>


Playing with Dialogs – below is the client code which shows dialogs, using Sharepoint 2010dialog framework



<a href="javascript:showMyDialog();" id="ShaowMydialogID" style="display:inline;">
Show MyDialog
</a>


<!--Define dialog inline-->

<div id="SugbgDiv" style="display:none; padding:5px">

    <
input type="text" value="SUGBG dialog" />

    <
input type="button" value="OK" onclick="closeDialog()" />

</
div>







<!--Load Sharepoint ScriptLink-->

<SharePoint:ScriptLink ID="SPScript" runat="server" Localizable="false" LoadAfterUI="true" />







<!--Open Dialogs-->

<script language="ecmascript" type="text/ecmascript">




    var
myDialog;


    var sid;





    function showMyDialog() {


        var MyDialogDiv = document.getElementById("SugbgDiv"); MyDialogDiv.style.display = "block";





        var options = { html: MyDialogDiv, width: 200, height: 200 };


        myDialog = SP.UI.ModalDialog.showModalDialog(options);





    }





    function closeDialog() {


        myDialog.close();








</script>


You could show everything in the modal window, see how to use it to show en ExcelServices chart as image, using REST



<a href="javascript:ExcelChart();" id="ExcelChartID" style="display:inline;">
Excel MyDialog
</a>




<script language="ecmascript" type="text/ecmascript">



function ExcelChart() {
var options = { url: 'http://intranet/_vti_bin/ExcelRest.aspx/Shared%20Documents/Gears%20Sales%20History.xlsx/model/Charts(\'Chart 1\')?$format=image', width: 400, height: 400 };
myDialog = SP.UI.ModalDialog.showModalDialog(options);
}


</script>



Playing with StatusBar



<script language="ecmascript" type="text/ecmascript">



var sid;



//Status bar

function createStatusBar() {
sid = SP.UI.Status.addStatus("My status bar title", "My status bar <a href=\"#\">message<\a>", true);
}

function removeStatusBar() {
SP.UI.Status.removeStatus(sid);
}

function removeAllStatusBars() {
SP.UI.Status.removeAllStatus(true);
}

function updateStatusBar() {
SP.UI.Status.updateStatus(sid,"This is a status update");
}

function appendStatusBar() {
SP.UI.Status.appendStatus(sid,"This is appended", "This is my appended <i>status</i>");
}

function redStatusBar() {
SP.UI.Status.setStatusPriColor(sid, "red");
}

function greenStatusBar() {
SP.UI.Status.setStatusPriColor(sid, "green");
}

function blueStatusBar() {
SP.UI.Status.setStatusPriColor(sid, "blue");
}

function yellowStatusBar() {
SP.UI.Status.setStatusPriColor(sid, "yellow");
}


</script>



Notifications



<script language="ecmascript" type="text/ecmascript">



//Notifications
var notificationId;

function showNotification() {
notificationId = SP.UI.Notify.addNotification("The party has to begin after 6 hours! :)");
}

function removeNotification() {
SP.UI.Notify.removeNotification(notificationId);
}



</script>



Find the download link above to get the full VS project. Enjoy!

Sunday, September 11, 2011

Попово езеро

Бих искал да споделя този маршрут, удачен за приятна разходка с ниска трудност, ако се намирате в Банско, Добринище или околността Smile

Изходна точка – лифтът на Добринище при х. Гоце Делчев, през лятото отваря в 8:30. Пътуване с лифта до х. Безбог, около 30 мин.

P1020659

P1020666

От хижата тръгвате по маркирана пътека за Поповото езеро. Гледката е невероятна, трудността ниска, единственият стръмен участък е непосредствено след езерото пред х. Безбог.

P1020673

P1020676

P1020677

До езерото е около час и половина умерено към бързо темпо. Препоръчвам да се тръгне от долна станция на лифта възможно най-рано, зада се избегнат тълпите, особено през почивните дни.

P1020679

P1020683

P1020691

Изключително примамливо е да решите да “отскочите” до Крменските езера с допълнителен двучасов преход.

ВНИМАНИЕ, преценете добре и времето за връщане до х.Безбог, лифтът затваря в 16ч

P1020696

Водата в езерото е порядъчно студена, но ентусиасти винаги има. И рибата е в изобилие, но не мисля че риболовът е разрешен Smile

P1020697

P1020698

image

и линк до .GPX файла: http://db.tt/zxgzYSa

Sunday, August 7, 2011

От Бистрица до Алеко

Трябваше обезателно днес да се покатеря из Витоша, но от и до- къде, кой маршрут да хвана? Реших да тръгна от Драгалевци под лифта, да се изкача до Голи връх а от там ще му мисля.

И най-важното, този път без колата! Това последното много променя пейзажа, повярвайте ми! В крайна сметка се озовах на бул. Г. М. Димитров на временната спирка на автобусите за Витоша, които по принцип тръгват от Дървеница,… и гледам стои и чака автобус за Железница! Не се чудих много-много и скочих вътре. Поразпитах пътниците къде трябва да сляза в Бистрица, за да тръгна към х. Алеко, но след като не получих особено убедителни отговори реших, че ще сляза в центъра на селото и там ще видим кое накъде.

Поради ремонта по Бистришко шосе раздрънканият автобус пое през Студентски град и Симеоново, но за 20-тина  минути се затътрихме до крайната ми цел.

Та казано накратко от центъра на селото по ул. Стефан Стамболов (посоката е запад) след около 30 минути се стига до малък паркинг, в дъното на който има табела:

P1020637

От там поех на дясно и след малко се стига до “разклон”

P1020639

Както се вижда от бялата табела, до Алеко е 3:30 ч, но в крайна сметка аз го взех за 2:40 и то с умерено темпо.

Пътят в един момент минава покрай реката, ето и малко снимки:

P1020643

P1020641

P1020642

После навлязох в резервата Бистришко бранище

P1020646

И тук стана интересно! Първо, покрай пътеката имаше супер много узрели и необрани горски малинки, явно този маршрут не беше от най “оборотните”. Второ, навлязох в областта, където миналата година беше вилняла бурята и там гледката е меко казано странна – огромни изпочупени дървета, разхвърляни на всички посоки като кибритени клечки. Благодарности към управата на парк Витоша, изчистили са пътеките и се преминава безпрепятствено. След това се навлиза във вече “здрава” гора и тук срещнах първите туристи идващи от Алеко – две семейства с деца. оказа се, че остава съвсем малко, което доста ме учуди! наистина започнах да срещам повече хора и 20 минути по-късно бях на оживените пътеки до ски пистите.

Тотал – 2 часа и 40 мин, по невнимание за малко бях спрял GPS тракера, но ето и картинката:

281682_10150277720879791_643429790_7404111_5485440_n

Горната картинка в Google Maps

http://maps.google.com/maps/ms?msid=203956868503440711176.0004aa2a9a082971aaa9f&msa=0

и линк до .GPX файла: http://db.tt/AMDx58m

Saturday, April 2, 2011

Friday, March 25, 2011

SharePoint Sessions in MS Days 2011

Next week (30-31.03.2011) we’ll open the 10th issue of Microsoft Days in Bulgaria. There is a dedicated SharePoint track during the second day, with the following sessions:

Time slot Session Speaker Hall
9:15 – 10:15 SharePoint 2010: Practical Architecture Planning from the Field Tihomir Ignatov Hall 5
10:45 – 11:45 SharePoint 2010: Authentication and Authorization Smackdown Radi Atanassov Hall 5
12:45 – 13:45 The Search Story at SharePoint 2010 Tihomir Ignatov Hall 5
14:15 – 15:15 Connecting Two Clouds – Sharepoint Online in Office 365 and Windows Azure Damien Caro Hall 5
14:15 – 15:15 Case Study: Там където SharePoint, BI & Silverlight се срещаха с бизнеса! Rossen Zhivkov VIP Hall
15:45 – 16:45 Schema-Based Development with SharePoint 2010 Radi Atanassov Hall 5
15:45 - 16:45 SharePoint in the Cloud – Developing Solutions for SharePoint Online Branimir Gyurov Hall 7

Other SharePoint and Cloud related sessions in the first day:

  • Microsoft Office 365 – What does it means for IT Pros?
  • Case Study: Buildning a Centralized Knowledge Management system on the top of SharePoint 2010
  • Social Networking in the Enterprise: Delivering Facebook-like experience with SharePoint 2010 & Going Mobile

Enjoy!

Thursday, January 27, 2011

Sharepoint 2010 Automated Deployment

I tested http://autospinstaller.codeplex.com/ for the needs of my projects and it is very useful tool. Well developed PowerShell application with configuration options. You only need to attach the SPS 2010 media (iso) and start the script.

Smile

Wednesday, January 5, 2011

Sharepoint 2010: Fixing the Flyout Delay

When rolling over a number of flyouts quickly, the user sees all the flyouts shown on the screen at once which looks rubbish. 

To remove the delay altogether use this css in your page somewhere:

li.hover-off>ul

{ display:none; }