Implementing Zone shape alternates, Lombiq UIKit for Orchard Core - This week in Orchard (25/08/2021)

Gábor Domonkos's avatar
Documentation, This week in Orchard, Shape

We can write about several nice improvements this week! Adding missing deployment steps, new strongly typed example with update endpoint in the documentation, implementing Zone shape alternates, and many more!

Orchard Core updates

Implementing Zone shape alternates

This feature is about adding Zone shape alternates like in Orchard 1. The Zone__[ZoneName] template is called when displaying a Layout zone. Which zones are available depends on the current theme. And now you can find a new section in the documentation of Orchard Core about what are the available properties of the Zone shape and how to display the content of a given zone using Liquid and Razor.

Zone templates documentation

Allow file attachments for deployment steps

Let's say you need to create a custom deployment step that accepts an Excel file as an input with data to use for creating a custom deployment step. But the form posted does not accept attached files. The issue was that the OrchardCore.Deployment/Views/Step/Edit.cshtml file has no enctype="multipart/form-data" attribute.

Allow file attachments for deployment steps

Expanded strongly typed example with update endpoint

The Content Types page of the Orchard Core documentation is about showing you how to use migrations to create your new content type, how to change the metadata of your content type, or how to add content parts or content fields to your type. Now there is a new sample that shows how to update your strongly typed content item using an API in this case. The UpdateProductPriceAsync is just about getting the Product content item by an Id and updating the value of the Price Numeric Field of it, which can be found on the ProductPart.

Expanded strongly typed example

Add site settings deployment for Content Audit Trail Settings and Google features

When you navigate to Configuration -> Features and enable the Audit Trail module, you will have a feature that provides a log for recording and viewing back-end changes. If you navigate to Configuration -> Settings -> Audit Trail and click on the Content tab, you will see a list that contains all of the content types of your installation. Here you can select the types of content whose events are recorded. And now you can export these settings using a deployment plan! To do that, just create a new deployment plan (Configuration -> Import/Export -> Deployment Plans) and add a new deployment step to it. You just need to find the Content Audit Trail settings one that exports the content audit trail settings. If you execute your deployment plan, you will see that the recipe file contains the list of the allowed content types.

Exporting the Audit Trail Content settings

And the same goes for the Google Analytics and Google Tag Manager modules. If you enable those, you will find some settings under the same Configuration -> Settings option called Google Analytics and Google Tag Manager. Now you just need to add the Google Analytics Settings and Google Tag Manager Settings deployment steps to your plan, and after you execute that, you will get the following recipe file.

Exporting the Google Analytics and Google Tag Manager settings

Demos

Lombiq UIKit for Orchard Core

The Lombiq UIKit for Orchard Core module contains reusable shapes like text editors, custom-style checkboxes, dropdown editors, and in the future potentially more complex editors.

Add the module to your solution and enable the Lombiq UI Kit - Showcase page feature if you want to check out the currently available shapes. You can see them under ~/UIKitShowcase after the feature is enabled. The example code for using these shapes can be seen in Views/Showcase/Showcase.cshtml. This module contains only those stylings which are needed for these shapes to work.

During one of our client projects, we needed to standardize UI elements both on the front end and the admin area. Like text fields, drop-downs, and so on. Once you go beyond the very basics with styling and functionality this comes a bit more complex. Centralizing things is a good option in this case, and while we are doing that let's have an open-source module about it.

And we have already added this module to our Open-Source Orchard Core Extensions solution! The only thing you need to do is to clone this repository and set up your Orchard Core site with any recipe you want. After head to the admin UI of Orchard Core and enable the Lombiq UI Kit - Showcase page and Lombiq UI Kit modules. Now you just need to navigate to the https://localhost:44335/UIKitShowcase URL, which showcases all the elements that are built-in into the module.

The Lombiq UI Kit Showcase page

But how can you use these? Especially they are just simple tag helpers. If you open the mentioned Showcase.cshtml in the Lombiq.UIKit module, you will see the content of the showcase page. Here you can see we have the editor tag helper that accepts several properties like the type, labelPosition, iconClasses, placeholder, and so on. By just providing these you can have nice, standardized UI elements that can be also used in Liquid as well.

The content of the Showcase.cshtml

If you would like to know more about this feature don't forget to check out this recording on YouTube!

News from the community

DotNest Core

DotNest Core is a complete redevelopment of the DotNest platform, all on the latest version of Orchard Core. We've been running it with a couple of select few customers for a while now, and it's time to open it up a bit more. While you can't yet simply create an Orchard Core-based DotNest site, you can sign up for our limited beta here. You'll soon be able to get a fully functional, reliably hosted Orchard Core site on DotNest where you can build your personal website or something to showcase your Orchard skills with.

Sign up for the DotNest Core beta

Orchard Dojo Newsletter

Lombiq's Orchard Dojo Newsletter has 219 subscribers! 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 is 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