EPiServer File Manager and File Summary

Posted on April 2, 2010 by Frederik Vig in EPiServer

One hidden little feature that is nice to know about is the filesummary.config file. When you edit a file in EPiServer’s File Manager, you can edit the data for that file (simply right-click on the file and choose Edit File Summary).

Edit File Summary in EPiServer Edit Mode

Which gives us this form.

Edit File Summary in EPiServer Edit Mode form

This is the standard form that comes with EPiServer.

FileSummary.config

We can easily change the form by editing FileSummary.config. If we open it in a source code editor, the code looks something like this.

<root xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <model>
    <instance>
      <Author />
      <DocumentType />
      <Category />
      <Publisher />
      <Description />
    </instance>
  </model>
  <table id="id_matrix" border="0">
    <tr>
      <td class="EP-tableCaptionCell">
        <label for="id_field2" id="id_field1" style="margin-bottom: 10px;">Author</label>
      </td>
      <td valign="top">
        <xforms:input ref="Author" value="" id="id_field2" size="40" class="episize240" />
      </td>
    </tr>
    <tr>
      <td class="EP-tableCaptionCell">
        <label for="id_field13" id="id_field6">Publisher</label>
      </td>
      <td valign="top">
        <xforms:input ref="Publisher" value="" id="id_field13" size="-1" class="episize240" />
      </td>
    </tr>
    <tr>
      <td class="EP-tableCaptionCell">
        <br />
        <label for="id_field12" id="id_field5">Type of document</label>
      </td>
      <td valign="top">
        <xforms:select1 appearance="full" ref="DocumentType" id="id_field12">
          <xforms:item>
            <xforms:label>Whitepaper</xforms:label>
            <xforms:value>Whitepaper</xforms:value>
          </xforms:item>
          <xforms:item>
            <xforms:label>Technote</xforms:label>
            <xforms:value>Technote</xforms:value>
          </xforms:item>
          <xforms:item>
            <xforms:label>Manual</xforms:label>
            <xforms:value>Manual</xforms:value>
          </xforms:item>
        </xforms:select1>
      </td>
    </tr>
    <tr>
      <td class="EP-tableCaptionCell">
        <br />
        <label for="id_field121" id="id_field5">Category</label>
      </td>
      <td valign="top">
        <xforms:select appearance="full" ref="Category" id="id_field121">
          <xforms:item>
            <xforms:label>Product1</xforms:label>
            <xforms:value>Product1</xforms:value>
          </xforms:item>
          <xforms:item>
            <xforms:label>Product2</xforms:label>
            <xforms:value>Product2</xforms:value>
          </xforms:item>
          <xforms:item>
            <xforms:label>Product3</xforms:label>
            <xforms:value>Product3</xforms:value>
          </xforms:item>
        </xforms:select>
      </td>
    </tr>
    <tr>
      <td class="EP-tableCaptionCell">
        <label for="id_field14">Description</label>
      </td>
      <td valign="top">
        <div id="id_field8">
          <xforms:textarea cols="37" rows="6" ref="Description" value="" id="id_field14" size="-1" />
        </div>
      </td>
    </tr>
  </table>
</root>

A combination of XML , HTML and XForm for storing the data. To add a new property we simply need to update the markup a little. Lets start by adding a new element inside model and instance.

<root xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <model>
    <instance>
      <Author />
      <Website />
      <DocumentType />
      <Category />
      <Publisher />
      <Description />
    </instance>
  </model>
...

Notice that I’ve added the <Website /> tag. We also need to insert a new row in the table with a XForm input element.

<tr>
  <td class="EP-tableCaptionCell">
	<label for="id_field31" id="id_field30" style="margin-bottom: 10px;">Website</label>
  </td>
  <td valign="top">
	<xforms:input ref="Website" value="" id="id_field31" size="40" class="episize240" />
  </td>
</tr>

If we save and go back to Edit Mode and the File Manager, the form should look something like this.

Edit File Summary in EPiServer Edit Mode update form with website field

For more information on XForm see: Developing with XForms.

Accessing the data

We can now access the property data by creating a new UnifiedFile instance of our file.

var file = System.Web.Hosting.HostingEnvironment.VirtualPathProvider.GetFile("/Global/Images/Portrait Employees/Robert.jpg") as UnifiedFile;

When we type file. in Visual Strudio, we see that we have access to a few public properties. The one we’re interested in is the Summary property.

The Summary property exposes a IUnifiedSummary type, which gives us access to properties like Author, Comments, Category etc, and more importantly a Dictionary for accessing other properties we create (like Website).

file.Summary.Dictionary["Website"]

Putting it all together

Here is a simple example that shows a picture with a caption.

<div class="featured">
	<img src="<%= Image.VirtualPath %>" alt="<%= Image.Summary.Title %>" />
	<p>
		<a href="<%= Image.Summary.Dictionary["Website"] %>"><%= Image.Summary.Author %></a>
		<em><%= Image.Summary.Dictionary["Description"]%></em>
	</p>
</div>
 
public UnifiedFile Image
{
	get; private set;
}
 
protected override void OnLoad(System.EventArgs e)
{
	base.OnLoad(e);
 
	this.Image = System.Web.Hosting.HostingEnvironment.VirtualPathProvider.GetFile("/Global/Images/Portrait Employees/Robert.jpg") as UnifiedFile;
}

A little CSS for making it look pretty.

.featured p
{
	background-color: rgba(0,0,0,.7);
	display: block;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	font-family: Georgia, serif;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.3em;
	color: #ccc;
	margin-bottom: 0;
}
.featured
{
	width: 40%;
	overflow: hidden;
	position: relative;
}
 
.featured p a
{
	display: block;
	padding: 2px 10px 0 10px;
	font-weight: normal;
	font-style: italic;
	color: #fff;
}
.featured p em
{
	display: block;
	padding: 0 10px 2px 10px;
	font-style: normal;
	color: #e3c887;
}

And here’s the result!

Result with CSS

Related Posts: