Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Matt 353 posts 825 karma points
    Oct 19, 2018 @ 12:28
    Matt
    0

    Advice on best way to achieve sub section with partial view.

    Hello all,

    I'm just after some advice and a little bit of a pointer on how you would do the following;

    I have a website where they wanted to post policies, guides, leaflets ect ect

    I created a Document type called "Policies Guides and Leaflets" and then created;

    Document type without a template for each of these e.g Policies, Guides, Leaflets.

    Which I've gave permission for the other document types to be created under the main "Policies Guides and Leaflets" header.

    Which I've then created a partial view for each document type. (This is a Collapsible div)

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    
    @{
        var selection = Model.Content.Site().FirstChild("policiesProdeduresAndGuidance").Children("ourLeaflets")
                            .Where(x => x.IsVisible());
    }
    @foreach (var item in selection)
    {
    
        var documentPicker = item.GetPropertyValue<IPublishedContent>("documentPicker");
        var linkPicker = item.GetPropertyValue<string>("LinkPicker");
    
        <div class="guidandpolicies-wrapper">
            <div class="w-row">
                <div class="w-col w-col-2">
                    @{
                        if (documentPicker != null)
                        {
                <a href="@documentPicker.Url" target="_blank" class="document-link-block w-inline-block"><img src="~/images/policies_image.png"></a>
    }
    else if (!string.IsNullOrEmpty(linkPicker))
    {
                <a href="@linkPicker" target="_blank" class="document-link-block w-inline-block"><img src="~/images/policies_image.png"></a>
    
    }
                    }
                </div>
                <div class="w-col w-col-10">
                    <div class="guidanceandpolicies-info-div">
                        <h5 class="gnp-title">
                            @{
            if (documentPicker != null)
            {
                        <a href="@documentPicker.Url" target="_blank" class="document-link-text">@item.GetPropertyValue("documentTitle")</a>
    }
    else if (!string.IsNullOrEmpty(linkPicker))
    {
                        <a href="@linkPicker" target="_blank" class="document-link-text">@item.GetPropertyValue("documentTitle")</a>
    }
                            }
                        </h5>
                        <div class="gnp-document-info">@item.GetPropertyValue("documentDescription")</div>
                    </div>
                </div>
            </div>
        </div>
    }
    

    Then inserted every partial view into the main Policies, Guidance page.

    This works fine, but the issue I have is they want to have sub sections under the Policies so rather then have a long list. They want to give each of them a sub folder intheory.

    Is it possible to add this into the way I've created this? or do I need to rethink what I've done.

    Thanks in advance, Hopefully it makes sense.

    Matt

  • Matt 353 posts 825 karma points
    Oct 19, 2018 @ 14:41
    Matt
    0

    Hello,

    I've tried the following and made some progress.

    So I've created a document type and a template called "policiesProceduresAndGuidanceSubCat" with a text field.

    See my tree below;

    enter image description here

    This is the code in my template;

    <div class="body-section">
        <div class="body-container w-container">
          <h1 class="main-page-heading">@Umbraco.Field("documentFolder")</h1>
          <div class="w-richtext">
    
    
    @{
        var selection = Model.Content.Site().FirstChild("policiesProdeduresAndGuidance").FirstChild("policiesProceduresAndGuidanceSubCat").FirstChild("policiesProceduresAndGuidanceSubCat").Children("ourPolicies")
                            .Where(x => x.IsVisible());
    }
    <ul>
        @foreach(var item in selection){
            <li>
                <a href="@item.Url">@item.Name</a>
            </li>
        }
    </ul>
    
    
    
          </div>
        </div>
      </div>
    

    I used the query builder to generate the code, now it works great for just 1 folder....

    But how do I get it to work depending on what page your on? E.g I want to use the same template to get Corporate Records policy so its more generic.

  • Nik 1593 posts 7151 karma points MVP 6x c-trib
    Oct 19, 2018 @ 14:56
    Nik
    0

    Hi Matt,

    Okay, so my first question, is this partial only going to be used on the template for the "Policies Procedures and Guidance" page? or are you thinking of using it all over your site? (I'm assuming that this isn't the root node of your site but it's hard to tell from screen shot you've provided)

    Nik

  • Matt 353 posts 825 karma points
    Oct 19, 2018 @ 15:04
    Matt
    0

    Hello Nik,

    Yes thats correct its only going to be used in "Policies Procedures and Guidance" I created it in a partial at the start as it was the very first website I built and was learning the functions.

    No its not the root :)

    Thanks

  • Nik 1593 posts 7151 karma points MVP 6x c-trib
    Oct 19, 2018 @ 15:14
    Nik
    0

    Assuming that your partial inherits from UmbracoViewPage with no additional model passed try this:

    @foreach(var subCat in Model.Children().Where(c=>c.DocumentTypeAlias == "policiesProceduresAndGuidanceSubCat"))
          {
              <div>@subCat.Name</div>
              <ul>
                   @foreach(var item in subCat.Children()){
                    <li>
                       <a href="@item.Url">@item.Name</a>
                  </li>
                   }
              </ul>
          }
    

    I can't remember if Children needs the () or not so you might need to remove them, but try that and see how it works for you.

    It should create a heading for each folder and then list the children.

    The problem that does exist though is you need something to be a bit more recursive looking at your site structure as you have folders in folders which the above code won't handle. But we can get you there, lets see if this bit works for you first :-)

  • Matt 353 posts 825 karma points
    Oct 19, 2018 @ 15:24
    Matt
    0

    Hello Nik,

    Thanks for the reply. I tried your following code and i get this error;

    CS1928: 'Umbraco.Web.Models.RenderModel' does not contain a definition for 'Children' and the best extension method overload 'Umbraco.Core.Models.ContentExtensions.Children(Umbraco.Core.Models.IContent)' has some invalid arguments
    

    Sorry this is where I get lost!

    This is my complete partial which I added your code to the top.

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    
    
    @foreach(var subCat in Model.Children().Where(c=>c.DocumentTypeAlias == "policiesProceduresAndGuidanceSubCat"))
          {
              <div>@subCat.Name</div>
              <ul>
                   @foreach(var item in subCat.Children()){
                    <li>
                       <a href="@item.Url">@item.Name</a>
                  </li>
                   }
              </ul>
          }
    
    
    
    @{
        var selection = Model.Content.Site().FirstChild("policiesProdeduresAndGuidance").Children("ourPolicies")
                            .Where(x => x.IsVisible());
    }
    
    @foreach (var item in selection)
    {
    
        var documentPicker = item.GetPropertyValue<IPublishedContent>("documentPicker");
        var linkPicker = item.GetPropertyValue<string>("LinkPicker");
    
        <div class="guidandpolicies-wrapper">
            <div class="w-row">
                <div class="w-col w-col-2">
                    @{
                        if (documentPicker != null)
                        {
                            <a href="@documentPicker.Url" target="_blank" class="document-link-block w-inline-block"><img src="~/images/policies_image.png"></a>
                        }
                        else if (!string.IsNullOrEmpty(linkPicker))
                        {
                            <a href="@linkPicker" target="_blank" class="document-link-block w-inline-block"><img src="~/images/policies_image.png"></a>
    
                        }
                    }
                </div>
                <div class="w-col w-col-10">
                    <div class="guidanceandpolicies-info-div">
                        <h5 class="gnp-title">
                            @{
                                if (documentPicker != null)
                                {
                                    <a href="@documentPicker.Url" target="_blank" class="document-link-text">@item.GetPropertyValue("documentTitle")</a>
                                }
                                else if (!string.IsNullOrEmpty(linkPicker))
                                {
                                    <a href="@linkPicker" target="_blank" class="document-link-text">@item.GetPropertyValue("documentTitle")</a>
                                }
                            }
                        </h5>
                        <div class="gnp-document-info">@item.GetPropertyValue("documentDescription")</div>
                    </div>
                </div>
            </div>
        </div>
    }
    
  • Nik 1593 posts 7151 karma points MVP 6x c-trib
    Oct 19, 2018 @ 15:29
    Nik
    0

    Hi Matt,

    Ahh, yes, okay so my assumption was slightly wrong.

    Where I've got Model.Children(), change it to Model.Content.Children() and see if that stops the error.

  • Matt 353 posts 825 karma points
    Oct 19, 2018 @ 15:33
    Matt
    0

    Hello Nik,

    Aha that done the trick.

    I now get the list of folders.

    enter image description here

  • Matt 353 posts 825 karma points
    Oct 22, 2018 @ 08:16
    Matt
    0

    Morning Nik,

    Hope you had a good weekend.

    How would I make things work more dynamic with other folders? as at the moment it only picks up Matt test policy and not Matt test policy 2

    enter image description here

    So this is my template file for subcat

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.PoliciesProceduresAndGuidanceSubCat>
    @using ContentModels = Umbraco.Web.PublishedContentModels;
    @{
        Layout = "Master.cshtml";
    }
    
    
    <div class="body-section">
        <div class="body-container w-container">
          <h1 class="main-page-heading">@Umbraco.Field("documentFolder")</h1>
          <div class="w-richtext">
    
    
    @{
        var selection = Model.Content.Site().FirstChild("policiesProdeduresAndGuidance").FirstChild("policiesProceduresAndGuidanceSubCat").FirstChild("policiesProceduresAndGuidanceSubCat").Children("ourPolicies")
                            .Where(x => x.IsVisible());
    }
    @foreach (var item in selection)
    {
    
        var documentPicker = item.GetPropertyValue<IPublishedContent>("documentPicker");
        var linkPicker = item.GetPropertyValue<string>("LinkPicker");
    
        <div class="guidandpolicies-wrapper">
            <div class="w-row">
                <div class="w-col w-col-2">
                    @{
                        if (documentPicker != null)
                        {
                            <a href="@documentPicker.Url" target="_blank" class="document-link-block w-inline-block"><img src="~/images/policies_image.png"></a>
                        }
                        else if (!string.IsNullOrEmpty(linkPicker))
                        {
                            <a href="@linkPicker" target="_blank" class="document-link-block w-inline-block"><img src="~/images/policies_image.png"></a>
    
                        }
                    }
                </div>
                <div class="w-col w-col-10">
                    <div class="guidanceandpolicies-info-div">
                        <h5 class="gnp-title">
                            @{
                                if (documentPicker != null)
                                {
                                    <a href="@documentPicker.Url" target="_blank" class="document-link-text">@item.GetPropertyValue("documentTitle")</a>
                                }
                                else if (!string.IsNullOrEmpty(linkPicker))
                                {
                                    <a href="@linkPicker" target="_blank" class="document-link-text">@item.GetPropertyValue("documentTitle")</a>
                                }
                            }
                        </h5>
                        <div class="gnp-document-info">@item.GetPropertyValue("documentDescription")</div>
                    </div>
                </div>
            </div>
        </div>
    }
    
    
    
    
    
    
    
    
          </div>
        </div>
      </div>
    

    Thanks in advance

    Matt

  • Nik 1593 posts 7151 karma points MVP 6x c-trib
    Oct 22, 2018 @ 09:05
    Nik
    0

    Hi Matt,

    You should be able to use the same snippet that lists the sub cat folders :-)

    @foreach(var subCat in Model.Content.Children().Where(c=>c.DocumentTypeAlias == "policiesProceduresAndGuidanceSubCat"))
      {
          <div>@subCat.Name</div>
          <ul>
               @foreach(var item in subCat.Children()){
                <li>
                   <a href="@item.Url">@item.Name</a>
              </li>
               }
          </ul>
      }
    

    You could tweak it do be something like this:

    @foreach(var subCat in Model.Content.Children().Where(c=>c.DocumentTypeAlias == "policiesProceduresAndGuidanceSubCat" || c.DocumentTypeAlias == "ourPolicies"))
      {
          <div>@subCat.Name</div>
          <ul>
               @foreach(var item in subCat.Children()){
                <li>
                   <a href="@item.Url">@item.Name</a>
              </li>
               }
          </ul>
      }
    

    The change to the Where clause in this will mean it will list SubCats and Policy nodes :-)

    The problem you have with the query you are using is it is full of "FirstChild" options. These FirstChild options mean that it won't look beyond the first child, missing any other children that exist in your structure.

  • Matt 353 posts 825 karma points
    Oct 22, 2018 @ 10:53
    Matt
    0

    Ah I see, sort of makes sense!

    I tried your code Nik which worked fine with no errors.

    I tried to add your code to my template file and I get the following error;

    enter image description here

    Will the same template file work for e.g Leaflets section as well as Policies? or do I need to create a new template for Policies, Leaflets, Guides etc

    Thanks Nik

    Matt

  • Nik 1593 posts 7151 karma points MVP 6x c-trib
    Oct 22, 2018 @ 10:58
    Nik
    0

    Assuming the document types are the same, the code I've given should work without you needing to create new templates for each sub folder but it's hard to answer that without a full view of doctypes and structure of your site.

    With regards to your error, can you share what your full template looks like?

    Thanks

    Nik

  • Matt 353 posts 825 karma points
    Oct 22, 2018 @ 11:04
    Matt
    0

    I think Its something to do with my foreach loop, you seem to have an extra @foreach(var item in subCat.Children()){

    I tried adding it but get errors with or without....

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.PoliciesProceduresAndGuidanceSubCat>
    @using ContentModels = Umbraco.Web.PublishedContentModels;
    @{
        Layout = "Master.cshtml";
    }
    
    
    <div class="body-section">
        <div class="body-container w-container">
          <h1 class="main-page-heading">@Umbraco.Field("documentFolder")</h1>
          <div class="w-richtext">
    
    
    @foreach(var subCat in Model.Content.Children().Where(c=>c.DocumentTypeAlias == "policiesProceduresAndGuidanceSubCat" || c.DocumentTypeAlias == "ourPolicies"))
    {
    
        var documentPicker = item.GetPropertyValue<IPublishedContent>("documentPicker");
        var linkPicker = item.GetPropertyValue<string>("LinkPicker");
    
        <div class="guidandpolicies-wrapper">
            <div class="w-row">
                <div class="w-col w-col-2">
                    @{
                        if (documentPicker != null)
                        {
                            <a href="@documentPicker.Url" target="_blank" class="document-link-block w-inline-block"><img src="~/images/policies_image.png"></a>
                        }
                        else if (!string.IsNullOrEmpty(linkPicker))
                        {
                            <a href="@linkPicker" target="_blank" class="document-link-block w-inline-block"><img src="~/images/policies_image.png"></a>
    
                        }
                    }
                </div>
                <div class="w-col w-col-10">
                    <div class="guidanceandpolicies-info-div">
                        <h5 class="gnp-title">
                            @{
                                if (documentPicker != null)
                                {
                                    <a href="@documentPicker.Url" target="_blank" class="document-link-text">@item.GetPropertyValue("documentTitle")</a>
                                }
                                else if (!string.IsNullOrEmpty(linkPicker))
                                {
                                    <a href="@linkPicker" target="_blank" class="document-link-text">@item.GetPropertyValue("documentTitle")</a>
                                }
                            }
                        </h5>
                        <div class="gnp-document-info">@item.GetPropertyValue("documentDescription")</div>
                    </div>
                </div>
            </div>
        </div>
    }
    
    
    
    
    
    
    
          </div>
        </div>
      </div>
    
  • Nik 1593 posts 7151 karma points MVP 6x c-trib
    Oct 22, 2018 @ 11:14
    Nik
    0

    Hi Matt,

    If you change:

    @foreach(var subCat in 
    

    to

    @foreach(var item in 
    

    it should work for you.

    The error is because it is looking for a variable called "item" that currently doesn't exist.

    However, it looks to me like you need to think about this a bit further because you aren't checking to see if the current document you are processing (out of the children collection) is a sub cat or a policy document.

    Because you have the ability to have sub cat's in sub cats you need to consider this when rendering out your lists.

    Here are two options to consider.

    1) Two foreach loops of children, one just for SubCats and one just for actual documents. - This would allow you to group all folders at the top and documents beneath them.

    2) some sort of If check inside the foreach loop to see if you are rendering a document or a folder. This would mean that you could have folders in amongst documents.

    Does that make sense?

  • Matt 353 posts 825 karma points
    Oct 22, 2018 @ 11:38
    Matt
    0

    Hello Nik,

    Thanks that did the job.

    Is this what you mean.

    So I created new folder called Procedures which will store all the procedure documents separate from policies.

    enter image description here

    But now the Polices folders are rendering with the procedures section.

    enter image description here

Please Sign in or register to post replies

Write your reply to:

Draft