Search This Blog

Loading...

Wednesday, October 1, 2014

Applying Folder Up Navigation and Providing Bulge effect on Top Navigation Bar to SharePoint 2013 Site

When you upgrade from SharePoint 2010 to SharePoint 2013 or setup a new SharePoint 2013 site, many people feel that the SharePoint 2013 default look and feel is not as usable as how the default branding of SP 2010 is. It is white and blue and there are no lines, borders, panels, bulges - just nothing - it is all just plain. For a company which just wants to use the default branding, this could post a huge challenge.

Hence, this post talks about how you can bring folder up navigation as well as a bulge effect on the Top Navigation bar:

1.       Create a CSS file and name it as  Ex. MyBranding.CSS, that  file is to be placed in the  /Style Library/css/   Directory
2.       You can  the DCR CSS file from current default master page by using this syntax

d
<SharePoint:CssRegistration Name="/Style Library/css/MyBranding.css" After="corev15.css" runat="server" />

3.       Then Search for below keyword  in current default Master page

<div class="ms-breadcrumb-dropdownBox" style="display:none;">

4.       Delete the CSS attribute    style="display:none;"
5.       Two lines below change the visible attribute of the SharePoint:PopoutMenu as true
6.       After editing your code it, should look like as below,

<div class="ms-breadcrumb-dropdownBox">
<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">
                <SharePoint:PopoutMenu
                                Visible="true"
                                runat="server"
                                ID="GlobalBreadCrumbNavPopout"
                                IconUrl="/_layouts/15/images/spcommon.png?rev=27"
                                IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
                                ThemeKey="v15breadcrumb"
                                IconOffsetX="215"
                                IconOffsetY="120"
                                IconWidth="16"
                                IconHeight="16"
                                AnchorCss="ms-breadcrumb-anchor"
                                AnchorOpenCss="ms-breadcrumb-anchor-open"
                                MenuCss="ms-breadcrumb-menu ms-noList">
                                <div class="ms-breadcrumb-top">
                                                <asp:Label runat="server" CssClass="ms-breadcrumb-header" Text="<%$Resources:wss,master_breadcrumbHeader%>" />
                                </div>
                                <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server"><SharePoint:ListSiteMapPath
                                runat="server"
                                SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
                                RenderCurrentNodeAsLink="false"
                                PathSeparator=""
                                CssClass="ms-breadcrumb"
                                NodeStyle-CssClass="ms-breadcrumbNode"
                                CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
                                RootNodeStyle-CssClass="ms-breadcrumbRootNode"
                                NodeImageOffsetX="217"
                                NodeImageOffsetY="210"
                                NodeImageWidth="16"
                                NodeImageHeight="16"
                                NodeImageUrl="/_layouts/15/images/spcommon.png?rev=27"
                                RTLNodeImageOffsetX="199"
                                RTLNodeImageOffsetY="210"
                                RTLNodeImageWidth="16"
                                RTLNodeImageHeight="16"
                                RTLNodeImageUrl="/_layouts/15/images/spcommon.png?rev=27"
                                HideInteriorRootNodes="true"
                                SkipLinkText="" />
                                </asp:ContentPlaceHolder>
                </SharePoint:PopoutMenu>
</SharePoint:AjaxDelta>
</div>


7.       Now your breadcrumb icon will not appear and to get it back, add the script below before the </body> tag in master page.

<script type="text/javascript">
document.getElementById("GlobalBreadCrumbNavPopout-anchor").innerHTML='<img style="border-width:0;position:absolute;left:-215px !important;top:-120px !important;" alt="Navigate Up" src="/_layouts/15/images/spcommon.png?rev=27">';
              </script>      

8.       Save the modified master page, check it and publish the major version.






9.       Output should be like as below,



10.   Now, for changing the breadcrumb icon position nearer to the title bar, cut the

<div class="ms-breadcrumb-dropdownBox"> full div block as in the table of 6th point and paste it in the below of this block.


<SharePoint:AjaxDelta id="DeltaSiteLogo" BlockElement="true" runat="server">
                                <SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" id="onetidProjectPropertyTitleGraphic" ><SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/15/images/siteIcon.png?rev=23" runat="server"/></SharePoint:SPSimpleSiteLink>
                </SharePoint:AjaxDelta>
</div>

11.   For  the alignment of folder up navigation icon, we applying the following CSS code in DCR.CSS


.ms-breadcrumb-dropdownBox
 {
display: inline-block;
vertical-align: middle;
margin-top: 25px;
margin-left: 10px;
              }










12.   The final output  will be shown as below








a)    How the top navigation bulge effect has been applied in SharePoint 2013?

1.       Follow first two steps in previous section
2.       In Master page-> to look better, you can change the position of the top menu,
 Find and select the below div block.


<div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop" id="ms-breadcrumb-box1">
<div class="ms-breadcrumb-top">

<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
                <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate"><Template_Controls>
                                                <asp:SiteMapDataSource
                                                                ShowStartingNode="False"
                                                                SiteMapProvider="SPNavigationProvider"
                                                                id="topSiteMap"
                                                                runat="server"
                                                                StartingNodeUrl="sid:1002"/>
                                </Template_Controls>
                </SharePoint:DelegateControl>
                <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
                                <SharePoint:AspMenu
                                                ID="TopNavigationMenu"
                                                Runat="server"
                                                EnableViewState="false"
                                                DataSourceID="topSiteMap"
                                                AccessKey="<%$Resources:wss,navigation_accesskey%>"
                                                UseSimpleRendering="true"
                                                UseSeparateCss="false"
                                                Orientation="Horizontal"
                                                StaticDisplayLevels="2"
                                                AdjustForShowStartingNode="true"
                                                MaximumDynamicDisplayLevels="2"
                                                SkipLinkText="" />
                </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
                                                                </div>



And paste it in the below of following SharePoint block in master page

<div class="ms-tableCell ms-verticalAlignTop">
<SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" BlockElement="true" CssClass="ms-mpSearchBox ms-floatRight" runat="server">
  <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
                <div id="searchInputBox">
                  <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" />
                </div>
  </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
                                                </div>
                                </div>
                                </div>
                                </div>



3.       For applying menu bulge effect background, use the below CSS code

.ms-breadcrumb-top
 {
white-space: inherit;
margin-bottom: 0px;
background: rgba(240, 248, 255, 0.19);
background: url("/_layouts/images/selbg.png") repeat-x left top;
/*background-color: #f6f6f6;*/
vertical-align: middle;
min-height: 25px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #b8babd;
line-height: 25px;
}.ms-breadcrumb-box
 {
width: 100%;
background-color: #F6F6F6;
display: inline-table;
height: auto;
}

4.       For applying  selected menu  color effect , use the below CSS code


#zz13_RootAspMenu ul.static li.static.selected
{
border-color: #91cdf2;
border-bottom-color: #addbf7;
border-top-color: #c6e5f8;
background: url("/_layouts/images/selbg.png") repeat-x left top;
background-color: #ccebff;
color: #003759;
padding: 4px 5px;
margin: 0px 0px;
}
a.dynamic.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode{
margin: 0px -10px 0px -10px;
padding:5px;
}

a.dynamic.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode:hover {
background: #D9D9D9 !important;
margin: 0px -10px 0px -10px;
}

#DeltaTopNavigation .ms-core-listMenu-root a[accesskey="1"]{
               
                display:none;
}             
.ms-core-listMenu-horizontalBox > .ms-core-listMenu-root > .ms-listMenu-editLink {
margin-left: 39px;
}





5.       Set the positions and alignment by using this following CSS code.

a.dynamic.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode{
margin: 0px -10px 0px -10px;
padding:5px;
}

a.dynamic.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode:hover {
background: #D9D9D9 !important;
margin: 0px -10px 0px -10px;
}


6.       To fix the Overlapping menu, use this following CSS code.

#zz13_RootAspMenu
{
margin-left: -60px;
margin-bottom: 0px;
                }

7.       You can also apply Bulge effect for the header background to look better

#s4-titlerow {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 5px;
padding-bottom: 5px;
background: url("/_layouts/images/bgximg.png") repeat-x -0px -1023px;
background-color: #f9f9f9;
}

#titleAreaBox {
margin: auto 20px;
width: 95%;
}







8.       For wrapping the menu, use the below CSS


.ms-breadcrumb-top {
white-space: inherit;
}


9.       Set the search box layout position

#SearchBox
{
margin-top:20px;
}

                                                                                                                      


10.   The final output will be shown as below,







Sunday, September 28, 2014

SharePoint Introduction and Bullet Points to get started!

·         2001 – STS – SharePoint Team Services
·         2003 – SharePoint Portal Server
·         2007 – Microsoft Office SharePoint Server (MOSS)
·         2010 – Microsoft SharePoint Server
·         2013 – Microsoft SharePoint Server
o   Editions
§  Foundation (Free)
§  Standard (Server + Standard CAL)
§  Enterprise (Server + Standard CAL + Additive CAL)
o   On-Premise
o   On-Demand (Cloud)
§  Private Cloud
§  Office 365
·         Exchange – Mail, outlook
·         SharePoint – Collaboration, Cloud Storage
·         Lync – Instant Messaging & Online Meetings
·         Yammer – Corporate Social Networking
·         Different Solutions that are possible using SharePoint
o   Intranet Portals
o   Extranet Portals
o   Internet Portals
o   Document Management Systems
o   Content Management Systems
o   eForms
o   Workflows
o   Business Intelligence Solutions
o   Search Solutions
o   Custom Applications on top of SharePoint
·         HW and SW Requirements (64 bit only) – Server
o   Hardware
§  4 cores in processor
§  RAM 8 GB : 16 GB
§  250 GB HDD
o   Software
§  Win 2008 R2 SP1 / Win 2012
§  SQL Server 2008 R2 SP1 / SQL 2012 / SQL 2014
·         Server Topology – SharePoint Server Farm
o   Stand-alone
o   Two Server
o   Three Server
o   4 servers
o   5 servers
o   Or above
·         SharePoint Project Roles
o   SharePoint Solution Architect
o   SharePoint Infrastructure Architect
o   SharePoint Power Users / Content Authors
o   SharePoint Developers
o   SharePoint Administrators
o   SharePoint Branding Engineers
·         SharePoint Application Structure
o   Web Application (Created by the SP Admin)
§  Site Collection (Created by SP Admin)
·         Site
o   Lists
o   Libraries
o   Apps     
o   Sub Site
·         Every Site Collection comes with one site – that is also called a Top Site or a Root Site 

SharePoint Certification for Information Workers

https://www.microsoft.com/learning/en-in/exam-77-419.aspx

Business Intelligence Primer

http://www.slideshare.net/skarthick/business-intelligence-primer

Tried to compile information that is a quick reference for people who want to know what BI is all about and more specifically what MS BI is all about at this point in time.

In the next version will add screenshots and how-tos as well.

Thursday, August 14, 2014

Choosing the right API in SharePoint 2013

Venn diagram of API sets and SharePoint app types

If you want to do this ...
... use these APIs
Create an ASP.NET web application that performs create/read/update/deleted (CRUD) operations across a firewall on SharePoint data or external data that is surfaced in SharePoint by a Microsoft Business Connectivity Services (BCS) external content type
JavaScript client object model
Create an ASP.NET web application that performs CRUD operations on SharePoint data or external data that is surfaced in SharePoint by a BCS external content type, but does not have to call SharePoint across a firewall
.NET Framework client object model, Silverlight client object model, or REST/OData endpoints
Create a LAMP web application that performs CRUD operations on SharePoint data or external data that is surfaced in SharePoint by a BCS external content type
REST/OData endpoints
Create a Windows Phone app that performs CRUD operations on SharePoint data
Mobile client object model
Create a Windows Phone app that uses the Microsoft Push Notification Service to alert the mobile device of events in SharePoint
Mobile client object model and the server object model
Create an iOS or Android app that performs CRUD operations on SharePoint data
REST/OData endpoints
Create a .NET Framework application that performs CRUD operations on SharePoint data
.NET Framework client object model
Create a Silverlight application that performs CRUD operations on SharePoint data
Silverlight client object model
Create an HTML/JavaScript application that performs CRUD operations on SharePoint data
JavaScript client object model
Create an app for Office that works with SharePoint
JavaScript client object model
Create a custom Windows PowerShell command
Server object model
Create a timer job
Server object model
Create an extension of Central Administration
Server object model
Create consistent branding across an entire SharePoint farm
Server object model
Create a custom Web Part, application page, or ASP.NET user control
Server object model
Important
If the functionality you want to offer customers is not oriented to SharePoint administration at a scope broader than site collection, we recommend that, instead of using the server object model, you create an app for SharePoint that includes a remote ASP.NET web application with custom Web Parts and user controls as needed. See the top two rows of this table.