SharePoint - Change the item view in a list using SharePoint Designer


This post is to change the item view in a list to format it better

  • Create a list
    • Title - Single line text
    • Body - Multi-line text
    • Banner - Image
  • Open SharePoint designer
  • Navigate to your list
  • Create a new display item form
  •  Look for <xsl:template name="dvt_1.rowview">
  • Paste in this code in that section

<xsl:template name="dvt_1.rowview">
<tr>
<td>
<script type="text/javascript">// 
function ResetRibbon() {
try {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
SelectRibbonTab(&quot;Ribbon.Read&quot;, true);
ribbon.removeChild(&apos;Ribbon.ListForm.Display&apos;);
ribbon.removeChild(&apos;Ribbon.ListForm.Edit&apos;);
} catch (e)
{ }
}
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
try
{
var pm = SP.Ribbon.PageManager.get_instance();
pm.add_ribbonInited(function () {
ResetRibbon();
});
var ribbon = null;
try {
ribbon = pm.get_ribbon();
}
catch (e) { }
if (!ribbon) {
if (typeof (_ribbonStartInit) == &quot;function&quot;)
_ribbonStartInit(_ribbon.initialTabId, false, null);
}
else {
ResetRibbon();
}
},
&quot;sp.ribbon.js&quot;);
}catch(e)
{}
// </script>
<script type="text/javascript">
function ResetRibbon() {
try {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
SelectRibbonTab(&quot;Ribbon.Read&quot;, true);
ribbon.removeChild(&quot;Ribbon.ListForm.Display&quot;);
ribbon.removeChild(&quot;Ribbon.ListForm.Edit&quot;);
} catch (e)
{ }
}
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
try {
var pm = SP.Ribbon.PageManager.get_instance();
pm.add_ribbonInited(function () {
ResetRibbon();
});
var ribbon = null;
try {
ribbon = pm.get_ribbon();
}
catch (e) { }
if (!ribbon) {
if (typeof (_ribbonStartInit) == &quot;function&quot;)
_ribbonStartInit(_ribbon.initialTabId, false, null);
}
else {
ResetRibbon();
}
} catch (e)
{ }
}, &quot;sp.ribbon.js&quot;);
</script>
<style>
.imagediv{
position:relative; 
display:inline-block;
top:10px;
}
.titlediv{
background:rgba(0,0,0,0.75);
color:#fff; 
font-size: 34px;
z-index:100;
position:absolute; 
bottom:2px; 
width:98%;
height:20%;
padding-left:2%;
}
#contentBox {
        margin: 40px auto 0;
        border-radius: 25px;
        position:absolute;
       
left:10px;
    width:100%;
    }
#sideNavBox { 
      visibility:hidden;
}
.ms-viewheadertr { display:none; }
</style> <center>
<div class="imagediv"><img border="0" src="{substring-before(@Image, ', ')}" alt="{substring-after(@Image, ', ')}" width="800px"/>
<div class="titlediv"><xsl:value-of select="@Title"/></div>
</div>
<table border="0" cellspacing="20" width="75%" >
<tr id="idAttachmentsRow">
<td valign="top" class="ms-formbody" width="80%">
<center><SharePoint:FieldLabel ControlMode="Display" FieldName="Attachments" runat="server"/>
<SharePoint:FormField runat="server" id="AttachmentsField" ControlMode="Display" FieldName="Attachments" __designer:bind="{ddwrt:DataBind('u','AttachmentsField','Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Attachments')}"/>
<script>
          var elm = document.getElementById(&quot;idAttachmentsTable&quot;);
          if (elm == null || elm.rows.length == 0)
          document.getElementById(&quot;idAttachmentsRow&quot;).style.display=&apos;none&apos;;
        </script></center>
</td>
</tr>

<tr>
<!-- Body -->
<td width="400px" valign="top" class="ms-formbody">
<xsl:value-of select="@Body" disable-output-escaping="yes"/>
</td>
</tr>
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<tr>
<td colspan="99" class="ms-vb">
<span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span>
</td>
</tr>
</xsl:if>
</table></center>
</td>
</tr>
</xsl:template>



Share on Google Plus

About Tom DeMeulenaere

Highly accomplished information technology professional with extensive knowledge in System Center Configuration Manager, Windows Server, SharePoint, and Office 365.
    Blogger Comment

0 comments:

Post a Comment