Wrap a grouping of fields

Topics: Customizing Orchard
Jan 30 at 7:20 PM
[Using Orchard v.1.7.1.0]

I am having trouble understanding how to wrap sets of content in Orchard.

I have created a set of link fields in a content type called "Meeting". I have created a query called "All Meetings". I am rendering this projection by way of a widget on a single page.

Using templates, I have changed the default layout of the content with a template called "Fields.Link-Meeting". This template wraps each link field in a <li> tag. This is what the template looks like:
@using Orchard.Fields.Settings
@using Orchard.Utility.Extensions;
@{
    string name = Model.ContentField.DisplayName;
    LinkFieldSettings settings = Model.ContentField.PartFieldDefinition.Settings.GetModel<LinkFieldSettings>();
    string text = Model.ContentField.Text;
    switch(settings.LinkTextMode) {
        case LinkTextMode.Static:
            text = settings.StaticText;
            break;
        case LinkTextMode.Url:
            text = Model.ContentField.Value;
            break;
        case LinkTextMode.Optional:
            if (String.IsNullOrWhiteSpace(text)) {
                text = Model.ContentField.Value;
            }
            break;
    }
}
<li class="link-field link-field-@name.HtmlClassify()">
    <span class="value"><a href="@Model.ContentField.Value"@if (!string.IsNullOrWhiteSpace(Model.ContentField.Target)) { <text>target="@Model.ContentField.Target"</text> }>@text</a></span>
</li>
This is what gets rendered in the DOM:
<article class="content-item meeting" shape-id="58">
    <header shape-id="58" class="li_show">
        <h4 class="showclick" shape-id="70">Meeting1</h4>
        <div class="metadata" shape-id="58"></div>
    </header>

<li class="link-field link-field-link1 li_show" shape-id="72">
    <span class="value" shape-id="72"><a href="http://www.website.com/documents/blah.pdf" shape-id="72">Docname</a></span>
</li>
<li class="link-field link-field-link2 li_show" shape-id="73">
    <span class="value" shape-id="73"><a href="http://www.website.com/documents/blah.pdf" shape-id="73">Docname</a></span>
</li>
<li class="link-field link-field-link3 li_show" shape-id="74">
    <span class="value" shape-id="74"><a href="http://www.website.com/documents/blah.pdf" shape-id="74">Docname</a></span>
</li>

<li class="link-field link-field-link4 li_show" shape-id="75">
    <span class="value" shape-id="75"><a href="http://www.website.com/documents/blah.pdf" shape-id="75">Docname</a></span>
</li>

<li class="link-field link-field-link5 li_show" shape-id="76">
    <span class="value" shape-id="76"><a href="http://www.website.com/documents/blah.pdf" shape-id="76">Docname</a></span>
</li>

<li class="link-field link-field-link6 li_show" shape-id="77">
    <span class="value" shape-id="77"><a href="http://www.website.com/documents/blah.pdf" shape-id="77">Docname</a></span>
</li>
<li class="link-field link-field-link8 li_show" shape-id="78">
    <span class="value" shape-id="78"><a href="http://www.website.com/documents/blah.pdf" shape-id="78">Docname</a></span>
</li>
</article>
How do I wrap this set of li's in a ul with a class that is different for every meeting? I tried using placement.info with a wrapper template, but only succeeded in wrapping each li in it's own ul.

Many thanks for your help.
Jan 31 at 4:23 AM
I think you can override Content.cshtml for Meeting type, and maybe for Summary Display Type as well, if you are using this Display Type in your query layout, and put the ul with the class around @Display(Model.Content) call.


Jan 31 at 11:28 PM
Edited Jan 31 at 11:40 PM
Thanks for your reply, kassobasi. I'm not sure how to model my override template. In the shape tracer, when I go to Zone>Widget>Content, and look for the default template source code, it says, "Content not available as coming from source code". How do I make sure the template I create has the same behavior as the default template?

[edit]
Also, if I wrap the entire Model.content in a <ul> tag, won't this result in unwanted items being included in my unordered list ("Parts_Title_Summary" and "Parts_Common_Metadata_Summary")?

Here are the contents of the widget revealed in the shape tracer:
       Parts_Contents_Publish [empty]
       Content
            Parts_Title_Summary
            Parts_Common_Metadata_Summary [empty]
            Fields_Link
            Fields_Link
            Fields_Link
            Fields_Link
            Fields_Link
            Fields_Link
            Fields_Link
Feb 1 at 4:30 AM
I don't know why shape tracing says it's from the source code. Maybe it's a bug in 1.7.1. I would recommend to upgrade to 1.7.2 if you can.

The template is ~/Core/Contents/Views/Content.cshtml. You can create a copy of it in your theme Views folder with name Content-Meeting.Summary.cshtml and experiment if it does render the same HTML first, and then modify it.


Feb 1 at 4:54 AM
All this could be easier if you have created a part and put your fields into it.
doing an alternate for the part only should separate its content from the other parts as common part and title part.
Feb 3 at 6:51 PM
Thanks Kassobasi, I was able to wrap the content using a Content-Meeting.Summary.cshtml template.
Feb 3 at 6:53 PM
CSADNT wrote:
All this could be easier if you have created a part and put your fields into it.
doing an alternate for the part only should separate its content from the other parts as common part and title part.
Thanks CSADNT, I look forward to learning more about custom parts.