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?
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.
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? -
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 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 -
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.
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.
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!
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.
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.
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 :-)
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 -
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
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.
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 -
Many thanks
Graham
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
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
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:
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
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:
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
Hi Graham,
So I've quickly knocked up an example, the following is the code from my "Home" template:
Then my code for my Accordion Panel view looks like this:
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
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
@using ContentModels = Umbraco.Web.PublishedContentModels; @{ Layout = null; }
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
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
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
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:
You might need to add the following using statement at the top of your view:
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
Hi Nik
Woooooohhhhooo! That WORKED!
Thanks so much!
Graham
No problem at all Graham :-)
Hi Nik
Also managed to get this working using Partial!
Now having a look at the Document Type Grid Editor extension!
Thanks again!
Graham
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
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
is working on a reply...