Tabs, Cards, and Columns for the Admin, RenderTitle option - This week in Orchard (03/07/2020)
Heads up, several improvements coming this week! Editor shapes now support grouping placement, which allows you to group editor shapes, to create a variety of content editor layouts. The Title Part now has a Render Title option to show or hide the value of the Title. And last week we did an Orchard Core workshop about module development. Check out our current post for more!
Orchard Core updates
TitlePart with RenderTitle option and Placement for Form, Label
Let's say you set up your site using the Blog recipe and want to edit the content definition of the Blog Post. If you edit the definition of the attached Title Part, you will find a new option that you can use called Render Title. With this option, you can enable or disable rendering the value of the Title Part in Detail and Summary display types.
The Blog recipe using the TheBlogTheme by default where we override the content of the Blog Post (Content-BlogPost.liquid) and displaying the DisplayText of the content item whether the Render Title option is on or off. So, to see this in action we should use a theme where there is no override for the Blog Post content items. Let's navigate to Design -> Themes and make the Default Theme as the current for now. After that, you will be able to see the differences. The upper window here is about to render the title, but under that, you can see the default blog post without displaying the value of the title.
We have some content types where is no need to display the title by default. These types are the Form and the Label. If you check the migration of the Label for example you will see how you can use the TitlePartSettings to hide the title by default.
Fix jsonparse Liquid filter to supports arrays
The jsonparse Liquid filter converts a JSON string to a JObject. This can be useful to build collections and iterate over the values in Liquid. Now, this filter is about to support arrays. To do that the community had to use the JToken.Parse method instead of the JObject.Parse one as you can see in the JsonParseFilter class.
Add menu display text (differentiator) classes to menu shapes
When using multiple menus on a site it is possible to do a lot of the styling with CSS, which can avoid having many, many templates. Now Orchard Core will add the menu differentiator (which is calculated from the display text) as an additional class on the menu. So out of the box, you will get: class="menu menu-main-menu".
Demos
Tabs, Cards, and Columns for the Admin
We are able to use placement to move some of the fields/parts into a tab in the admin area. The new thing is now you can use Bootsrap Collape to organize your content into cards. And now you can also move fields into columns, in that case, you can have a Media Field near to the HTML Body Part for example. But after this intro let's go deeper and see some examples of placement.
- Modifier for tabs remains
#, but now supports;before as a position modifier for the tab grouping. - Modifier for cards is
%, also supports;as a position modifier. - Modifier for columns is
|, supports;, and_as a column modifier,_9will be applied ascol-md-9automatically, or_lg-9which will be applied ascol-lg-9. _9should be sufficient for most, as it will by default break atmd.;must be immediately after,whereas:is the shape placement, and applies anywhere in the placement string.
So, in nutshell the normal tab modifier is a #, the card modifier is a %, and the column modifier is a |. The column has a name and another modifier that allows you to say how big you want the column to be.
Now try out these in your Orchard Core site! We will use the Orchard Core source to set up a site and we will modify the content of the placement.json file in the OrchardCore.Contents module. In the following example we place the MediaField_Edit shape in a tab called Media, and position the Media tab first, and the Content tab second. The Html Field goes first in the Content tab and the rest goes under the Html Field.
Let's play with this a little bit more! Now we place the MediaField_Edit shape in a card called Media, and position the Media card first, and the Content card second.
And lastly, we are playing a little bit with the columns. In the following example we place the MediaField_Edit shape in a column called Media, and position the Media column first, and the Content column second. We also specify that the Content column will take 9 columns, of the default 12 column grid. By default, the columns will break responsively at the md breakpoint, and a modifier will be parsed to col-md-9. If you want to change the breakpoint, you could also specify Content_lg-9, which is parsed to col-lg-9.
If you want to know more check out the official documentation and don't forget to watch the video about the new features of the placement!
News from the community
Orchard Core RC 2 on ASP.NET Blog
You can find a new blog post in the ASP.NET Blog that telling you the Orchard Core Release Candidate 2 now available! In this post you will learn how to create an Orchard CMS website using the templates, you will see the notable improvements and you can check out the development plan of Orchard Core!
Module Development - Orchard Core Workshop 4
We had some great crowd at the Orchard Core module development workshop on Saturday, thanks all for coming! Would you like to attend a workshop too? Other community members will hold ones soon: https://orchardcore.net/workshops. Are you interested in something else? Leave a comment below!
Orchard Dojo Newsletter
Now we have 151 subscribers of the Lombiq's Orchard Dojo Newsletter! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course.
Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!
If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!
There will be no This week in Orchard post next week because of vacation, so see you in two weeks!