Using EditModePanel to Solve Web Part Overlay Issue

Technologies: SharePoint 2013, Online; SharePoint Designer 2013

Client Requirement

Recently I’ve  been working with a client on their O365/SharePoint Online intranet. The requirements were such that the Master Page for the home page had a restricted width of approximately 1200px versus simply letting the text and web parts flow the expanse between the left and right margins.

This restriction often causes an issue with web parts overlaying each other when the page is being edited; and more specifically, when the web parts on the page are being modified or configured via the web part properties panel that appears to the right of the page body. The good news is that there is a simple solution that takes just a few minutes to implement and resolves the web part overlay issue.

View web part overlap issue image.

Master Page

In my quest to resolve this issue, I noticed that when performing a Bing or Google search on the keywords of EditModePanelEditModePanelShowInEdit and EditModePanelShowInRead, the end result inevitably pointed to the Master Page as “the” place to add the corrective code. The following link was a great example.:

Page Layouts

At the end of the road, I found that the custom page layouts were the final destination for this solution.

One of the great features with SharePoint 2013/Online is the untapped capabilities of the ‘EditModePanel’. This control is very versatile and can assist in the on-the-fly altering of a page layout to better suit the page in edit and display mode when a restricted width has been defined with the Master Page.

Depending on the type of page layout template used, there may already be a section related to the EditModePanel at the top of the template. When I saw that Microsoft had already included a workable example, i was very confident that the style statements were being included in the correct place and adhered to the overall standards of the SharePoint framework.

<PublishingWebControls:EditModePanel runat=”server”>
<!– Styles for edit mode only–> <SharePointWebControls:CssRegistration name=”
<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>” After=”<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>” runat=”server”/>
<style type=”text/css”>
#DeltaPlaceHolderMain {
      float:none; width: 1500px; background-color:white }


The above style statements worked flawless and allowed the width of the page body to be expanded only during the page editing mode. By default, the background color is a bright yellow and something most clients and users probably wont find to appealing.


Let me know if you found this helpful for your project. Leave your comments about this article or reply to with additional questions regarding your project.

A special thanks to all the bloggers whose articles I traversed in my quest for a simplistic solution. And a special thanks to Heather Solomon for her great article and assistance at the end of my journey.

Posted in Master Page, Page Layouts, SharePoint Designer, Web Parts | 1 Comment

Custom Data View Web Part Using Recursion

Purpose: Provide a means to process all of the documents in a document library containing folders or containing the content type of “document set”. A document set functions very similar to a folder structure within SharePoint; and, Folders must be enabled for a document library in order to use a document set content type within it.

By default, a custom DVWP will only process the top-level content within a library or list. The top-level refers to the ‘scope’ being isolated to the folder or document set level. In order to process the content within those containers, there is a slight configuration within the DVWP SPDataSource that must be configured.

Create an .ASPX page and include a custom Data View Web Part displaying a few columns from your favorite list.

Find a line similar to the following and add the Scope=”Recursive” attribute manually:

<SharePoint:SPDataSource runat=”server” DataSourceMode=”List” SelectCommand=”&lt;View&gt;&lt;/View&gt;” UseInternalName=”True” ID=”dataformwebpart2″ Scope=”Recursive”>


Posted in Data View Web Part, SharePoint Designer, Web Parts, XSL | Leave a comment

Highlight List Entries Based on Date Criteria

Technologies: SharePoint 2007-Online; SharePoint Designer 2010-2013; XSL

Purpose: Provide a means to highlight specific entries based on date parameters. Use highlights of yellow, orange and red; otherwise, display the content with a normal font color. This solution is best implemented for those conditions that are more complex than what can be handled with calculated columns.

Create an .ASPX page and include a custom Data View Web Part displaying a few columns from your favorite list.

A sample of XSL using a Choose / When statement to compare dates is shown below.

<td class=”ms-vb”>
<xsl:when test=”ddwrt:DateTimeTick(ddwrt:GenDisplayName(string(ddwrt:Today())))  &gt;= ddwrt:DateTimeTick(ddwrt:GenDisplayName(string(@DestructionDate)))”>
<xsl:attribute name=”style”>
background-color: #FF0000;  <!– Red    //–>
<xsl:attribute name=”style”>
font-weight: normal;
<xsl:value-of select=”@DestructionDate”/>


Posted in Data View Web Part, SharePoint Designer, Web Parts, XSL | Leave a comment

Custom Web Part for Birthday or Anniversary

Technologies: SharePoint 2007-Online; SharePoint Designer 2010-2013; XSL

Purpose: Provide a means to easily manage a list of Contacts and related metadata pertaining to Birthdays, Anniversaries, Engagement Dates, Opportunity Dates, etc. The people and content related to the current month will display. This provides a long-term low maintenance architected solution for an Office Admin or Office Manager role.

Create Contacts List

Column Name                  Column Type

  • Full Name                        People
  • Birth Month                    Choice
  • Anniversary Month      Choice
  • Anniversary Date          Date/Time

Open SharePoint Designer and perform the following operations

Page Setup

  • create a new ASPX page
  • add an empty data view web part
  • insert the data source list of Contacts


  • include only those entries from the Contacts list where the Anniversary Month relates to the current month

<xsl:variable name=”Rows” select=”/dsQueryResponse/Rows/Row[@AnnivMonth=number(ddwrt:FormatDateTime(string(ddwrt:Today()),1033,’MM’))]”/>


  • show the resulting entries in ascending sequence by Last Name


  • insert two(2) columns to display (ie; Name, Anniversary Date)
    * these are place holders for now
  • retain the column header of ‘Name’
  • change the column header of ‘Anniversary Date’ to ‘Service Years’

Column Headers

<tr valign=”top”>
  <th class=”ms-vh” nowrap=”nowrap”>Name</th>
  <th class=”ms-vh” nowrap=”nowrap”>Service Years</th>

Within the template named ‘dvt_1.rowview’, calculate the years of service which is the difference between ‘Today’ and the Anniversary Date

<xsl:variable name=”yearsOfservice”
– number(ddwrt:DateTimeTick(ddwrt:GenDisplayName(string(@AnnivDate))))) div 864000000000)
div 365)”

Column Details

  • display the Contact Name

   <td class=”ms-vb”>
    <xsl:value-of select=”@Title”/>, <xsl:value-of select=”@First_x0020_Name”/>

  • display the Years of Service
    * show the actual number of years when the value is not equal to 0

<td class=”ms-vb”>
    <xsl:when test=”$yearsOfservice != ‘0’”>
 <xsl:value-of select=”$yearsOfservice”/>
 &lt; 1 Hire

That’s it. Short and sweet.

Save the Web Part

  • position your cursor in the detail area of the web part, select the Web Part tab and save the file locally

Insert onto your Page

  • edit the page where the web part will display
  • upload the Web Part
  • insert onto the page and configure as needed

Leave me a comment if you need any assistance with your project.

Enjoy every sandwich !

Posted in Data View Web Part, SharePoint Designer, Web Parts, XSL | Leave a comment

So You Want An Azure SQL Database

Review MVA Learning Tutorial: Querying With Transact-SQL


  • Create Azure SQL DB and populate with Adverture Works Sample Data
  • Access SQL DB via local SQL Server Management Studio tools
  • Access SQL DB via Visual Studio


  • Login to the new portal:
  • Select + and Data + Storage
  • Select SQL Database
  • For the ‘Blank Database’, select Adventure Works Sample DB
  • After DB created …
  • within Tools, select Open Visual Studio
  • configure Firewall to allow connection with local machine and other machines as needed

using Visual Studio …

  • select Open Visual Studio
  • login to SQL DB; enter Database Name and server credentials

using SQL Server 2014 Express Management Console to query the DB separately…

  • navigate to
  • select top navigation of Products > SQL Server > SQL Server Editions
  • select top navigation of Express
    … review the version information available on the page
    … as we already have a SQL DB in Azure, we simply need the SQL Server Management Studio version
    … download SQL Server 2014 Express and install on local machine
downloads also available via MSDN Subscription
  • login to subscription
  • navigate to the Subscriber Downloads section
  • search on the keywords: “sql server 2014 express”
  • download / install Microsoft SQL Server 2014 Express Management Console
  • download / install. NET 3.5 Framework (as needed)
Posted in Azure, SQL Server DB, Visual Studio | Leave a comment

Announcements Show/Hide Feature

Technologies: SharePoint 2007-Online; SharePoint Designer; JavaScript; XSL

We will use the basic Announcements list and include the Show/Hide feature for the list. The Title will always display while the Body text will display on request by the user.

1. Using SharePoint Designer, add a basic web part zone and data view web part to a .NET ASPX page

2. Include XSL statements within the body of a page



3. Include javascript on the page (to test) within the <head></head> section

function ShowText(element1,element2)
var field1 = document.getElementById(element1);
var field2 = document.getElementById(element2);
   if (element1) {
     if ( == "block") {
  = "none"; 
           field2.innerHTML = "Show";
     else { 
  = "block"; 
           field2.innerHTML = "Hide";

4. Save the web part to a file and import onto a new page of your choice within your site.

5. Insert a Content Editor Web Part onto the new page and include the SPD javascript as embedded code. See screenshot.


6. The end result is the following user experience; the user presses the Show/Hide to manage the experience.


Posted in Uncategorized | Leave a comment

Oracle/SharePoint Integration Points

Oracle is a popular ERP System for managing HR and Financial aspects of a large business. There are times when it would be very helpful and game changing if the data from the back-end system could be surfaced within the context of a Business Group, Department or Division site. There are a few scenarios I will cover in this article that may be helpful for consideration within your business.

  1. Provide the ability to integrate, update and sync Oracle data from within the context of a SharePoint 2013 site … view the steps
  2. Provide means to augment an existing SharePoint list with backend data from the Oracle ERP
    – Use Meta Man tool to build External Content Type (ECT)
    – Add additional custom columns within ECT list as needed
  3. Provide means to simply surface a few Oracle ERP BI charts/graphs within the context of a SharePoint Business Group, Department or Division site
    – Build view within Oracle and expose as a web service
    – Configure SSO / Oracle Access Manager (OAM) as needed
    – Within SP, include Oracle view URL within a Page Viewer Web Part


Posted in Uncategorized | Leave a comment