Creating data view without knowing code: Focus on you web part
A lot of users don't know how to write a code, but still want to do neat stuff on the share point site.
It's been told that we can create impressive web parts with various functionalities, using designer. But at first, it looks very scary to do it –a lot of 'unreadable' HTML/XSL code. This article will show that it's easy to deploy fully costumed web part without knowing how to code.
I will provide a sample of a basic "Focus on you" web part:
- 'Teaser' web part in the team's page showing general data in a designed way.
- Clicking on "[More]" will link to the item itself.
Please Note: coding with HTML, XSL and CSS is the most recommended and flexible method. I provided here a "No-coding necessary" method in purpose, trying to show as many tips as I can:
Step 1- Create your list
In this sample, I have created a list that includes these columns:
- Focusing on- created 'person or group' column
- Title- using the out of the box column
- Page content- added from existing site column (multiple line of text is possible, but this is much easier to edit for users)
- Page image- added from existing site column (hyper link / picture is possible, but this is much easier to edit for users)
- Birthday- created 'Date and time' column
![]()
Step 2- Create sample items
Now, create some sample items, in order to test it later.
|
*tip*
After creating the basic page content, add it to "Reusable content" to make it easier to deploy:
1. Edit the content, and copy it.
2. Click on "reusable content"  .
3. Choose "open list" and click on "new".
4. Uncheck "Automatic update"- so users will able to add their own contents
5. Paste your content under "reusable HTML" and click OK.
6. Now, when editing new item, users can choose "reusable content" and choose the relevant content to add. |
Step 3 – Create the layout of your web parts
1. Create the layout of your web part, using Word
Note: it is recommended to use HTML and CSS. But I deliberately have drawn a table using Word.
Sample:
|
Focusing on: (Focusing on) |
|
(picture) |
|
[More] |
Step 4- Create the data view web part on your page
1. Right click on the relevant page in designer > check out.
2. Right click on the relevant page > detach from page layout > yes > ok.
3. Double click the page- now you can edit itJ.
4. Click on the requested web part zone > Insert > SharePoint controls > data view
5. Data source library will appear on the right side. Click on your list > show data
6. Choose" title" column > Insert selected field as > multiple item view
We are almost there…..
Step 5- add your layout to the data view
1. Click on the 'Title' column name.
2. Choose TR section and delete it.
3. Copy your table from word.
4. Click on the title on the bottom of the page, and paste.
5. Apply styles:
a. Click on "task panes" toolbar > apply styles.
b. Mark the relevant section, choose a style and apply it.
> 
6. Note: when coping word to designer, make sure to delete all </o: p> marks in code.
7. Save.
Step 6- advanced modification of the web part
1. Click on the arrow on the upper right side of the web part
2. Modify the relevant sections.
Step 6- insert the columns into your layout
3. Map your relevant columns:
a. Right click the column in "data source" on right side > copy item Xpath > paste to notepad.
![]()
b. Your column name is @ColumnName in the end of the line.
4. Mark the column and replace the relevant field, by using this table:
> 
| Column Type |
Replace with |
|
Single line of text |
<xsl:value-of select="@ColumnName "/> |
|
Multiple line of text |
<xsl:value-of select="@ColumnName " disable-output-escaping="yes"/> |
|
Choice |
<xsl:value-of select="@ColumnName "/> |
|
Number / currency |
<xsl:value-of select="format-number(@ColumnName, '#,##0.00;-#,##0.00')"/> |
|
Date and time |
<xsl:value-of select="ddwrt:FormatDate(string(@ColumnName), 1033, 5)"/> |
|
Lookup |
<xsl:value-of select="@ColumnName "/> |
|
Yes /No |
<xsl:choose>
<xsl:when test="@ ColumnName ='1' or msxsl:string-compare(string(@ColumnName),'Yes','','i')=0 or msxsl:string-compare(string(@ColumnName),'True','','i')=0">Yes</xsl:when>
<xsl:otherwise>No</xsl:otherwise>
</xsl:choose> |
|
Person group |
<xsl:value-of select="@ColumnName " disable-output-escaping="yes"/> |
|
Hyperlink |
<a href="{substring-before(@ColumnName, ', ')}">
<xsl:value-of select="substring-after(@ColumnName, ', ')"/>
</a> |
|
Picture |
<img border="0" src="{substring-before(@ColumnName, ', ')}" alt="{substring-after(@ColumnName, ', ')}"/> |
|
Page content (publishing HTML) |
<xsl:value-of select="@ColumnName " disable-output-escaping="yes"/> |
|
Page image (publishing image) |
<img border="0px" alt="" align="middle" src="{substring-before(substring-after(@ColumnName,'src="'),'"')}" /> |
| *tip*
You can change the way columns show in the page (like date and time, number, currency):
 >  > > 
|
| *tip*
You can always make the column a link: <a href="http://requested URL">Put text or <Put the column from the table></a>
For Example: the title will be link to CNN site: <a href="http://cnn.com"> <xsl:value-of select="@Title" /></a>
Sample example: clicking on [more] will link to the item display:
<a href="/sites/sitename/Lists/Focusingonyou/DispForm.aspx?ID={@ID}">
[More]
</a> |
Step 7- admire your self
1. Save.
2. Preview your page in browser.
3. Reattach the page and check in.