Printer Friendly Version

This article is the second in a series that discusses developing a custom Web Part. Be sure to read Part 1 before continuing.

In Part 2, we will continue following the Web Part Development Process. The process is repeated here for review:

• Define requirements
• Create an HTML mockup of the output
• Identify sources of data
• Create form(s) for user input (if necessary)
• Create data access code (if necessary)
• Create output code

Milestone Countdown Web Part, Continued

Our custom Web Part project is to develop a part that outputs a countdown timer to a project milestone, or some other event. This countdown Web Part will provide a visual cue to an upcoming deadline — a very important task that all project managers strive to perform successfully.

Part 1 concluded with the sources of data. In Part 2, I will discuss the forms necessary for user input. Before creating the forms, however, I need to review how to save the data.

Web Part Property Storage

The Web Part framework provides storage of Web Part properties. Properties can be any data type, but the type must be serializable. The Web Part framework will convert the property data to XML and store it with the Web Part page. Web Part properties are added to the Web Part class just like any other properties of any other object. Attributes are then applied to the properties. These attributes are inspected by the Web Part framework and control how the properties are initialized, stored, and displayed.

Private Const _defaultText As String = ""

Dim _text As String = _defaultText

<Browsable(True), Category("Countdown"), DefaultValue(_defaultText), _
WebPartStorage(Storage.Shared), _
FriendlyName("Text"), Description("Text to describe the _
milestone. The text is displayed above the countdown timer.")> _
Property [Text]() As String
  Get
    Return _text
  End Get
  Set(ByVal Value As String)
    _text = Value
  End Set
End Property

Article Tools

Print this article E-mail this article Discuss this article Related resources

The other Web Part properties are created in a similar manner. The image height and width can be specified as integers. I used a string type for the milestone date because it makes the storage (serialization) process much easier. The conversion from/to a date data type can occur during rendering.

Create Form(s) for User Input (if necessary)

The framework also provides for capturing user input and applying that input to Web Part properties. This is accomplished using the Tool Part class. The image below shows the Tool Pane open with the properties of the Site Image Web Part displayed. The Site Image Web Part has a Tool Part titled Image, which is at the top of the Tool Pane. At the bottom of the Tool Pane are buttons that the end-user can use to complete the changes.

Properties of Site Image Web Part.

The Tool Part is displayed in a manner similar to the Web Part — the Tool Part must render its output. At this point, we should prepare a mockup of the Tool Pane output. For the Milestone Countdown Web Part, I am creating two Tool Parts. The image attributes (URL, text, width, height) are optional, so I will separate those attributes into their own Tool Part.

HTML Mockup
I want my Tool Parts to look like the Microsoft-supplied ones. I do not want to confuse the end-users by having two different user interfaces. The easiest way to mimic the Microsoft formatting is to view the HTML source of an existing Tool Part. The HTML for my Image Properties Tool Part:

<DIV class=ms-TPBody>

<DIV class=UserGeneric>
  <DIV class=UserSectionHead>Image Link</DIV>
  <DIV class=UserSectionBody>
    <DIV class=UserControlGroup>
      <INPUT class=UserInput style="WIDTH: 175px" ms-TlPnWiden="true">
    </DIV>
  </DIV>
  <DIV class=UserDottedLine style="WIDTH: 100%">>/DIV>
  <DIV class=UserSectionHead>Alternate Text for image>/DIV>
  <DIV class=UserSectionBody>
    <DIV class=UserControlGroup>
      <INPUT class=UserInput style="WIDTH: 175px" ms-TlPnWiden="true">
    </DIV>
  </DIV>
  <DIV class=UserDottedLine style="WIDTH: 100%">>/DIV>
  <DIV class=UserSectionHead>Image Width>/DIV>
  <DIV class=UserSectionBody>
    <DIV class=UserControlGroup>
      <INPUT class=UserInput style="WIDTH: 50px" >
    </DIV>
  </DIV>
  <DIV class=UserDottedLine style="WIDTH: 100%">>/DIV>
  <DIV class=UserSectionHead>Image Height>/DIV>
  <DIV class=UserSectionBody>
    <DIV class=UserControlGroup>
      <INPUT class=UserInput style="WIDTH: 50px">
    </DIV>
  </DIV>
</DIV>

</DIV>

The overall Tool Part structure can be summarized as follows:

• The entire Tool Part is enclosed in a DIV tag with a CSS Class of UserGeneric, and this tag is enclosed in another DIV tag with a CSS Class of ms-TPBody.

• For each of the fields in the form:
  • the label is enclosed in a DIV tag with a CSS Class of UserSectionHead

  • the field UserControlGroup DIV is enclosed in a DIV tag with a CSS Class of UserSectionBody

  • the input box is enclosed in a DIV tag with a CSS Class of UserControlGroup (which provides a slight indent from the left margin)

  • a DIV tag with a CSS Class of UserDottedLine separates the fields

  • long input boxes have an attribute of "ms-TlPnWiden=true"

I omitted some attributes from the HTML. The id and name attributes do not affect the display. However, the id attribute is required in the final code. The value will be determined at runtime.

Go to page: 1 2

Printer Friendly Version