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.