Thanks to E. Struyf for his V4 Masterpage that has a Sticky Footer and Docked ribbon, this is based on his efforts, and I couldn’t have gotten this far without his masterpage example and his correspondence.
I had a need for a V4 Masterpage with a fixed width, a sticky footer, and a docked ribbon, and it had to work on IE7. However, IE7 has this small issue, specifically that it doesn’t like people. So, when I used E. Struyf’s method, I found that it worked beautifully in IE8, but when put in IE7 with a fixed width, the method worked, but left an empty area below the footer that the user could scroll into. After a great deal of troubleshooting, I found that two changes were necessary to his masterpage.
The CSS for the html and body tags was as follows:
html, body
{
height: 100%;
}
body
{
overflow: hidden !important;
}
I changed it to:
html, body
{
overflow: hidden !important;
height: 100%;
}
body { }
After this change to prevent the adding of a non-sense horizontal scrollbar, I added the following conditional javascript to force correct resizing in IE7:
<!--[if IE 7]>
<script type="text/javascript">
var fixResize = function () {
var workspace = document.getElementById('s4-workspace');
var fixCode = function () {
setTimeout(function() {
workspace.style.height = workspace.clientHeight+1 + "px";
setTimeout(function() {
workspace.style.height = workspace.clientHeight-1 + "px";
}, 1);
}, 1);
}
fixCode();
workspace.onmouseover = function() {
fixCode();
workspace.onmouseover = null;
}
};
SP.UI.Workspace.add_resized(fixResize);
</script>
<!--span class="hiddenSpellError" pre=-->endif]-->
There is a minor known issue, specifically that on Application Pages, the resize will not fire until the mouse is over the content area.
As for the fixed width, that’s as easy as setting the CSS for the form tag to:
form
{
width:1050px;
margin-left:auto;
margin-right:auto
}
And simply add the class “s4-nosetwidth” to the “s4-workspace”
So you want to put custom HTML in your metadata?
Ok, no problem. Maybe you tried a calculated column, and found out it just shows up as HTML code in your page. Encoded of course. Maybe your modified some SharePoint field type xml. Or maybe you included javascript in your masterpage to decode the html and make it useful.
Did you feel like these weren’t “clean” implementations? Or did you notice that you can’t use the ID field in your custom field until you edit the field at least once? That one is a bugger.
Well, SharePoint does it with their title field, don’t they? It’s an anchor tag! It’s a secret (sort of) and I’m no good at keeping secrets.
So, how does SharePoint do it? Well, I’m going to pull out one of my favorite tools, LinqPad. To use it with SharePoint, we need to configure it. After you open it, press F4, and add Microsoft.SharePoint to the Additional References, then add Microsoft.SharePoint to Additional Namespace Imports. Click OK, set your Language to C# Statement(s).
Now we’re ready to run some SharePoint code.
Here’s the code I used to access the Edit field in My Custom List:
SPSite site = new SPSite("http://horza-pc");
SPWeb web = site.RootWeb;
SPList list = web.Lists["My Custom List"];
SPField field = list.Fields.GetFieldByInternalName("LinkTitleNoMenu");
Console.Write(field.SchemaXml);
web.Dispose();
site.Dispose();
And here is the xml for the field:
<Field ID="{bc91a437-52e7-49e1-8c4e-4698904b2b6d}" ReadOnly="TRUE" Type="Computed" Name="LinkTitleNoMenu" DisplayName="Title" Dir="" DisplayNameSrcField="Title" AuthoringInfo="(linked to item)" EnableLookup="TRUE" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="LinkTitleNoMenu" FromBaseType="TRUE">
<FieldRefs>
<FieldRef Name="Title"/>
<FieldRef Name="LinkFilenameNoMenu"/>
</FieldRefs>
<DisplayPattern>
<IfEqual>
<Expr1>
<LookupColumn Name="FSObjType"/>
</Expr1>
<Expr2>
1
</Expr2>
<Then>
<Field Name="LinkFilenameNoMenu"/>
</Then>
<Else>
<HTML>
<![CDATA[<a onfocus="OnLink(this)" href="]]>
</HTML>
<URL/>
<HTML>
<![CDATA[" ONCLICK="GoToLink(this);return false;" target="_self">]]>
</HTML>
<Column HTMLEncode="TRUE" Name="Title" Default="(no title)"/>
<IfEqual>
<Expr1>
<GetVar Name="ShowAccessibleIcon"/>
</Expr1>
<Expr2>
1
</Expr2>
<Then>
<HTML>
<![CDATA[<img src="/_layouts/images/blank.gif" class="ms-hidden" border=0 width=1 height=1 alt="]]>
</HTML>
<HTML>
Use SHIFT+ENTER to open the menu (new window).
</HTML>
<HTML>
<![CDATA[">]]>
</HTML>
</Then>
</IfEqual>
<HTML>
<![CDATA[</a>]]>
</HTML>
<IfNew>
<HTML>
<![CDATA[<IMG SRC="/_layouts/1033/images/new.gif" alt="]]>
</HTML>
<HTML>
New
</HTML>
<HTML>
<![CDATA[">]]>
</HTML>
</IfNew>
</Else>
</IfEqual>
</DisplayPattern>
</Field>
So, that’s how the field is defined.
Well, looks like FieldRefs contains the fields used for the calculation, and DisplayPattern contains the html. I’ll just whip up my own, and I’ll make it easy, just Title, <br />, and ID. I do need to leave a few things out of the schema xml.
<Field ReadOnly="TRUE" Type="Computed" Name="TitleBreakId" DisplayName="TitleBreakId" EnableLookup="TRUE" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="TitleBreakId" > <FieldRefs> <FieldRef Name="Title"/> <FieldRef Name="ID"/> </FieldRefs> <DisplayPattern> <Column HTMLEncode="TRUE" Name="Title" Default="(no title)"/> <HTML><![CDATA[<br />]]></HTML> <Column HTMLEncode="TRUE" Name="ID" Default="(no id)"/> </DisplayPattern> </Field>
And finally, I add my new HTML column to the SharePoint list:
SPSite site = new SPSite("<a href="http://horza-pc">http://horza-pc</a>");
SPWeb web = site.RootWeb;
SPList list = web.Lists["My Custom List"];
list.Fields.AddFieldAsXml(@"
<Field ReadOnly=""TRUE"" Type=""Computed"" Name=""TitleBreakId"" DisplayName=""TitleBreakId"" EnableLookup=""TRUE"" SourceID=""http://schemas.microsoft.com/sharepoint/v3"" StaticName=""TitleBreakId"" >
<FieldRefs>
<FieldRef Name=""Title""/>
<FieldRef Name=""ID""/>
</FieldRefs>
<DisplayPattern>
<Column HTMLEncode=""TRUE"" Name=""Title"" Default=""(no title)""/>
<HTML><![CDATA[<br />]]></HTML>
<Column HTMLEncode=""TRUE"" Name=""ID"" Default=""(no id)""/>
</DisplayPattern>
</Field>
");
web.Dispose();
site.Dispose();
When I go back to my SharePoint list, and I edit my view, I see my new field. I add it to my view, and we have a new HTML rich field in our list!
Go give it a shot.
Thanks to @isahack for suggesting this post.
Lets start with a true Hello World, and the simplest one we can, an HTML page that can be accessed though _layouts.
First we need the tools of our trade. The first one we need is Visual Studio. You’ll need this tool for alot of SharePoint development, so it’s best to install it soon. Visual Studio 2010 or Visual Studio 2008 both work beautifully. 2005 may work, I’m not sure.
The other important tool is STSDEV. While not strictly necessary, it is incredibly useful. I strongly suggest you learn to use it.
Be aware that STSDEV is strictly a WSS 3.0 and SharePoint 2007 tool. SharePoint 2010′s development is more integrated with Visual Studio.
After installing both Visual Studio 2010/2008, and STSDEV (I’m using 1.4, I doubt there will be another release with SP 2010 out), you may wish to set up STSDEV as a VS Tool. To do so, open VS, and open External Tools.
Accessing External Tools
Here, add a new item, called STSDEV, and select the stsdev executable from its installation directory.
At this point, start your new fancy STSDEV tool from the Tools menu, and we’ll create our very first SharePoint Solution. For the Solution Name, I’ve chosen HelloWorld. For the Parent Directory, I’ve selected C:\Projects\SP.
Shorter paths are important. If you use too long of a path, sometimes things will complain about path length when building your WSP files.
Your signing key is bit of a stumbling block if you haven’t seen it before. This is a .NET thing, and you should know a few important things about it. As a developer, your signing key is your assurance to your user that the code you’ve compiled for them is YOUR code. As such, you should always use the same signing key for each of your projects. If you’re in a team environment, everyone on the team should use the same key. Take a look at C:\Windows\assembly. You’ll notice that System.* have the same Signing Key. (there may be exceptions) Likewise, Microsoft.SharePoint.* have the same Signing Key. That signature is the SharePoint’s Team’s Promise that that DLL came from them. Get a key, stick with it. (unless it is compromised)
Your feature icon is not important for this exercise, and neither is your App Pool.
Your Solution Type determines what sort of solution will be built for you. (a bit obvious) What you select here only determines what is prebuilt for you. You could select a Web Part Solution, and later add Application Pages, and it would work fine.
We’ll select Application Pages with Navigation Feature. Click Create Solution, and click OK in the confirmation window (It’ll take a few seconds to show up.) Let’s go open our new solution at C:\Projects\SP\HelloWorld\HelloWorld.sln. If you’re using Visual Studio 2010, it’ll go through the Convert Solution Dialog. Let it do its thing.
Once opened, you’ll have your Solution available in your Solution Explorer. Let’s clean up what we don’t need. We’ll remove RootFiles\Template\Layouts\AppPage2.aspx and AppPage3.aspx.
We’ll also remove AppPage2.cs and AppPage3.cs. Now let’s go into AppPage1.aspx and make our customizations. For my example, I’ll just make my Main Content PlaceHolder as such:
<asp:Content ID=”Main” contentplaceholderid=”PlaceHolderMain” runat=”server”>
<h4>Hello World</h4>
I am here!
</asp:Content>
And the last change will be in ApplicationPageNavigation.xml
You’ll find there are three CustomAction XML Nodes. Remove the second and third. You will find that they relate to your removed ASPX pages.
Congratulations, you’ve finished your first SharePoint Solution. Set the Solution to DebugDeploy or DebugRedeploy (I prefer DebugRedeploy) and Build Solution!
