Every MS CRM consultant/Developer at some point will be asked to create a custom webpage that is launched either from within MS CRM or is loaded into MS CRM. And even though it might not be an explicit requirement you know its going to feel good if you make it look and feel like MS CRM.

So to help anyone who hasn’t done this before I thought I’d give you a helping hand.
This is what the finished product looks like.

Gridview screenshot

Ok. So lets get our hands dirty. First have a look at the blue banner at the top of MS CRM detail forms.

This is the code that allows me to create that.

<div>
        <table id="header" class="tableheader">
            <tr><td class="header">Put your header here.</td></tr>
            <tr><td class="headerdetail">Put your screen details here</td></tr>
        </table>
</div>

This is what my CSS looks like

.header
{
     font-family:Tahoma;
     font-size:14pt;
     font-weight:Bold;
     padding-left:10px;
     padding-top:10px;
}

.headerdetail
{
     font-family:Tahoma;
     font-size:11pt;
     font-weight:normal;
     padding-left:10px;
     padding-bottom:15px;
}

If you want to find out more about how to make your html pages look and feel like MS CRM you should have a look at the “crm4 ux design guide.pdf” file that comes with the MS CRM 4.0 sdk.

Lets have a look at the grid now. As you might know the MS CRM grid header is completely seprate from the grid. So lets start by building the gridview header.

<table class=”gridtable”>
    <tr class=”gridHeader”>
         <td width=”5%” style=”height: 16px”></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”20%” style=”height: 16px”><b>Street1</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”15%” style=”height: 16px”><b>Street2</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”15%” style=”height: 16px”><b>Street3</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”10%” style=”height: 16px”><b>City</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”10%” style=”height: 16px”><b>County</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”10%” style=”height: 16px”><b>Postcode</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”10%” style=”height: 16px”><b>Country</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td style=”height: 16px”><img src=”img/grid_Refresh.gif” /></td>
    </tr>
</table>

I’ve copied the images from the MS CRM images folder which can be found at “C:\Program Files\Microsoft Dynamics CRM Server\CRMWeb\_imgs” on the server where you’ve installed MS CRM.

.gridHeader
{
    background-color:#f0f0f0;
    font-family:Tahoma;
    font-size:11px;
    font-weight:normal;
    border-bottom-color:#999999;
    border-left-color:#d4d0c8;
    border-right-color:#d4d0c8;
    border-top-color:#d4d0c8;
}
.gridtable
{
    width:100%;
    border:1px solid #999999;
}

And now for the GridView. I’ve put my gridview in a div because I want the scroll bar to appear when the grid overflows. Also note that since i’ve already have a header I’ve removed the gridview header.

<div class="griddiv">
            <asp:GridView ID="GridView1" DataKeyNames="customeraddressid"
            runat="server" Width="98%" AutoGenerateColumns="False"
            ShowHeader="False" OnRowCreated="GridView1_RowCreated">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Literal ID="RadioButtonMarkup"
                            runat="server"></asp:Literal>
                        </ItemTemplate>
                        <ItemStyle Width="5%" />
                    </asp:TemplateField>
                    <asp:BoundField DataField="line1" >

                        <ItemStyle Width="20%" />

                    </asp:BoundField>
                    <asp:BoundField DataField="line2" >
                        <ItemStyle Width="15%" />

                    </asp:BoundField>
                    <asp:BoundField DataField="line3" >
                        <ItemStyle Width="15%" />

                    </asp:BoundField>
                    <asp:BoundField DataField="city" >
                        <ItemStyle Width="10%" />

                    </asp:BoundField>
                    <asp:BoundField DataField="county" >
                        <ItemStyle Width="10%" />

                    </asp:BoundField>
                    <asp:BoundField DataField="postalcode">
                        <ItemStyle Width="10%" />
                    </asp:BoundField>
                    <asp:BoundField DataField="country" >
                        <ItemStyle Width="10%" />
                    </asp:BoundField>

                    <asp:BoundField DataField="customeraddressid"
                    Visible="False" />
                </Columns>
            </asp:GridView>
        </div>

Lets now put a line under the grid view. Nothing fancy here.

<hr class=”line”/>

Finally lets make our buttons look like MS CRM buttons.

<table align=”right”>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr>
                <td>

                        <asp:Button ID=”Addbtn” runat=”server” Text=”Add”

                        CssClass=”aspbutton” OnClick=”Addbtn_Click” />

                </td>

                <td>

                        <input type=”button” id=”Cancelbtn”

                        onclick=”closewindow();” value=”Cancel”

                        class=”aspbutton” />

                </td>

        </tr>
</table>

The css for the buttons below.

.aspbutton
{
    font-size:11px;
    font-family:Tahoma;
    height: 20px;
    width: 84px;
    text-align: center;
    cursor: pointer;
    border: 1px #3366CC solid;
    background-color: #CEE7FF;
}

By the way please do not request source code for this. There is not code to give away anymore. What you see on this page is what you get. (Thanks).

Advertisements