Blazing Orchard, Replace and Delete Content Definition Deployment Steps - This week in Orchard (30/10/2020)
Blazing Orchard is a modular application framework that turns your Blazor project into a CMS-powered Blazor application by leveraging Orchard Core as a decoupled backend/CMS server using its REST & GraphQL APIs. Check out our current post to read more about Blazing Orchard and many more!
Orchard Core updates
Introduce Replace and Delete Content Definition Recipes
The Content Definition Recipe deployment step always merges settings. When using this on a dev/stage/prod environment this means arrays, like BagPartSettings and FlowPartSettings are merged. When you've removed a content type on dev, and removed it from the BagPartSettings this change is not reflected on the server when the content definitions step is running. What also happens is the widget content type definition also remains, as the recipe only focuses on updating the definitions in the step.
Of course, this is good for the scenario where definitions may have changed on both servers, and for bringing them into sync (kind of, but that scenario gets a bit confusing). But don't worry! Here comes two new deployment steps and recipes to the rescue!
- Replace Content Definitions: Replaces or Creates Type and Part Definitions.
- Delete Content Definitions: Allows a comma-separated list of types and/or parts to delete.
Let's check them out! Set up your site using the Blog recipe then navigate to the Configuration -> Import/Export -> Deployment Plans and create a new deployment plan. Hit the Add Step button if you are ready and search for the Replace Content Definitions step in the Available Steps modal. Here you can see a list containing all of the available content types and content parts that you have in your tenant. If you choose something from the list, the type and part definitions will be removed and recreated.
The Delete Content Definitions deployment step is just about to delete your content type and content part definitions.
Remove type="text/javascript" from script tags
The W3C validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. The validator found a warning in an Orchard Core site that says: The type attribute is unnecessary for JavaScript resources.
If you open up the MDN web docs by Mozilla you can learn more about the script element.
Add ShapeResult - RenderWhen
The problem is that SummaryAdmin shapes are added during BuildDisplayAsync so the conditions will be evaluated for every front-end BuildDisplayAsync display, even though they're only intended to be placed in a SummaryAdmin display.
The goal here to add a Func to the ShapeResult that can be invoked after placing a shape in a location, to evaluate whether it should be placed. This would mean that for all of the SummaryAdmin shapes the RenderWhen will only run after they have been placed in SummaryAdmin. So the evaluation will not occur during a Detail or Summary view on the front end.
The AuthorizeAsync isn't a super heavy call, but we often want to conditionally evaluate in a driver whether to return a ShapeResult so it makes sense to have something that can be applied later in the BuildDisplayAsync pipeline when we know that we are actually going to place the shape in a location.
The ContentsDriver renders the ContentsButtonActions_SummaryAdmin shape, that is responsible to display the Publish, Preview, Unpublish, etc. buttons. You need to have some permissions to be able to see these buttons. See the refactored logic here using the RenderWhen method.
Adding ID for FormPart
Now there is a new content part called FormElementPart that turns a content item into a form element by providing an ID to the form. Now the built-in Form widget has this part attached meaning that when you add the Form widget to a FlowPart, you can define an ID.
And here comes the modifications in the Form.Wrapper.cshtml wrapper. If the content item has the FormElementPart attached, then get the ID from that and use it as the ID for the form HTML element.
Demos
Blazing Orchard
Blazing Orchard is a modular application framework that turns your Blazor project into a CMS-powered Blazor application by leveraging Orchard Core as a decoupled backend/CMS server using its REST & GraphQL APIs.
Orchard Core is used here as a headless CMS, which means that Orchard Core is a separate application in the solution. The Blazor application is also a separate project. Therefore you need to host these two separately in a separate container for example. Clone the repository of the solution and check it out yourself! The structure is the following. The BlazingOrchard.Web.Application is shared by both the Blazor client host (BlazingOrchard.Web.Client) and both the server (BlazingOrchard.Web.Server).
Let's see how you can render stuff with the help of Blazor in this solution. Check out how the menu rendering works! There is a NavMenu component (NavMenu.razor) in the Shared folder of the BlazingOrchard.Web.Application project, which comes with the default placement template. But here we are using a custom component (Menu.razor) that comes from the BlazingOrchard.Menu library. This thing is also using another component called ContentItemView, which gets the data from Orchard using an HttpClient. It's reusable, which means you can use this in other components too, like in the ContentPage component.
Let's navigate to the server and manipulate the menu items of the Main Menu by adding a new Link Menu Item to it called Readme.
Now you can see that the menu structure has been updated in the Blazor application.
Or let's see the CounterButton component. This piece of code is about having a currentCount int variable to store how many times the user clicks on that button. The IncrementCount method is responsible to do the business logic for this. If you navigate to the Orchard Core server and create a new Liquid Page, you can use Liquid expressions to render this component. To do that, you can just simply add the following Liquid expression to the body of the content item: {{ "CounterButton" | shape_new | shape_render }}.
Notice that here we are creating a new shape based on the CounterButton component and render it in the body of the Liquid Page. The CounterButton component has a public ButtonText parameter. And - because we are dealing with shapes here - you can set the value of that variable by providing it in Liquid when creating the shape like: {{ "CounterButton" | shape_new: ButtonText: "Click on this button!" | shape_render }}. This way we can use the CMS to configure these components.
And you can do a lot-lot more using this PoC solution thanks to its creator, Sipke Schoorstra! Head to YouTube and check out the recording of this demo now to know more about what you can achieve by using this solution!
News from the community
Orchard Dojo Newsletter
Lombiq's Orchard Dojo Newsletter has 167 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 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!