Sitefinity Custom Fields for list widgets and how to use them in MVC view templates

Question

I've added a Custom Field to the List Widget in Sitefinity 8.1, it's Type is Related data and it's Data type is Pages. The field name is LinkedPageUrl.

Works perfectly in the back end allowing me to select a page from system and store it against that particular List Item.

I can't find any place in Sitefinity's documentation that explains how I would programmatically use this field in a MVC based List.SimpleList.cshtml view template that I'm customizing.

I've seen this being used in the News widget where there is an associated Image for each News Article:

<img src="@Html.Raw(item.Fields.RelatedImg.Fields.MediaUrl)" class="img-responsive" />

But I don't get close to this because I don't have the slightest idea where to begin... What's the model structure, syntax, etc.

My objective is to change each list item rendered out into an anchor and the anchor should make use of this Related Data field's URL for it's Href property.

EDIT:

Veselin Vasilev · Accepted Answer · 2016-04-22T07:43:14.817

You can do something like this in the widget template:

 @foreach (var item in Model.Items)
{
    <h3 @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)item.Fields.Id)
        @Html.InlineEditingFieldAttributes("Title", "ShortText")>

        @item.Fields.Title
    </h3>
    <ul>
        @foreach (var listItem in ((ListViewModel)item).ListItemViewModel.Items)
        {
            <li @Html.InlineEditingAttributes(Model.ProviderName, ((ListViewModel)item).ListItemViewModel.ContentType.FullName, (Guid)listItem.Fields.Id)>
                <div @Html.InlineEditingFieldAttributes("Title", "ShortText")>
                    @listItem.Fields.Title
                </div>

                <div class="sfMultiRelatedItmsWrp">
                    <h2 class="sfrelatedItmTitle">Related pages</h2>

                    @foreach (var link in listItem.Fields.LinkedPageUrl)
                    {
                        var node = PageManager.GetManager().GetPageNode(link.Fields.Id);
                        var url = PageExtesnsions.GetFullUrl(node);

                        <div>@link.Fields.Title - @url</div>
                    }
                </div>
            </li>
        }
    </ul>
}

This is given that you selected that multiple pages can be selected per list item.

EDIT: Make sure to include the following namespaces

@model Telerik.Sitefinity.Frontend.Mvc.Models.ContentListViewModel
@using Telerik.Sitefinity.Frontend.Lists.Mvc.Models;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Modules.Pages;

EDIT2: If the custom field allows for only 1 page to be selected then it should look like this:

<div class="@Model.CssClass">

@foreach (var item in Model.Items)
{
    <h3 @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)item.Fields.Id)
        @Html.InlineEditingFieldAttributes("Title", "ShortText")>

        @item.Fields.Title
    </h3>
    <ul>
        @foreach (var listItem in ((ListViewModel)item).ListItemViewModel.Items)
        {
            <li @Html.InlineEditingAttributes(Model.ProviderName, ((ListViewModel)item).ListItemViewModel.ContentType.FullName, (Guid)listItem.Fields.Id)>
                <div @Html.InlineEditingFieldAttributes("Title", "ShortText")>
                    @listItem.Fields.Title
                </div>

                <div class="sfMultiRelatedItmsWrp">
                    <h2 class="sfrelatedItmTitle">Related pages</h2>

                    @{
                        var node = PageManager.GetManager().GetPageNode(listItem.Fields.LinkedPageUrl.Fields.Id);
                        var url = PageExtesnsions.GetFullUrl(node);
                    }

                    <div>@listItem.Fields.Title - @url</div>
                </div>
            </li>
         }
    </ul>
}

A good starting point is this article

thanks for the answer. How would you change that if it was a Single page only? Also, do you know of any documentation I can read on this subject, because I'd like to get a better understanding of it. — Jacques, Apr 22 '16 at 07:07
@VeselinVasilev Hi , I get a runtime binder error when I try to do that, ANy Ideas — Shintu Joseph, Oct 18 '17 at 07:45
@VeselinVasilev never mind pal, I got it done. Thank you so much — Shintu Joseph, Oct 23 '17 at 06:05

Sitefinity Custom Fields for list widgets and how to use them in MVC view templates

1 Answers1