forge

How to customize the output of a CorasWorks Web Part

Most CorasWorks’ web parts have a hidden property called Display which can be added to the DWP file which will change the basic display behavior of the web part so that it emits the specific output that you’re looking for.  Because the display tag is hidden it’s not available from the tool pane and must be added to the DWP file directly.

Exporting the DWP

The first step is to configure the CorasWorks component so that it is correctly returning the right data and export that web part as a DWP so there will be a file that is correctly configured.  To do this, make sure that the title bar for the web part is shown.  If the title bar isn’t shown, enter Design mode by clicking on Modify Shared PageDesign this Page. Next, click the down arrow on the right hand side of the web part title bar.  On the context menu select Export…, save the file when prompted.

Creating the Content

The next step to customizing the output is to create the format for the replacement.  The basic format for the replacement is a set of HTML fragments each terminated with a <END> “tag”.  The orders of these elements is header, item (non-selected), footer, and (when appropriate) a final section for selected items.  The Special Site Navigation component is the only component which has a section for selected items at this point.

In each of these sections there are several replacement strings which will be replaced with the value contained in the associated field or property.  An example of the content to make a spreadsheet roll up look like a linked list appears below:

<!–Header//–>

<table border=”0″ width=”100%”>

<END>

<!–Body//–>

<tr><td style=”padding-bottom: 5px” class=”ms-vb”><img src=”/_layouts/images/square.gif”></td><td style=”padding-bottom: 5px” class=”ms-vb”><a HREF=”<%Link%>”><%Display%></a></td></tr>

<END>

<!–Footer//–>

</table>

<END>

Known Replacement Strings

For a list the replacement strings are the field names surrounded by a <% and %>.  You can see this in the above example of <%Link%> and <%Display%> — these are both fields in the lists being rolled up by CorasWorks’ web part.

For special site navigation, there are only three replacement strings that are valid:

  • PageURL –  The Url of the page to link to.  This value comes from the underlying navigation list.
  • PageTitle – The text to display for the page.  In other words, the friendly name for the page. This value comes from the underlying navigation list.
  • Target – The target to open the window in, from the web part properties.

Adding the Tag

Adding the tag to the XML is simple, but is very specific.  First, the value must be encoded or placed in a CDATA section so that it is not interpreted as a part of the XML.  The best way to do this is the CDATA section so the Display property will still be readable.

First, add a new <Display></Display> tag set prior to the closing </WebPart> tag in the DWP file.  Next copy the xmlns attribute from the last tag prior to the new display tag you just added and add that attribute to the display tag.  Each web part uses it’s namespace for the Display tag.  You must provide this xmlns attribute for the Display node or it will not work.

In the middle of the <Display></Display> tag set add a CDATA node by adding <![CDATA[ ]]>.  In the middle of the two brackets ‘[ ]’ add the content that you created above.

Save the DWP file.

Trying the modified file

The next step is to import the modified DWP file.  From the Modify Shared Page menu select Add Web Parts and Import.  Click the browse button and locate the DWP file that you modified.  Click the Upload button to upload the control.  Drag the control on to the page from the tool pane.

The display of the links or navigation should reflect the updated HTML that you provided.

Troubleshooting

If for some reason you don’t see any modified display make sure that your <Display> tag has the correct xmlns attribute.  It should match the other xmlns attributes in the file.