Add Map or Image Icon to Custom Page Web Part List Column

Tool:  SharePoint Designer 2010

Challenge

A recent client needed a map icon shown in a column in place of the long URL in the web part view.  This would provide a nice visual and remove the clutter of an impersonal web address.

There were a total of three (3) web parts on the page and we needed the map icon represented in just one of them.

Solution

SharePoint Designer 2010 will provide us the ability to customize the web part on the page just as we want.

Setup
1.  Upload your map icon into the site image/picture library
2.  Create page with web part list columns

Steps
1.  Open SPD 2010
2.  Select Site Pages 
     a.  right-click on the page name and select Check Out
     b.  select the page name > select Edit File
     * wait for the page to load
3.  Add new column to the right of the URL column
     a.  place the cursor in the URL column
     b.  select the top menu tab Table > Insert Right
4.  Add the map icon
     a.  place the cursor in the new detail column
     b.  select the top menu tab Insert > Picture
     c.  navigate to the source image location
5.  Add the hyperlink
     a.  select the first map icon in the new detail column
     b.  select the top menu tab Insert > Hyperlink
     c.  replace the Address contents with your list column name
          format:  {@MapLink}
     d.  select the appropriate Target Frame as needed
     e.  select OK
6.  Remove the original URL column
     a.  right-click in the URL column
     b.  select Delete > Delete Columns
7.  Close the page > Save changes
8.  Check In the Page
     a.  select Site Pages
     b. right-click on the page name and select Check In
8.  Open the page in the browser to verify functionality
9.  Reset any web part connections as needed

Hyperlink / Map Icon Code

<a href=”{@MapLink}” target=”_blank”><img alt=”{@MapLink.desc}” src=”/sites/SITENAME/PublishingImages/MAPICON.gif” width=”20″ height=”20″ style=”border:0″ /></a>

MapLink is the list column containing the full map URL (ie; Bing or Google Map)

References

http://office.microsoft.com/en-us/sharepoint-designer-help/add-a-hyperlink-to-a-data-view-HA010240364.aspx

How has SharePoint affected you?

Advertisements
This entry was posted in Lists, SharePoint Designer, Web Parts. Bookmark the permalink.

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