Web Application Design (part 2)

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

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.

Advertisements

Entry filed under: SharePoint Designer, SharePoint Tips and Tricks, Web Application. Tags: , , , , , , , , .

Web Application Design (part 1) CSS Table Cell Borders

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed



%d bloggers like this: