Client-side validation of the form elements, fix content item shape usage in Liquid - This week in Orchard (26/05/2021)
Documentation updates, fixes for the content item shape when calling it using Liquid, a new extension method for the IContentManager, and a demo about client-side validation of the form elements. These are the main topics for our current blog post!
Orchard Core updates
Adding docs on the Recipes recipe step
A recipe is a JSON file used to execute different import and configuration steps. You can add it in a Recipes folder with a name like this {RecipeName}.recipe.json, and it will be available in the Configuration > Recipes admin page.
A recipe can execute multiple steps. In order to create a new Recipe step, you need to implement the IRecipeStepHandler interface and the ExecuteAsync method: public async Task ExecuteAsync(RecipeExecutionContext context). This page of the documentation mentions the available recipe steps, but the Recipes Step is missing from the list. Now you can read about what is the Recipes Step exactly and how you can add them to your recipe file!
Fix content item shape usage in Liquid
There was some confusion about the difference between alias and handle when using the content item shape in Liquid. The handle is the way you can reference content items with logical names and not physical IDs. In this case, you can reference a content item by its alias, which is the test here, or by its slug, which can be blogpost1.
But if you type the alias here, it will still work because some code falls back to that.
The Detail display type is the default one, so you don't have to specify it in the helper. But rendering the given display type here didn't work because there was an issue in the ShapeTag.cs code. As you can see, there was an argument.Name.ToPascalCaseDash() call for each argument. But the right method to use here is the ToPascalCaseUnderscore(), which takes display_type and converts it to DisplayType.
Load items in Admin List
Now you can find tons of new extension methods on the IContentManager to call LoadAsync. When you call this new ListAsync extension method, it will call the LoadAsync too, which will invoke the LoadingAsync and LoadedAsync events to acquire state or at least establish lazy loading callbacks.
Don't allocate for page output writing in LiquidViewTemplate
When we have the RazorPage class in ASP.NET Core, it has an Output property, which is about getting the TextWriter that the page is writing output to. We use that to render out our Liquid Templates. But when we do that, the output object is actually a buffered writer that will take whatever we write to it and buffer it and write it again to the actual results at some point. But what happens here is Liquid will write every snippet of data, every fragment to this writer, which will be duplicated in memory because it doesn't know that it can reuse it or who owns the data. Knowing that if we look at the implementation of ASP.NET, there is a class named ViewBufferTextWriter, that has a custom Write(IHtmlContent) implementation that would check if the object we pass is an HTML content. And if it's HTML content, then it won't try to allocate anything, it will just keep a reference to it. So, by doing page.Output.Write(content) it's now invoking ViewBufferTextWriter.Write(IHtmlContent) which doesn't allocate anything. And then, when the IHtmlContent is used, it should write directly to the response buffer.
Demos
Client-side validation of the form elements
This demo is about form element validation. There is an in-progress pull request by Spike where you can find the complete form validation implementation using the Validator.js library, which is a library of string validators and sanitizers. We can use this to have validation for form elements with one rule both on the client-side and on the server-side in a user-configurable way.
We set up our site using the Blog recipe and created a Page content item that contains a Form in its FlowPart and posts its input elements to a Workflow. The input elements are just about to demonstrate some validation rules. If you add a new Input, you can see some new fields, like the Validation Type, the Validation Options, and the Validation Message. As you will see from the Readme.md file of the Forms module, there is a high variety of functions that are implemented and can be used as the Validation Type.
Now let's try out the Contains Validation Type! Let's say we have a rule that the textbox should contain the 'think' word. To do that, we simply write the 'think' word in the Validation Options textbox and also added a nice error message. But as you can see, there are lot more options that you can choose from to validate the inputs of your form, which works the same way.
And here comes the workflow that we are using to submit the form. The FormRequest one is just a simple HTTP Request event followed by the Validate Form one, which checks whether the submitted form contains any validation errors. And if there were no validation errors, we redirect the user to the /Success URL, otherwise, the user will be navigated to the /Error URL.
But that's not all of it! Head to YouTube now to check out the recording about this very useful upcoming feature!
News from the community
Orchard Dojo Newsletter
Lombiq's Orchard Dojo Newsletter has 199 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!