This week in Orchard - 10/11/2019

Admin UI, This week in Orchard

The Preview feature is improving, you can have admin templates and better defaults for the SearchController, and we are just scratching the surface of the new features that coming to Orchard Core. Let's check out those with some other fascinating features!

On Orchard Core

Validate stereotypes

This prevents stereotypes from having non-alphanumeric values because these are used for file template names. Another issue was people assume that they can provide multiple stereotypes by passing a coma, but no, it's not a valid use case. Here's the fix in the UpdateAsync method of the ContentTypeSettingsDisplayDriver by adding the IsAlphaNumericOrEmpty private method.

Fix attached media field add button visibility

There was a couple of regressions with the media editor and media attached field editor:

  • the delete button doesn't seem to work anymore (permanently disabled)
  • in the media attached field editor, the add button doesn't reappear after deleting an image until you publish and re-edit the page

You can see the fixes in the following gif.

Adding shape_dump filter

Do you remember the Shape Tracing feature in Orchard 1? It's like pressing the F12 button in a Chrome browser, but for shapes. You will see all the shapes that have been rendered and all the alternates and the source code for alternates. It makes easier to template shapes.

The first step is towards this feature in Orchard Core is to use this filter to dump a shape. With this filter, you can export the JSON document of the shape. Let's say we have a site installed with the Blog recipe. Use the shape_dump filter in the Content-Article.liquid file by adding this line: {{ Model | shape_dump }}.

After if you navigate to an article, you will see the following page with the rendered JSON document. This feature is under development, but you can check the current progress in this branch.

Orchard Core Preview feature improvements

The idea is to improve the Orchard Core Preview feature. Today when we do a preview it's using the ContentItemController, the one that renders the ContentShape. With that, you can have your own custom templates and it will render that. When you click on the Preview button, there is a new window that opens and this new window will call into a custom preview controller. This controller is in the OrchardCore.ContentPreview module, called PreviewController. What it does is when it's get called on a POST from the second window it gets the content item, which is inside the form post and tries to update the result of the POST, like it was a publish or a save action on the form. And in the end, we get a new content item as if we were about to save the content item form. And from this content item, we just call BuildDisplayAsync and render it using a view. And the Render.cshtml will just render the shape in the current layout of the frontend.

The improvement would be to find a way to customize how to render the page in the preview window. This feature is working well when we are using the content shapes with the full CMS mode, but when we are in the decoupled mode to render anything it's not based on the content shape. It's based on the developer's own views and templates and controller actions. There will a new part, called PreviewPart, that contains nothing, but has settings. When you attach the PreviewPart to your content type, you will go to Settings and define the pattern to use to build the path. So, the developer makes their own view and then they can configure this content type to say that for the preview you should use my route that will display my content type. Then when we click on the Preview button, intercepting the Render to invoke the URL that will actually render the content item from the developers perspective instead of trying to render the content item using the content shape. In this case, we won't have any customization.

In the end, we will have a working preview feature even in decoupled mode. If you are curious about the current state of this new feature, check out this branch.

Demos

Admin templates

It's like templates, but for the admin. Let's see how it works! We have front end and admin themes. When you want to customize the admin theme, right now there is no other way than creating a new theme and having the theme as a base one and selecting your own admin theme in the dashboard. This feature is kinda same as the templates module and lets you create shape templates from the admin itself for the admin. This way most developers won't have to create a custom admin theme, because it's usually just to change a summary for a blog post or a detailed template for a specific widget to look different. Or maybe you would like to hide something like you want to hide the TitlePart editor in a way to make it different.

Set up a site using the Blog recipe. To use this feature head to Configuration -> Features and enable the Admin templates feature. After you will see an Admin Templates option in the Configuration menu. Here click on the Add Template button to add a new admin template. Let's call this template Content_SummaryAdmin__BlogPost to override the summary admin shape of a BlogPost. Give it a likable content and hit save.

Now navigate to the Blog option in the admin to see the list of the blog posts. Here you will see the new look of the one blog post that we have.

This might also allow us to be able to create custom widgets to place on the landing page of the dashboard and many more.

Better defaults for the SearchController

The search feature is part of the Lucene module, that could not be the right way to do. Maybe we could have its own module, because there is a custom controller and it's doesn't care about what is indexing anything. By default when you have the Lucene module enabled you have a SearchController under the /search URL. It doesn't have any styling, because there is no customized search page for that in the TheBlogTheme.

If you navigate to Configuration -> Settings -> Search you can select which index you want to able to search and the default search fields which are the fields in which we will look for the content you type. If you haven't provided the default search fields, you will get a BadRequest in the front end with a Couldn't execute search. The search index doesn't exist message and also a log entry. But what is Content.ContentItem.FullText? For example, let's check the content type definition of the Article.

Here you can see a section called Full-text. Here you can say what should be used to look for the Articles. For instance, by default, we include the display text and the body parts. But you could say I also want to use some more data, like the values of the different fields. You can use Liquid here to provide the values.

Future improvements could be to make a custom shape for the search results for the list and for each item. And of course, change the themes to support this page correctly.

On Lombiq

Orchard Dojo Newsletter

Now we have 97 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!

No Comments

Add a Comment