Copied to clipboard

Flag this post as spam?

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


  • Graham Thomson 56 posts 136 karma points
    Dec 30, 2016 @ 17:08
    Graham Thomson
    0

    Creating and Accordion

    Hi

    I am trying to allow editors to build their own accordion menus. What is the best way to do this?

    I thought I might build a Grid Editor to build this up. Looking at the example below -

    http://www.w3schools.com/howto/howtojsaccordion.asp

    I thought I could customize a Grid Editor to build them up "Section by Section" as it were -

    <button class="accordion">Section 1</button>
    <div class="panel">
      <p>Lorem ipsum...</p>
    </div>
    
    <button class="accordion">Section 2</button>
    <div class="panel">
      <p>Lorem ipsum...</p>
    </div>
    

    However, can I allow them to enter a heading where "Section 1" currently is?... and also then replace the content in the p tags where Lorem Ipsum lies. I can see how I could do this using two individual Grid Editors but not one as I can't see how to have more than one value in an individual Grid Editor.

    Is this an ok approach or is there a better technique?

    Thanks

    Graham

  • Nik 1614 posts 7260 karma points MVP 7x c-trib
    Dec 30, 2016 @ 18:28
    Nik
    1

    Hi Graham,

    If it was me, I wouldn't look at using a grid editor to create an accordion despite the flexibility it has I don't feel it would be the right tool for that job.

    Saying that however, there are 2 packages that would do exactly what you need. Both of the packages are great and have different ways of approaching similar problems.

    The first:

    Nested Content This allows you to create document types that are then used as part of a property on another document type (I doubt I'm explaining it very well). With this you could create a document type called "Accordion Panel", on it you could have two properties. 1) Title and 2) Content. Then using nested content, you could create a Property Editor called Accordion that allows for multiple Accordion Panels to be added.

    The alternative:

    Archetype This works in a similar way, but instead of creating a document type you create an Archetype Property Editor that contains fieldsets.

    Both have extensive documentation/examples floating around that could explain how to use them much better than I can. I would personally use Nested Content in this scenario, partly because Nested Content is being incorporated into the Umbraco Core in the not so distant future but also I think it is easier to get your head around as it simply uses what you are already used to.

  • Graham Thomson 56 posts 136 karma points
    Dec 31, 2016 @ 17:07
    Graham Thomson
    0

    Thank you very much Nik!

    I've started to look at Nested content and am hopefully gradually getting my head around it. In the documentation, when it talks about rendering..... can you tell me in which file do I put this code to render? -

    Example given in documentation -

    1. @inherits Umbraco.Web.Mvc.UmbracoViewPage
    2. @{
    3. var items = Model.GetPropertyValue<>
    4. foreach(var item in items) {
    5. // Do your thang...
    6. }
    7. }

    Many thanks

    Graham

  • Nik 1614 posts 7260 karma points MVP 7x c-trib
    Jan 01, 2017 @ 19:08
    Nik
    0

    Hi Graham,

    So the code you are referring to would normally go in your view for the document type. For re-use I often put the code into a partial view that I then call from any views for documents that have the property on it.

    For refernce, if you are unaware, when I'm referring to the View for a document type, in the Umbraco back office this is called a template. In Visual studio/ on the file system, these are the cshtml files stored in the Views folder.

    I hope that helps.

    Nik

  • Graham Thomson 56 posts 136 karma points
    Jan 02, 2017 @ 12:00
    Graham Thomson
    0

    Thanks Nik and Happy New Year!

    I feel I'm getting closer but still struggling a bit. Your last message helped to steer me in the right direction.

    So I put the following code in the template called "Accordion Panel" (This template is the one that was set up when I set up the Document type "Accordion Panel" that houses the property editors for my "title" and "content"...... that Nested content utilises.) -

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

    foreach(var item in items) {

    @item.GetPropertyValue(“title”)

    @Umbraco.Field(item, “content”) } }

    I then put the following in my homepage to call the property "accordion2017" which I put in my homepage document type.

    @Umbraco.Field("accordion2017")

    However, once I go to my Content and edit my Homepage, I can enter content for my title and content but unfortunately when I go to preview it I get -

    System.Collections.Generic.List`1[Umbraco.Core.Models.IPublishedContent]

    Any ideas? I'm clearly doing something wrong but determined to crack this!

    Thanks again

    Graham

  • Nik 1614 posts 7260 karma points MVP 7x c-trib
    Jan 02, 2017 @ 15:58
    Nik
    0

    Hi Graham,

    So, I think you are probably very close to achieving your goal.

    Where you have put @Umbraco.Field("accordion2017"), try replacing that with:

    @Html.PartialView("AccordionPanel")
    

    My naming might be incorrect, but based on what you've said, the code should call the template for the Accordion Panel document type.

    Nik

  • Graham Thomson 56 posts 136 karma points
    Jan 02, 2017 @ 16:35
    Graham Thomson
    0

    Thanks Nik

    Tried this but I get the following error -

    Compilation Error

    Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

    Compiler Error Message: CS1061: 'System.Web.Mvc.HtmlHelper<>

    Source Error:

    Line 31:

    Line 32:

    The Fastest Way to Space

    Line 33:

    @Html.PartialView("AccordionPanel")

    Line 34:

    @Umbraco.Field("about")

    Line 35:

    @Umbraco.Field("hPMainstory")

    Source File: c:\Users\Graham\Documents\Visual Studio 2015\Projects\Basic Bootstrap\Basic Bootstrap\Views\HomePage.cshtml Line: 33

  • Nik 1614 posts 7260 karma points MVP 7x c-trib
    Jan 02, 2017 @ 17:14
    Nik
    0

    Hi Graham,

    So I've quickly knocked up an example, the following is the code from my "Home" template:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.Home>
    @using ContentModels = Umbraco.Web.PublishedContentModels;
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    <html>
         <body>
              <p>@Model.Content.GetPropertyValue("primaryContent")</p>
              @Html.Partial("AccordionPanel")
         </body>
     </html>
    

    Then my code for my Accordion Panel view looks like this:

    @using System.Collections
    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    
    <div>Accordion View</div>
    @{
        var accordionList = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("accordion");
    }
    
    <div>@accordionList.Count()</div>
    @foreach(var panel in accordionList)
    {
        <div>
            <h2>@panel.GetPropertyValue("title")</h2>
            <p>@panel.GetPropertyValue("panelContent")</p>
        </div>
    }
    

    If need be I can zip up the code and send it over to you. Both the views in this scenario are template files, although ordinarily I would have one as a view and one as a partial view.

    Hope that helps.

    Nik

  • Graham Thomson 56 posts 136 karma points
    Jan 02, 2017 @ 18:59
    Graham Thomson
    0

    Thanks very much Nik for all your effort!

    I think the problem is my lack of Razor knowledge - which I am going to have to learn more about. Haven't got it working as yet but will have a look.

    Very frustrating! :(

    Thanks again

    graham

  • Graham Thomson 56 posts 136 karma points
    Jan 02, 2017 @ 19:27
    Graham Thomson
    0
    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.HomePage>
    

    @using ContentModels = Umbraco.Web.PublishedContentModels; @{ Layout = null; }

    <html>
    

      <div class='container'>
      <div class='row well well-lg'>
        <div class='col-md-6'>
          <h2>The Fastest Way to Space</h2>
        <p>@Umbraco.Field("about")</p>
          <p class='lead'>@Umbraco.Field("hPMainstory")</p>
        <p>@Umbraco.Field("grahamSimpleText")</p>
          <button type='button' class='btn btn-lg btn-default'>Take the Tour</button>
          <button type='button' class='btn btn-lg btn-primary'>Book Tickets Now</button>
        </div>
        <div class='col-md-6 visible-md visible-lg'>
             @{
          var mediaId = Model.Content.GetPropertyValue<int>("imageByNews");  //This is a variation on your step 1
          var mediaItem = Umbraco.TypedMedia(mediaId); //This is the first stage of step 2
          <img src="@mediaItem.Url()">
    
    }
        </div>
      </div>
    
      <div class='row text-center features'>
        <div class='col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0'>
          <i class='glyphicon glyphicon-briefcase'></i>
          <h3>Book Today!</h3>
          <p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.</p>
        </div>
    
        <div class='col-sm-4 col-xs-6'>
          <i class='glyphicon glyphicon-random'></i>
          <h3>Go Anywhere</h3>
          <p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!</p>
        </div>
    
        <div class='col-sm-4 col-xs-6'>
          <i class='glyphicon glyphicon-send'></i>
          <h3>RocketBus&reg;</h3>
          <p>For cheapest fares, catch the next RocketBus&reg; to the stars. Cheaper on your wallet, and easiest way to make friends.</p>
        </div>
      </div>
    </div>
    <div class='quote'>
      <div class='container'>
        <blockquote>
          <p>Any sufficiently advanced technology is indistinguishable from magic.</p>
          <footer>Arthur C. Clarke in <cite title="Source Title">Profiles of the Future</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class='container transport-systems'>
      <div class='row'>
        <div class='col-md-10 col-md-offset-1'>
          <h2>Our Transport Systems</h2>
          <p>Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.</p>
        </div>
      </div>
    
      <div class='row text-center'>
        <div class='transporter col-md-3 col-md-offset-1 well well-sm'>
          <h3>Transporter</h3>
          <ul class='list-unstyled'>
            <li>8 second travel time</li>
            <li>Chance of death only 1 in 7,593</li>
            <li>Low price of only $15.99!</li>
          </ul>
          <p><button class='btn btn-info'><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p>
        </div>
        <div class='space-elevator col-md-3 col-md-offset-1 well well-sm'>
          <h3>Space Elevator</h3>
          <ul class='list-unstyled'>
            <li>8 hour scenic ride</li>
            <li>Only 1 horrific death per 12,456</li>
            <li>Only $45.99 if you book today!</li>
          </ul>
          <p><button class='btn btn-info'><i class='glyphicon glyphicon-sort'></i> Board the Elevator!</button></p>
        </div>
        <div class='rocketbus col-md-3 col-md-offset-1 well well-sm'>
          <h3>RocketBus</h3>
          <ul class='list-unstyled'>
            <li>8 minute scenic ride</li>
            <li>Plunging death rate of under 1/100k</li>
            <li>$74.99 lets you blast off today!</li>
          </ul>
          <p><button class='btn btn-info'><i class='glyphicon glyphicon-plane'></i> Blast Off!</button></p>
        </div>
      </div>
    </div>
    <div class='footer'>
      <div class='container'>
        <div class='row'>
          <div class='col-md-3 col-sm-4 col-xs-6'>
            <h4>Who We Are</h4>
            <p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>
            <p><a href='about.html'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>
          </div>
    
          <div class='col-md-offset-1 col-sm-2 col-xs-6'>
            <h4>Links</h4>
            <ul class='list-unstyled'>
              <li><a href='index.html'>Home</a></li>
              <li><a href='tickets.html'>Tickets</a></li>
              <li><a href='stations.html'>Stations</a></li>
            </ul>
          </div>
    
          <div class='clearfix visible-xs'></div>
    
          <div class='col-sm-2 col-xs-6'>
            <h4>Stay in Touch</h4>
            <ul class='list-unstyled'>
              <li><a href='about.html'>About</a></li>
              <li><a href='contact.html'>Contact Us</a></li>
              <li><a href='/blog'>Blog</a></li>
              <li><a href='http://twitter.com/codeschool'>Twitter</a></li>
              <li><a href='http://facebook.com/codeschool'>Facebook</a></li>
            </ul>
          </div>
    
          <div class='col-md-3 col-md-offset-1 col-sm-4 col-xs-6'>
            <h4>Contact Us</h4>
            <ul class='list-unstyled'>
              <li><i class='glyphicon glyphicon-globe'></i> Orlando, FL</li>
              <li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off</li>
              <li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:[email protected]'>[email protected]</a></li>
            </ul>
            <p>Blasting Off With Bootstrap &copy;2214.</p>
          </div>
        </div>
      </div>
    </div>
    
    
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/scripts/fanoe.js"></script>
    

  • Graham Thomson 56 posts 136 karma points
    Jan 02, 2017 @ 19:31
    Graham Thomson
    0

    Hi Nik

    The code I pasted above is my template for my"Home".

    Can I ask you a massive favour and advise me how I incorporate the code you posted earlier into this please? Also how i'd refer from here to the Accordion Panel code?

    The reason I ask is that I feel so close as I am able to edit my content page and add my Accordion items...... it's just getting it out onto the page that's killing me!!!

    Once I solve this I plan to make a video for people like me to help understand!

    Cheers Graham

  • Nik 1614 posts 7260 karma points MVP 7x c-trib
    Jan 02, 2017 @ 19:44
    Nik
    0

    Hi Graham,

    Do you have Slack? If so, join the Umbraco group it might be easier to talk you through this on there.

    However, in the mean time can you tell me a bit more about your Document type set up.

    Can you confirm the following for me:

    1) You have a document type called "Home" that has a property on it called "accordion2017"

    2) On your accordion document type there are two properties called "title" and "content".

    If any of that information is incorrect could you let me know please.

    Also, just to help, when you are posting code into a response here if you put 4 spaces at the start it tells the forum that it is code. However you have to do this for every line. If you look at your previous post, you can see that some of it has a black background (the forum recognised it as code) where as some of it looks like normal text. It is treating the "normal text" as html text (kind of) which makes it a bit harder to read.

    Thanks,

    Nik

  • Graham Thomson 56 posts 136 karma points
    Jan 02, 2017 @ 19:56
    Graham Thomson
    0

    Hi Nik

    I've used Slack on something else - I'll look into setting this up for the Umbraco group!

    1 - Document type is called Home Page - alias homePage - with a property called accordion2017

    2 Accordian Panel document type has the properties of title and content yes.

    Thank you for the tip about the code and I will follow your advice from now on!

    Many thanks again Nik!

    Graham

  • Nik 1614 posts 7260 karma points MVP 7x c-trib
    Jan 02, 2017 @ 20:03
    Nik
    100

    Hi Graham,

    That's no problem.

    With regards to Slack, the Umbraco community can be found here: umbracians.slack.com

    Okay, so the first step is we can try and get this working without using the second view. That is only helpful for re-usability. I think it would help if we got it working just in your home page first.

    So where ever you are looking to put accordion paste the following code:

    @{
         //This retrieves the value from property. Nested content is always an IEnumerable of IPublishedContent (from my experience)
         var accordion = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("accordion2017");
    
    }
    
    
    @foreach(var panel in accordion )
    {
        //Next we loop through each panel in the accordion
        <div>
            <h2>@panel.GetPropertyValue("title")</h2>
            <p>@panel.GetPropertyValue("content")</p>
        </div>
    }
    

    You might need to add the following using statement at the top of your view:

    @using System.Collections
    

    All of this code goes straight into the Home Page template. If that works we can then look at getting it working in a reusable manner.

    Thanks,

    Nik

  • Graham Thomson 56 posts 136 karma points
    Jan 02, 2017 @ 20:31
    Graham Thomson
    0

    Hi Nik

    Woooooohhhhooo! That WORKED!

    Thanks so much!

    Graham

  • Nik 1614 posts 7260 karma points MVP 7x c-trib
    Jan 02, 2017 @ 20:35
    Nik
    0

    No problem at all Graham :-)

  • Graham Thomson 56 posts 136 karma points
    Jan 05, 2017 @ 11:01
    Graham Thomson
    0

    Hi Nik

    Also managed to get this working using Partial!

    Now having a look at the Document Type Grid Editor extension!

    Thanks again!

    Graham

  • Graham Thomson 56 posts 136 karma points
    Jan 05, 2017 @ 11:07
    Graham Thomson
    0

    Hi Nik

    Also, I tried to go to umbracians.slack.com but do I need invited to join as my login for the other group on Slack does not work for this one.

    Thanks

    Graham

  • Nik 1614 posts 7260 karma points MVP 7x c-trib
    Jan 05, 2017 @ 23:03
    Nik
    0

    Hi Graham,

    As far as I understand it, you have to register a username for each Slack community you want to join. So you will have to register as a new user.

    Also, if any of my responses to the original question are an acceptable answer, would you mind kindly flagging it as such. This will help others who have the same issue as you in the future :-)

    Thanks,

    Nik

Please Sign in or register to post replies

Write your reply to:

Draft