Irony

I was reading my last post, apologising for how long it had been since I posted and how much harder I was going to try to get more posts up…as you may have guessed, I still haven’t put a post up in nearly a year. As for why, I’ve been pulled off SharePoint development and am working on redoing the company website. Needless to say, I haven’t had a lot of time to do anything cutting edge in SharePoint. I may, and I stress the ‘may’ part, start work in SharePoint again soon. We’re currently in the middle of migrating the SharePoint server to new server hardware and I hope to start working in the application after that takes place…

I’ll try to keep you posted. Thanks to everyone who still reads this! I get comments on a regular basis. If you need help with something, you can email me directly as well.

January 11, 2010 at 1:11 pm Leave a comment

Back from the Dead

I am back, sort of. I came back a couple of weeks ago but the company has me working hard on some documentation. I do all of the documentation in a program called MadCap Flare. I just dusted off and launched SharePoint Designer for the first time in over a month today…

Give me a couple of days to get everything back into place in my brain (I was looking at some notes to try to figure out where I left off and I am totally lost). I am going to be pushing hard on the sales management section of my web application over the next month or so.

I really missed blogging and I realised that my documentation role is taking more and more time from SharePoint Design (and therefore SharePoint Blogging). To that end, I’ve created another blog about personal finances and budgets, my second favorite personal torture.

If you are into that kind of stuff, I should have some posts up at the site very soon (http://splittingcents.wordpress.com). As for this blog, I think I might attack creating some examples and screenshots for the new posts so be prepared for some new stuff from me!

September 24, 2008 at 5:53 pm Leave a comment

Update: AWOL

Sorry, I haven’t had the responsibility of being a blogger before. I never even realised that if I drop off the face of the web for a while, people keep reading my stuff ūüėČ

I was away for a while, I am sort of back. I have a big family wedding coming up next week and I am the impromptu planner now. Needless to say, I am completely lost. I have approved the recent comments and will post replies to them, most likely tomorrrow.

Sorry for not posting that I would be gone. Good luck with your designs!!

August 18, 2008 at 9:39 pm Leave a comment

Use Javascript Redirects to hide SharePoint default sites

I’ve been working diligently on the new web application and I needed to record this little tip. I am creating new forms for entering items¬†and viewing of lists, but users can still get to the default SharePoint pages through areas I haven’t customised – the search results is currently the easiest – but also the bread crumb trail on some pages.

To get around this, I am using the Javascript redirect and placing it in the <head> section of the default SharePoint pages for my lists – so even if I miss a link somewhere – the user never sees the SharePoint page. They are automaticaly redirected to the custom form I spent hours designing. After all, they really do need to see my spectacular work don’t they?

I started by creating a Content Place Holder in the master page so it would be available to all pages – I find this useful for inserting ANY Javascript and not just for this tip. Just before the closing </head> tag in the master page, I added the following line to create the place holder:

<asp:ContentPlaceHolder id=”PlaceHolderAdditionalPageHead” runat=”server”/>

Now, this is probably pretty basic to some of you, but others might not know how to add these to the master page. Any code on a SharePoint page that contains content place holders, must be in a content place holder¬†– so don’t just try to slap the Javascript on the aspx page.

On the aspx page, for example dispform.aspx, I inserted the following code – just after the declarations at the top of the page –¬†I want it to be the first thing that loads on the page:

<asp:Content ContentPlaceHolderID=”PlaceHolderAdditionalPageHead” runat=”server”>
¬†<script type=”text/javascript”><!–
location.href = ‘http://sharepointsite/sites/webapplication/Lists/List name/customform.aspx’;
// –></script>¬†
</asp:Content>

As you can see from the code, the Javascript just changes the location.href for the page to a new address and the user is instantly redirected. Hope this helps to hide any nasty SharePoint pages that jump in and ruin your nice designs.

Thanks for Reading

July 18, 2008 at 5:36 pm 4 comments

Site Theme Change

I had to change the site theme because it was cutting off items I was posting. I apologise in advance, hopefully it won’t become a regular issue (I personally hate it when sites suddenly change- aaaagh).

Thanks for understanding…

June 27, 2008 at 2:51 pm Leave a comment

CSS Table Cell Borders

Just a quick post to store a line of code I need, but others may find helpful. I have some Multiple Item Views that are styled using CSS to have a border. The problem is, if there is no value in the field, the table cell doesn’t get created so the borders don’t exist. This issue has existed in HTML for ages and it could be easily remedied by placing a ‘space’ in the cell as a default value. The code for space in HTML is “&nbsp;” (without the quotes). But in a SharePoint dataview you have to do something slightly different:

SharePoint Dataview table cells can be padded with this line of code:

¬†<xsl:text xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime” ddwrt:nbsp-preserve=”yes” disable-output-escaping=”yes”>&amp;nbsp;</xsl:text>

You would add the code within the <td> brackets of the table cell. For example:

<td width=”75%” class=”ms-vb”>
¬†¬†¬†¬†¬†¬†¬†<xsl:value-of select=”@JobTitle” />
 </td>

Would be changed to:

<td width=”75%” class=”ms-vb”>
¬†¬†¬†¬†¬†¬†¬†<xsl:value-of select=”@JobTitle” />¬†<xsl:text xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime” ddwrt:nbsp-preserve=”yes” disable-output-escaping=”yes”>&amp;nbsp;</xsl:text>
</td>

Now if the table cell contains no value, it will still contain a space and therefor the table cell will still render in the HTML when the page is displayed. Just be aware that when a user copies and pastes out of the cell, there will be an additional space tacked on to the end of the selection.

Hope that helps

June 27, 2008 at 2:45 pm 1 comment

Web Application Design (part 2)

I was on a roll today so I thought that I might as well get part 2 going.

In part 1, I covered the steps for creating and customising the display and edit forms for a custom list on a single aspx page. I now want to combine the new item form for the custom list on the same aspx page and give the user a button to show the new item form and hide the edit form.

Step One: Add the New Item Form

We need to add the Data View Web Part for a New Item Form after the edit form.

  1. Locate the end tag for the edit form: </WebPartPages:DataFormWebPart>.
  2. Add a <br /> tag immediately after the close tag.
  3. Insert a Data View.
  4. Select the Customer Status list from the Datasource Library.
  5. Hold CTRL and select the fields you want to add.
  6. Click on the Insert Selected Fields As button and select New Item Form.

SharePoint will insert the new item form on the page. The forms on the page are now fully functional and the user can edit items in the grid and add items to the grid from the same page. However, the usability for this page is very poor. The user can select an item in the display grid and then enter the changes in the new form thinking they are editing the existing item (like an old password/new password screen) and when they save they accidently create a new record. There are other usability issues as well, but we can address them all by hiding the edit form when the new form is in use.

Step Two: Create Containers for the Forms

We have two forms on our screen that need to be identified from each other: the edit form and the new form. Those two forms also need to be hidden or shown depending on the situation. To accomplish this, I place each of the Web Parts with in a DIV.

  1. Locate the start tag for the edit form: <WebPartPages:DataFormWebPart ….
  2. Insert the following code BEFORE the start tag: <div id=”EditForm” style=”display: block”>
  3. Locate the end tag for the edit form: </WebPartPages:DataFormWebPart>
  4. Add the following code AFTER the end tag: </div><!–close div#EditForm–>

With these four simple steps, I have created a container around the web part. Now we need to create the container around the new form. I have highlighted the subtle differences:

  1. Locate the start tag for the¬†new form: <WebPartPages:DataFormWebPart ….
  2. Insert the following code BEFORE the start tag: <div id=”NewForm” style=”display: none”>
  3. Locate the end tag for the new form: </WebPartPages:DataFormWebPart>
  4. Add the following code AFTER the end tag: </div><!–close div#NewForm–>

Note: Once you set the display attribut to “none”, you will no longer be able to see the form in design view. If you need to make changes, you can edit the form in code view or temporarily change the display value to “block”.

Sidebar: Naming Items
You should always give your items unique ids or names on a web page, especially when we use JavaScript or CSS. Properly identified items are easy to locate and manipulate in the code. If I have 30 tables on a screen, it can take forever to locate a specific one. If I name the tables, I can do a CTRL+F to locate the name quickly and efficiently. You can also apply CSS styles directly to named items.
The¬†DIV¬†tag is used to denote a “division” on the page.¬†In normal web page design, I would place¬†the banner in¬†one div, the body in¬†a separate div, and the¬†footer in another div. I can refer to the¬†sections¬†of the document for formatting and style¬†by their¬†div (container).¬†For example the following CSS:¬†

div#footer a {text-decoration:none;}

The CSS would style ANY <a> tag withing the Footer div as having no underline. Any <a> tags in the body or other div would not be affected.

Sidebar: Nested Divs
Step 4 contains an HTML comment tag <!–your text here–>. The HTML comment is ignored by the browser so that user’s cannot see it, but it helps to identify the tag you are¬†working with. When you start to make complicated web pages, you will notice that you end up with nested divs, one div inside of another div, and at the end of your site you will see code like this:

           </div>
        </div>
    </div>

Unfortunately, you won’t know which div belongs to which starting tag. I always label my closing divs so they look like this:

¬†¬†¬†¬†¬†¬† </div><!–close div#banner–>
¬†¬† </div><!–close div#navbar–>
</div><!–close div#header–>

Back to the example…¬†

Step Three: Create A New Button

IMPORTANT: Make a backup copy of your page before proceeding with this next step. Sometimes when I add the extra row to the table, it causes the Web Part Connection to stop working.

Now that we have the forms inside of their own identifiable containers, we need a button for the user to click to trigger the JavaScript code.

  1. Right-click in the top row of the display form and select Insert > New Row Above.
  2. Select all of the cells in the new empty row and right-click and select Modify > Merge Cells.
  3. Switch to code view and locate the <td> tags for the row (only one column now).
  4. Add the following code in between the <td> tags: <input class=”tbb” id=”tbb” type=”button” value=”New”/>

The class and id attributes in the <input /> tag are optional; I use the class and id attributes in the <input /> tag to identify the button for my styling (tbb stands for tool bar button). We now have a nice shiny “New” button¬†at the top of our display¬†form.

Step Four: Make that Button Work

The¬†New button we created in¬†Step Three¬†doesn’t really do anything, so let’s¬†give it some power.¬†

  1. Locate the <input /> tag.
  2. Change¬†code to look like this: <input class=”tbb” id=”tbb” type=”button” value=”New”¬† onclick=”document.getElementById(‘EditExistingCodeForm’).style.display =’none’;document.getElementById(‘AddNewCodeForm’).style.display =’block’;”/>¬†

Okay, I know, I kind of surprised you with that one. Let’s break the code down to see what it does:

<input class=”tbb” id=”tbb” type=”button” value=”New”¬†

There is nothing¬†scary¬†here, we’re telling the HTML to¬†create a button and label it “New”.

onclick=”document.getElementById(‘EditForm’).style.display =’none’; document.getElementById(‘NewForm’).style.display =’block’; “/>

When the button is clicked, the EditForm div’s display attribute is set to “none” and¬†the NewForm div’s display attribute is set to “block”. In other words, the edit form disappears and the new form appears. You now have a New button that, when clicked, hides the edit form and shows the new form so the user can enter new items into the list.

Step Five: Set the Focus

I found one issue with the current set up; when the user clicks the New button the focus remains on the button and the user has to move the mouse down to the form. Since we are designing with usability in mind, this is a definite no-no.

The code for setting the focus using JavaScript is:

¬†document.FORMNAME.ID.focus();”

First, we need to identify the name of the form. You can look around for it if you want but, I can save you some time and tell you that SharePoint creates one form for the whole page. The form is called “aspnetForm”.

Secondly, we need to identify the field in the new form. If you click on the field in SharePoint Designer, and look at the code, you will see the following:

<SharePoint:FormField runat=”server” id=”ff1{$Pos}” ControlMode=”New” FieldName=”Title” __designer:bind=”{ddwrt:DataBind(‘i’,concat(‘ff1′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@Title’)}” />

The only part of that code we are interested in is the id attribute (see how it get’s easier to understand the code behind the site?). The only problem is that the id attribute contains a SharePoint variable. The value in the variable isn’t defined until the server runs the page. So, I viewed the source of the page in the browser and located the same line of code:

<input name=”ctl00$mainContent$g_0e261cef_df83_4297_aa14_312ac818785e$ff1_new$ctl00$ctl00$TextField” type=”text” maxlength=”255″ id=”ctl00_mainContent_g_0e261cef_df83_4297_aa14_312ac818785e_ff1_new_ctl00_ctl00_TextField” title=”Counter” class=”ms-long” />

If you are trying to locate this in the source of your page, follow these steps:

  1. Preview the page in a browser.
  2. View the source (in IE, right-click on the page an select View Source).
  3. Press CTRL+F and search for the label. In our example, the label for the first field is called¬†“Status:”, so I searched for that.
  4. The label will be contained with <td> tags. The next entry after the¬†</td> tag will be field we are looking for.¬†Since it¬†is an¬†text input box, the tag will be <input> and it will have an attribute of type=”text”.¬†

If you compare the code in SharePoint Designer with the code from the browser, you can see that the SharePoint code has been ‘run’ on the server and the result is the HTML tag for the field. We are interested in the id attribute only;

id=”ctl00_mainContent_g_0e261cef_df83_4297_aa14_312ac818785e_ff1_new_ctl00_ctl00_TextField”

That is the id of the field we want to set the focus on. So now let’s combine the formname and the id for the field and¬†write the JavaScript:

 document.aspnetForm.ctl00_mainContent_g_0e261cef_df83_4297_aa14_312ac818785e_ff1_new_ctl00_ctl00_TextField.focus();

Now we need to add it to our New button:

<input class=”tbb” id=”tbb” type=”button” value=”New”¬† onclick=”document.getElementById(‘EditExistingCodeForm’).style.display =’none’;document.getElementById(‘AddNewCodeForm’).style.display =’block’; document.aspnetForm.ctl00_mainContent_g_0e261cef_df83_4297_aa14_312ac818785e_ff1_new_ctl00_ctl00_TextField.focus();”/>

You now have a New button that, when clicked, will hide the edit form, show the new form and set the focus to the first field. As you may have already guessed, being able to set the focus to a specific field is a valuable tool when designing your own web applications.

This concludes part 2 of my Web Application. The next step will be to create additional functionality for the page – adding a delete button, print button, anything else I can come up with to make the page more user friendly.

June 11, 2008 at 7:15 pm Leave a comment

Older Posts