Our blog contains the activity stream of Orchard Dojo: general news, new resources or tutorials are announced here.

Show a badge if a user is locked out, Lombiq Orchard Visual Studio Extension v.1.8.1 - This week in Orchard (27/06/2025)

This week's topics include displaying a badge when a user is locked out, renaming the ResetIndexProfile and RebuildIndexProfile recipe steps, and enhancing documentation for the indexing module. And have we mentioned that we've released a new version of our Orchard Visual Studio Extension, which now includes support for Razor Pages to the Dependency Injector?

Latest tutorials

Featured tags

IIS
API
SMS
SEO
MCP
All tags >

Secrets module, Cookie based dark mode theme - This week in Orchard (10/01/2021)

We start this year by showing you the latest updates of the Dark mode of the admin UI. After that, you can read about how can expose your Lucene or SQL queries through GraphQL! Finally, we will check out the latest improvements to the Secrets module! Orchard Core updates Dark mode V2 (cookie based) A few weeks ago we mentioned that now you can use the dark mode for your admin theme. The only thing you have to do is to go to Configuration -> Settings -> Admin and check Enable dark mode admin theme. The new version of dark mode contains several improvements: Cookie based settings storage. Use only one CSS to prevent flickers and animations when switching from light to dark mode and vice versa. Use data-theme on HTML element. Fixing several modals. Fix GraphiQL styles (Codemirror global styles conflict). But what does cookie based mean? Find the DarkModeService.cs file in the OrchardCore.Themes project and check out the IsDarkModeAsync async method in it. As you can see, there is an adminPreferences cookie collection, that contains a darkMode boolean property. If it's true, that means the dark mode has been applied to the admin theme. And here comes the trick! If you check out the first few lines of the Layout.cshtml file of the admin theme, you will see that the code checks if the dark mode is currently enabled or not and puts the CurrentTheme value into the data-theme data attribute. Tutorials page in the documentation Many external resources are available in order to teach you how to develop with Orchard Core and keep you informed with the latest news and the goal of the Resources page is to give you a nice overview of these resources. Now you can find a new Tutorials page that lists some content that you can use to learn Orchard Core. Here you can find our Dojo Course 3 video series or the Orchard Core Training Demo module! Custom query schema fix and documentation Method BuildSchemaBasedFieldType inside LuceneQueryFieldTypeProvider.cs and SqlQueryFieldTypeProvider.cs was wrong because official JSON schema should look something like this: { "type": "object", "properties": { "firstName" : { "type" : "string" }, "age": { "type": "integer" } } } The line where code tries to get type specifically child["type"] will throw an error of System.InvalidOperationException: 'Cannot access child value on Newtonsoft.Json.Linq.JProperty.'. foreach (var child in properties.Children()){ var name = ((JProperty)child).Name; var nameLower = name.Replace('.', '_'); var type = child["type"].ToString();... The fix was something along the lines of and the properties key should be lowercase. foreach (JProperty child in properties.Children()){ var name = child.Name; var nameLower = name.Replace('.', '_'); var type = child.Value["type"].ToString();... You can find nice documentation here that tells you how you can expose queries through GraphQL. Demos Secrets Module We mentioned the latest updates regarding secret management back in September and now here comes the continuation of this upcoming feature. If you haven't known about it yet, you should definitely check out that post and the two recordings on YouTube. So, let's see what we are talking about exactly! The idea here is to extend some of the places that we can use to store secrets. For example, let's navigate to the Email settings (Configuration -> Settings -> Email) and say we require credentials for authentication. And of course, we need to define a user name and a password. The password is get stored with data protection. But if we export this to a production server where the data protection keys are different, the setting will no longer work and you can get an exception when you would like to use it. As you can see on the screen, the concept here is to have a secret where you select which secret you would like to use. We have already defined one called email, let's select this one. We managed that secret and the value of it under Configuration -> Secrets. Here we can select where we would like to store this secret, which can be the Database Secret Store or the Configuration Secret Store. But if you enable the Azure KeyVault Secrets Store feature, you can use the KeyVault store too. Normally when we have a form, we use an HTTP Request event to drive the form to a workflow. Let's create one Workflow, call it Form Submit and add an HTTP Request event to it. Normally what we have in the query string is a token here which is protected with data protection but we could have a little problem with it. When you use this in a Form widget and you have moved the form to a production server, it doesn't work because the token was no longer valid because it is was stored using a local data protection key. But we have a solution for that too! Here you can notice one new option called HTTP Request Event Secret. You can just simply type a preferred name to the secret and hit enter, which will create the new secret for you. Now let's create a form. If you set up your site with the Blog recipe, you can just simply enable the Forms module and create a new Page. Add the Form widget to the FlowPart where you can see the same picker that we can use to select the given secret that we would like to use. If you pick a secret, you don't need to specify the action (the URL to submit the form to) because it is stored in your HTTP request event secret and that will override the specified action value of the form. If you navigate to Configuration -> Secrets, you can check out the details of the formsubmitted secret that we have just created. The difference here is that now you have a picker here that lists all the workflows that have an HTTP Request Event as a starting activity. By using that picker you can assign this secret to another workflow if you would like to. But we are just scratching the surface of this feature and haven't talked about anything about how you can import/export your secrets using deployments plans. If you are interested in more, don't forget to check out this recording on YouTube! News from the community Our full Orchard Core tutorial series, the Dojo Course 3 is here! After a long wait, the new Orchard Core version of our legendary Dojo Course tutorial series is here, the Dojo Course 3! Are you a newcomer and want to learn Orchard Core from the ground up, both from a user's and a developer's perspective? Are you somewhat familiar with Orchard Core but would like to get up to speed and become an Orchard pro? Look no further, check out Dojo Course 3! Dojo Course 3 guides you from the very basics of Orchard Core all up to be able to write your own themes and modules, utilizing various APIs of Orchard. If you're looking for our previous Orchard 1.x tutorial series check out Dojo Course 2. Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 183 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! 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!

Admin Dashboard, Display titles in the top bar - This week in Orchard (24/12/2020)

Option to display page titles in the top bar on the admin UI, documentation for external libraries, new FileDocumentStoreAttribute, and a lot more are waiting for you in our last blog post for this year. Let's get started! Orchard Core updates Display titles in the top bar Set up your site using the Blog recipe, then navigate to the admin UI of the site. Head to Configuration -> Settings -> Admin. Here you will see a new option, called Display titles in the top bar. Let's put a tick here and see what will happen. If you save it, the titles will be placed in the top bar of the admin theme. The only thing you have to do is to slightly modify the appearance of the title of your page in the admin UI by making sure to put it in the Title zone. <zone Name="Title"><h1>@RenderTitleSegments("My page")</h1></zone> So, if you set that you would like to display the title in the top bar, then the Title section will be rendered in the top bar section of the theme, otherwise, it will stay in its own place. Hide connection string when already set for the tenant When a connection string is defined in an environment variable, the value is displayed on the Tenants creation page: $env:OrchardCore__ConnectionString="server=localhost;uid=root;database=db;password=my-secret-pw;"$env:OrchardCore__DatabaseProvider="MySql" Now if the connection string is coming from the configuration in the setup screen, then it's not displayed anymore, and this way we can't change it. The SetConfigurationShellValues method in the AdminController of the OrchardCore.Tenants module checks the values of the shell settings based on the ConnectionString and DatabaseProvider keys and if there are any, the EditTenantViewModel will get these values. And now we can only show the given sections on the front-end if these values haven't been set from the shell settings. External libraries documentation Orchard Core uses several external .NET libraries, like Jint, YesSql, and Fluid. But you can find several Client-side libraries here too, like GraphiQL, TypeScrip, React, or Vue. The goal of this new page in the Orchard Core documentation is to list all of the used libraries with their version. FileDocumentStoreAttribute providing a FileName By default, the file name is equal to the name of the related document type, e.g. ContentDefinitionRecord => ContentDefinitionRecord.json. So, for compatibility, this attribute allows keeping the current ContentDefinition.json without having to manage this specific case in FileDocumentStore with a hard-coded string. Add the email optional claim steps to AAD integration document If you follow this how-to guide, you can build a blog that allows users to login with their AzureAD account and gets assigned roles based on the Security Groups they belong to. However, the documentation hasn't mentioned yet how to set up optional claims to configure additional information when you are registering a new application (App registration) on the Azure Portal. Now this how-to has been updated with the way how you can add optional claims (like email) to your configuration. Demos Admin Dashboard To see this new feature the only thing you have to do is to just simply set up your site and navigate to the admin UI. After you will get a screen something like this. Here you can see cards, that are dashboard items, that are about to represent a piece of functionality of a given feature or module. For example, the one called Content items is coming from the Contents module and by using that, you can easily do some content-related functions (like listing the latest or the draft content item). It's pretty straightforward, so let's look under the hood to see how you can create your own dashboard items. But first, let's see how the site renders the items on the homepage of the admin UI. The AdminDashboard.cshtml in the OrchardCore.Admin module is just about to display the SummaryAdmin display type of every AdminDashboardItem that can come from any module. Let's see the first card with the title Content items. If you open up the Views folder of the OrchardCore.Contents module, you will find a view with the filename AdminDashboardItem.SummaryAdmin.cshtml. Here you can see the HTML structure of a Bootstrap card item with the custom content inside it, which in our case is some links to the AdminController in this module. We have a driver too to say display the SummaryAdmin display type and place it in a given location. That's all you have to do to have a new card on the homepage of the admin UI. This feature is under development and might be changing in the future. And it has been already changed just before we finalized this blog post. :) But what are the exact changes here? Well, that will be covered in an upcoming post, stay tuned for that! If you would like to know more about this, check out this recording on YouTube! News from the community A new website using Orchard Core: AeroSpace Cornwall AeroSpace Cornwall is a research, development and innovation fund, that enables businesses to take their idea and turn it into a viable product ready for market in the space and aerospace sectors. Check out this site to see the loads of capabilities that you can achieve using the CMS. If you are interested in more websites using Orchard and Orchard Core, don't forget to visit Show Orchard. Show Orchard is a website for showing representative Orchard CMS (and now Orchard Core) websites all around the internet. It was started by Ryan Drew Burnett, but since he doesn't work with Orchard anymore, as announced earlier it is now maintained by our team at Lombiq Technologies. Our full Orchard Core tutorial series, the Dojo Course 3 is here! After a long wait, the new Orchard Core version of our legendary Dojo Course tutorial series is here, the Dojo Course 3! Are you a newcomer and want to learn Orchard Core from the ground up, both from a user's and a developer's perspective? Are you somewhat familiar with Orchard Core but would like to get up to speed and become an Orchard pro? Look no further, check out Dojo Course 3! Dojo Course 3 guides you from the very basics of Orchard Core all up to be able to write your own themes and modules, utilizing various APIs of Orchard. We're publishing a tutorial video every day for 40 days starting on 1 December. So, this is your 40 days of Orchard :). Videos about Orchard Core development are on the way, you can see a new one every day! If you are really interested in the coding part, the upcoming, almost 20 videos are specially for you. If you're looking for our previous Orchard 1.x tutorial series check out Dojo Course 2. Christmas in Lombiq Sometimes we do stuff. Together. Not (just) in front of computer screens. These are some usual events in Lombiq that are all announced and arranged in advance. We periodically have an event called RnDay: this is a few hours long event where we share with each other what we recently worked on and what we plan to do. E.g. if we recently finished a project then the project's team members demo what they've done. Last week we had our last RnDay for this year but this time we have to make it online. We also named this event to The 13th RnDay - Pandemic Edition! We also tried to do our best to make a nice group photo, you can see the result down below. :) We would like to thank you all for reading our posts and making the Orchard community stronger together with us! We hope that we could give you valuable news and demos about the happenings around Orchard and Orchard Core from time to time by reading our posts and of course the This week in Orchard newsletter. We would like to wish everyone a Merry Christmas and a Happy New Year! See you next year! Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 178 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! 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!

GitHub Actions, Media Slugify - This week in Orchard (18/12/2020)

This time you could see two great demos in our post! One is about the GitHub Actions integration for Orchard Core and the other one is about a new addition for YesSql. But first, let's check out the latest improvements of Orchard Core, like the new Media Slugify feature or the Synchronization Latency Option! Orchard Core updates How to enable Razor templates in my theme? It's just a few additional lines to the Orchard Core documentation, but we thought we should mention this change because it's a very common mistake that developers would like to use Razor in their custom themes instead of Liquid but the Razor code in the cshtml files doesn't do anything. New feature to slugify media folders and files to make them SEO-friendly Let's set up your site using the Blog recipe then navigate to the admin UI of Orchard Core. Head to Configuration -> Features to find the new one, called Media Slugify, and enable it. The media slugify module slugifies new folders and files to make them SEO-friendly. Now navigate to Content -> Media Library and try to upload something to the Media Library. And let's say that the name of the file that you would like to upload is something like this is a Szép kép.jpg. You can see that the filename contains several spaces and some special chars too. If you upload this image, the feature will slugify the name of the image and the result will be this-is-a-szep-kep.jpg. And the same applies to the folder names too. Check out the following gif to see what will happen if you upload files and create a folder with special characters when the module is disabled or enabled. If you would like to read more about this new feature, this will be your page on the Orchard Core documentation. Using Docker with Orchard Core Orchard Core's source code repository includes a Dockerfile which will allow you to create your own Docker images and containers. It can be quite useful for Orchard Core developers when needing to test PR's. It allows them to deploy locally quickly in some testing environments. There is a new page in the Orchard Core documentation with examples that will be shown for that context. Docker can also be used for more complex usage (ex: production deployment) but this documentation doesn't aim to explain that in detail. For more advanced examples we strongly suggest reading docker and docker-compose documentation. Synchronization Latency Option This is about being able to set how long you are OK to wait before refreshing your document cache. Let's say you have multi-node and the document updates on one node. It will be in the Redis cache, but you don't check for the new values every request, we can just say this is the grace period for which I don't want to check the cache. Like I would only check it every second even if I have one million requests per second, one million times we will get the value from the cache, but the next one will say: OK, I need to get something to be refreshed from the Redis cache. It was set to one second by default. Check the GetInternalAsync method of the DocumentManager, where we get the SynchronizationLatency property of the DocumentOptions. You can set the values of the DocumentOption using app settings. Demos GitHub Actions GitHub Actions allows you to use service containers, so basically just loading a Docker image and exposing it as a service to your main container that runs your tests. This is basically the same as Docker Compose when you have multiple containers running concurrently. What's need is that by using the Orchard environment variables, be able to run the functional tests for each database type to make sure the CMS works on all of those. If you open up the GitHub repository of Orchard Core, you will find several yml files in the .github/workflows folder. The one you can see here is called functional_all_db.yml that runs the functional tests on all databases. The first job here will run the Cypress script called mvc:test on the latest version of Ubuntu. If you aren't familiar with Cypress and Cypress test, you could see a demo about that in this This week in Orchard post. And there are a lot more tests in the workflows folder, check them out if you are interested in running tests! To run the actions manually, we can go to the Actions tab of the GitHub repository of Orchard Core where you can see all the workflows defined in these yml files, like Release - CI, Functional Tests - all Databases, etc. Select the Functional Tests - all Databases one and then click one of the results to see the actual jobs. And you can see all the steps in the job with the time it needed to complete with detailed execution results. And there are a lot more to see and speak about here. If you would like to know more, you should definitely check out this recording on YouTube! YesSql: Fixing subclass support Let's navigate to the GitHub repository of YesSql and open the CoreTests.cs file in the test/YesSql.Test folder and find the ShouldQuerySubClasses unit test. Here you can see a Circle and a Square class, these are both inherit from Shape. After we are creating some new instances of the Circle and Shape we do some queries and say give me the Squares and Circles. The new thing is in this line: Assert.Equal(3, await session.Query<Shape, ShapeIndex>(filterType: false).CountAsync()); Here we say list all the Shape types. And there will be three of them: two Squares and one Circle. So, now you can query by the base type to get inheritance inside that and it was not working before. And in this case, the index is just to store the name of the type that you are storing, just to be sure that it's the correct type. If you would like to see the recording of this new feature, head to YouTube now! News from the community Our full Orchard Core tutorial series, the Dojo Course 3 is here! After a long wait, the new Orchard Core version of our legendary Dojo Course tutorial series is here, the Dojo Course 3! Are you a newcomer and want to learn Orchard Core from the ground up, both from a user's and a developer's perspective? Are you somewhat familiar with Orchard Core but would like to get up to speed and become an Orchard pro? Look no further, check out Dojo Course 3! Dojo Course 3 guides you from the very basics of Orchard Core all up to be able to write your own themes and modules, utilizing various APIs of Orchard. We're publishing a tutorial video every day for 40 days starting on 1 December. So, this is your 40 days of Orchard :). And now we have published every video that is about the admin UI features of Orchard Core. From video 19., we will check the structural overview of the Orchard Core source, and then we will start coding! If you are really interested in the coding part, the upcoming 20 videos are specially for you. If you're looking for our previous Orchard 1.x tutorial series check out Dojo Course 2. A new website using Orchard Core: Cornish Mining World Heritage Explore what World Heritage Site status is and why the Cornwall and west Devon mining landscapes have this globally important designation. Check out this site to see the loads of capabilities that you can achieve using the CMS. If you are interested in more websites using Orchard and Orchard Core, don't forget to visit Show Orchard. Show Orchard is a website for showing representative Orchard CMS (and now Orchard Core) websites all around the internet. It was started by Ryan Drew Burnett, but since he doesn't work with Orchard anymore, as announced earlier it is now maintained by our team at Lombiq Technologies. Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 176 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! 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!

Cypress Tests, Media Profiles background color - This week in Orchard (13/12/2020)

Have you ever wondered how to write end-to-end tests for your Orchard Core application? Check out our current post to read about Cypress, which is a next generation front end testing tool built for the modern web. But first, let's start with the other exciting improvements! Orchard Core updates Specify background color Media Profiles feature in Orchard Core is a powerful feature allowing you to specify image resizing options and much other stuff. A profile can then be called with the profile name resize_url: profile: 'banner' rather than having to specify all the resizing options that may apply. We showed you a great demo in this This week in Orchard post about the Media Profiles feature. And here we mentioned the media crop picker and the alt text editor features with YouTube videos too. If you haven't heard about these features, you should check out those posts and videos, especially if you are dealing with several images on your website. The new feature is that now you can specify the background color for the processed image. Let's try this out! Set up your site using the Blog recipe, then navigate to the admin UI of Orchard Core. Head to Configuration -> Media -> Media Profiles and edit the predefined banner Media Profile. Set the resize mode to Pad or BoxPad. If you do that, you will see a new option here called Background Color. Using that property you can select the background color for the processed image. The hint shows you the example values, let's just put red there. Save this setting and open the predefined blog post. And in the screen below you will see our beautiful header with the red background color. If you check out the documentation of Orchard Core, you will find some examples of how you can use the bgcolor argument to set the background color of the image using Liquid Filters or by using the Orchard.AssetUrl Razor Tag Helper. Fix NRE in feature recipe step Let's say you have a recipe and in your recipe, you have a Feature step. The Feature step can be used to say which module you would like to be enabled or disabled if you are running the given recipe, like "steps": [ { "name": "feature", "disable": [], "enable": [ "OrchardCore.HomeRoute", "OrchardCore.Admin", "OrchardCore.Diagnostics", "OrchardCore.DynamicCache", "OrchardCore.Features", "OrchardCore.Navigation", "OrchardCore.Recipes", "OrchardCore.Resources", "OrchardCore.Roles", "OrchardCore.Settings", "OrchardCore.Themes", "OrchardCore.Users" ] }] Here we enabled several modules, but the disable step is empty. That's because, in this recipe, we just want to enable some modules, don't want to disable any of them. But if you define a feature step in your recipe without a disable or an enable step, you will get an NRE when executing the recipe. It's worth to mention the fix because it's very instructive. Let's see the FetaureStep IRecipeStepHandler, where you can see the ExecuteAsync method, which is responsible to process a given recipe step. The assumption is that the Contains() method returns with true or false and therefore you don't need to add the == true. And it's true. But in this case, the Disable string array can be null and if it's null, it will return null. And null equals true will be false. So, without == true the answer can be null which did not compile: "Cannot implicitly convert type bool? to bool". And now if you don't have the enable or the disable step in your recipe, the execution of the recipe won't fail. Now if you check the built-in recipes, like the blog.reicpe.json file, you will not find the disable step there because it's unnecessary. Improve sending emails from Orchard Core Email sending in Orchard Core has got several improvements lately. You can use the SendAsync method from the SmtpService to send emails from Orchard Core. The MailMessage class represents a class that contains information about the mail message. First, now your message can have multiple authors seperated by the ',' or the ';' chars. The other is according to the following MailKit docs: "When the list of addresses in the Reply-To header is empty, replies should be sent to the mailbox(es) specified in the From header". See the related changes from line 116. Upgrade YesSql and fix multiple taxonomy filter issues The goal is to be able to filter on multiple taxonomies. The All method in the IQuery means, that all the predicates inside need to be true. And inside the All, you can call Any if you would like to. And actually, you can't have the same record with two different properties. But now you can do that multiple times and that would work, you can do an AND, it will work to have two predicates on the same index. GraphQL is building SQL queries dynamically, because in GraphQL you can have complex expressions, like ANDs, ORs, INCLUDEs, STARTSWITHs, and all the things you want on different properties. We parse that thing and convert it to a dynamic SQL. The generated SQL would have to do INNER JOINs on the index table. And it broke GraphQL. Nakamura understood how YesSql was building the query after the change by looking at the code of YesSql. And he changed the code to react to these changes by creating new kinds of dynamic SQL queries by using private reflection to get the dynamic names of the dynamic aliases. Demos Cypress Functional Tests Clone the Orchard Core repository then navigate to the tests/functional folder using Windows PowerShell and type npm install to install the packages among with the package of Cypress OrchardCore that is a collection of Cypress commands for interacting with Orchard Core. Make sure you deleted your App_Data folder inside the OrchardCore.Cms.Web folder and type npm run cms:host to build the application and run it. Check out the package.json file in the OrchardCore.Tests.Functional project to see the built-in scripts that you can use and type in the PowerShell window. Now you have a running instance of Orchard Core, time to do some testing! Open a new PowerShell instance and navigate to the same tests/functional folder. Type npm run cms:cypress, which will open the Cypress UI. After some seconds a new window will open with the Cypress test runner. Here you can run all the tests or just pick one by simply clicking on it. Since the tests generate a GUID for the site name and the URL prefix, you can rerun them over and over again. If you run a test, you can visually see what it's doing in the browser. Cypress verifies the JavaScripts too, so if there is any JavaScipt error on the page you visit using the tests, it will show you. If you hover over with your mouse in the steps on the left side of the browser, you can see what was the highlighted step actually did. Like you could see it was getting the textbox with the UserName ID and typed admin there. If you run the agency-test, you will see the following in your browser. But how can I add tests like these and where are these tests in the solution? Well, navigate to the cms-tests/cypress/integration folder of the OrchardCore.Tests.Functional folder, where you can see the exact same files as you can see in the Cypress UI. As you can see, the blog-test.js files just open the given tenant and after logging in to the site, navigates to the admin UI of Orchard Core. If the HTML element with the ta-content class contains the Welcome text, it means that the login was successful. And that's not all of it! If you would like to know more about Cypress testing, check out this recording on YouTube! News from the community Our full Orchard Core tutorial series, the Dojo Course 3 is here! After a long wait, the new Orchard Core version of our legendary Dojo Course tutorial series is here, the Dojo Course 3! Are you a newcomer and want to learn Orchard Core from the ground up, both from a user's and a developer's perspective? Are you somewhat familiar with Orchard Core but would like to get up to speed and become an Orchard pro? Look no further, check out Dojo Course 3! Dojo Course 3 guides you from the very basics of Orchard Core all up to be able to write your own themes and modules, utilizing various APIs of Orchard. We're publishing a tutorial video every day for 40 days starting on 1 December. So, this is your 40 days of Orchard :). If you're looking for our previous Orchard 1.x tutorial series check out Dojo Course 2. Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 174 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! 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!

User Picker Field, the new user ID - This week in Orchard (06/12/2020)

This time we will do a little deep dive and check out some important changes in the code base of Orchard Core. But don't be scared, we promise you will like these changes, especially the demo about the new User Picker Field! Orchard Core updates Allow media width and height values without a token You could see a demo a few weeks ago in this post about the new options for Media Field where you can set the alt text of your image and you can also crop your images using a nice media crop picker. The way it was working is it's putting different kinds of options to the query string that allows you to manipulate your image. Let's see the following URL for an example: https://localhost:44300/media/post-bg.jpg?width=1&height=600&rmode=crop&rxy=0.2,0.5. Here you can see we set the width and height of the image from the media library. We also set the resize mode for the processed image with other parameters as well. A few days later the community introduced a new bool option added to the MediaOptions called UseTokenizedQueryString to encrypt the image processing query string to prevent disc filling, that is true by default. And now here comes another great stuff that allows values for width and height to be provided via the query string even when tokens are enabled. What does it mean? Let's see an example of it! Set up your site using the Blog recipe then open the default banner image URL of the predefined blog post with the following query string parameters: https://localhost:44300/media/post-bg.jpg?width=1024&height=600. Note that the tokens are enabled by default, but you can still set the width and the height of the image now. Don't forget that this will only work if the height and width values match the supported sizes array values. Introduce Culture Scope There is a new CultureScope class that you can use if you want to locally set the current culture (the current user interface culture and the culture used by the current thread). You can find several unit tests to see how you can use it, but check out this one for now. Here you can see that the culture is set to French, but that setting only applies inside the using statement. Implement UserId All the user profiles that you have locally, now have a new property called UserId, which is unique. We used to use a name, the user name as the way to identify a user. But now the community decided to use a unique ID such that you can't guess user ID or you can't recover another set or permission or ownership by mistake, because an account has been deleted and someone created a new account using the old name and somehow the logical references are still kept based on this name and you would inherit something from that. So, to prevent that, Orchard Core is using now a user ID. If you take the latest version of the dev branch and just run your code there will be a migration that copies the user names of the existing users as the user ID. This way you don't have any change in your content, it will still work the same and be careful that your user ID equals a string like 4gq8jagmrtxrwvg21csa0b6y4y, which is safe, because the next time someone creates a new user, they can't impersonate anyone else like recovering an old account, because it will be a newly generated unique identifier that can't match something like that. And how can you find the currently logged in user? Check out the code in the DefaultContentsAdminListFilter where you can see that now, instead of using the user.Identity.Name, you can use the FindFirstValue extension method from ASP.NET Core to return the value of the first instance of the specified claim type, or null if the claim is not present. And then you can set that value as the Owner of the content item. Demos User Picker Field Let's say you would like to create a blog where multiple users can create blog posts and you want to connect the user account of the author user with the given blog post by showing the name of the user somewhere in the detail view of the post. It's easy because the users can log in to the admin UI of Orchard Core and publish their own posts. In this case, they will be the authors of the given content items. But let's say we don't want to give them access to the site. We just want them to send the content of the blog post to a given email address and the site editors will edit and publish the posts. Is there an easy way to connect content with user accounts in Orchard Core? Set up your site using the Blog recipe. This recipe comes with a predefined blog where you can create new blog posts. The posts can have several properties: the title, the banner image, tags, the category, and so on. We will modify the content definition of the Blog Post to do some tricks. Navigate to the admin UI of Orchard Core and head to Content -> Content Definition -> Content Types and edit the Blog Post one. Click on the Add Field button and find the recently added one, called User Picker Field. This field allows you to connect users with a content item. Here you can say that you want to allow multiple users to be selected, allow the picker to display users from all roles, and many more. If you put a tick on the Display All Users checkbox, every user will be in the list that you can choose from, if you remove the tick, the available roles in the system will be listed and you can choose from them. Now if you edit the predefined blog post, you will see the User Picker Field in action. In this case, we have two users in the system named admin and editor. The admin is the superuser with the Administrator role and the editor user has the Editor role. We can see both of them because we said we would like to allow the picker to display users from all roles. If you save your content item, the field will show you the user names of the selected users seperated by a comma (if you selected multiple ones). And you will see a No users. message is you haven't selected any users. You can find some lines about the User Picker Field in the documentation of Orchard Core and a nice presentation of this feature on YouTube! News from the community Our full Orchard Core tutorial series, the Dojo Course 3 is here! After a long wait, the new Orchard Core version of our legendary Dojo Course tutorial series is here, the Dojo Course 3! Are you a newcomer and want to learn Orchard Core from the ground up, both from a user's and a developer's perspective? Are you somewhat familiar with Orchard Core but would like to get up to speed and become an Orchard pro? Look no further, check out Dojo Course 3! Dojo Course 3 guides you from the very basics of Orchard Core all up to be able to write your own themes and modules, utilizing various APIs of Orchard. We're publishing a tutorial video every day for 40 days starting on 1 December. So, this is your 40 days of Orchard :). In the first few videos, we gave you an introduction to Orchard Core and showed you a way about how to set up your first Orchard Core website. After we started to talk about the content model of Orchard Core, checking out the basics of content management. We will stay in the admin UI for a little in the upcoming days and check out the other basic features of the CMS like how to add widgets with layers, managing the menus, and the media files. After we will see how can you search and index content items, and build forms using the Forms and Workflows feature. But we will not spoil the topics of the upcoming videos. :) If you're looking for our previous Orchard 1.x tutorial series check out Dojo Course 2. Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 172 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! 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!

Custom User Settings, Advanced Markdown Extensions - This week in Orchard (27/11/2020)

Now it's easier to extend the user setting than ever thanks to the new custom user settings feature! Create advanced Markdown with the new extensions, use the new isInRole layer rule, and many other great things in Orchard Core! Check out our current post for more! Orchard Core updates Use Advanced Markdown extensions Set up your site using the Blog recipe and navigate to the admin UI to edit the predefined blog post. You can use a Markdown editor to edit the body of your blog post. To convert the Markdown string to HTML, Orchard Core using Markdig, which is a fast, powerful, CommonMark compliant, extensible Markdown processor for .NET. This processor has a great extensible architecture with more than 20 built-in extensions to allow footnotes, support emojis, and smileys, adding figures, enable Bootstrap classes, and so on. You can check out the features section of the readme.md file to know more about these extensions. And the good news is now you can select which extension you want to enable by just setting different configuration values in your appsettings.json file. The default option is to turn on the nohtml extension (that disables HTML support) and the one called advanced, which enables advanced Markdown extensions. By turning on the advanced extension, Markdig will use every extension except the BootStrap, Emoji, SmartyPants and soft-line as hard-line breaks extensions. On the screen above you can see we also turn on the emoji extension. Let's try this out quickly! Here you can see we added some Emoji shortcodes and smileys to the blog post and they are converted to their respective Unicode characters. And we also added a task list at the end of the blog post that comes from the TaskLists extension that is enabled by default because the TaskList extension will be enabled if you say you want to use the Advanced Markdown extension. You can read more about Markdown configuration in the Orchard Core documentation too! Add isInRole layer rule Let's say we would like to create a layer that contains widgets that are only available for users who are in the Editor role. We cannot do that easily until now, so let's try out the newly added isInRole layer rule! Set up your site using the Blog recipe then head to Design -> Widgets in the admin UI. Here you can see the two predefined layers: Always and Homepage. Click on the Add button to create a new layer. The only thing we have to do here is to set the Rule to isInRole("editor"). Now put a widget to this layer and create a new user with the editor role. If you log in with that user you can see the widget in the Content zone of the theme. Add CloneContent Permission as Content Type dynamic permission Navigate to the admin UI of your site then head to Security -> Roles and hit the Edit button near an arbitrary role. Now type the clone word in the search box that will list the new clone content permissions. This means now you can set the clone content permission for every securable content type (a content type that can have custom permissions). Improves Document Options and Compression MessagePack for C# is an extremely fast MessagePack serializer for C#. It is 10x faster than MsgPack-Cli and outperforms other C# serializers. MessagePack for C# also ships with built-in support for LZ4 compression - an extremely fast compression algorithm. Performance is important, particularly in applications like games, distributed computing, microservices, or data caches. And now this package is part of Orchard Core. Orchard Core using MessagePack to GZIP content, because there is an option in MessagePack to also compress it. There is a new IDocumentSerialiser to say how to serialize into a sequence of bytes or deserialize from a byte array. JSON.NET can serialize anything, but if there is an issue with a custom document, we can use MessagePack to customize the way how to serialize content from the distributed cache. Demos Custom User Settings Set up your site using the Blog recipe. Now navigate to the admin UI and head to Configuration -> Features to enable the new Custom User Settings feature that allows content types to become custom user settings. After we can create a new content type that will be responsible to store the custom user settings. To do that, head to Content -> Content Definition -> Content Types and create a new content type. The most important thing to do here is to make the stereotype CustomUserSettings and remove the ticks from the Creatable, Listable, Draftable, etc, checkboxes. We named our content type as User Profile and attached three fields to it: a media field to store the avatar of the user and two text fields to store the first name and the last name of the user. We haven't added any content parts to this content type. Let's navigate to Security -> Users and edit one of the users in the system. Here you will notice a new tab near the Content one with the name User Profile. That's because we named our content type User Profile. Here we specified the first and the last name of the user and attached an image to it. If you hit Save, you can persist your changes for this given user. Now it's time to use our custom user settings from code. The Orchard Core documentation has a great detailed page about how you can get the custom user settings using Liquid, how to adjust the placement, and many more. Notice the brand new users_by_id Liquid Filter that you can use to get the User object from the database by a user ID. But how can you get your custom user settings in C#? Well, that's also quite simple! The User class in Orchard Core implements the Entity class, which has a JObject property called Properties. And inside the Properties, you can find the whole UserProfile content type with it's attached content parts and fields. { "Email": "[email protected]", "EmailConfirmed": true, "Id": 18, "IsEnabled": true, "LoginInfos": [], "NormalizedEmail": "[email protected]", "NormalizedUserName": "ADMIN", "PasswordHash": "AQAAAAEAACcQAAAAECfRTVdPZm1meRWrxja3vzbJlslet72QzrqSsPKxOeeGKQs7bcMVeTYRSNrhc2yjpw==", "Properties": { "UserProfile": { "Author": "admin", "ContentItemId": "4k7hmhyywz1ettg2hkv5xpcfxz", "ContentItemVersionId": null, "ContentType": "UserProfile", "CreatedUtc": null, "DisplayText": null, "Latest": false, "ModifiedUtc": "2020-11-24T14:36:36.8629171Z", "Owner": null, "Published": false, "PublishedUtc": null, "UserProfile": { "Firstname": { "Text": "Admin" }, "Image": { "MediaTexts": [ "" ], "Paths": [ "c827782e12851cd2cf4c5161c4f5445a.jpg" ] }, "Lastname": { "Text": "Orchard" } } } }, "ResetToken": null, "RoleNames": [ "Administrator" ], "SecurityStamp": "FAALQXTJCDTD5EOVTLCW6N75CW3BOVYU", "UserClaims": [], "UserId": "4gq8jagmrtxrwvg21csa0b6y4y", "UserName": "admin", "UserTokens": []} Navigate to the CustomUserSettingsDisplayDriver and check out the GetUserSettingsAsync private method. Here you can see the way about getting the custom user settings content item from the Properties array. And after you can easily work with the properties of your content item. And that's not all of it! Check out this recording on YouTube to know more about this great, useful feature! News from the community Introducing 40 days of Orchard Core: Dojo Course 3 is here! We've been hard at work to bring you the updated, Orchard Core version of our legendary Dojo Course tutorial series, Dojo Course 3! If you want to become an Orchard Core developer, Dojo Course 3 is for you! Starting with the 1st of December we'll publish a new Orchard Core tutorial every day for 40 days on our YouTube channel. Be sure to set a reminder for the premiere video and subscribe if you want to see them just as they come out! If you're looking for our previous Orchard 1.x tutorial series check out Dojo Course 2. Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 169 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! 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!

Dark mode admin theme, new locale Shortcode - This week in Orchard (20/11/2020)

The dark mode for the admin theme is here! But first, let's check out the new locale Shortcode, the new Select HTML tag in the Forms module, and many more! Orchard Core updates New locale Shortcode This Shortcode will take the text between the tags and only display it if the current culture is the one specified. In this case, write English Text for the English culture and write French Text for the French culture. It also supports culture fallbacks. So, if your culture is en-CA and you would like to show the French text, it will fall back to en. Note that it's not content localization, it's just text localization that you want to use in your templates. Read more about it in the docs! [locale en]English Text[/locale][locale fr]French Text[/locale] New HTML select tag with options for Forms Set up your site using the Agency recipe. Then navigate to the admin UI of Orchard Core and head to Configuration -> Features to enable the Forms module. Now create a new Page content item. This content type has a Flow Part attached and because of that, we can add widgets to this content item. We added a new Form widget here and inside the Form, we added the new Select widget. By using the Select widget, you can have an HTML <select> tag that creates a drop-down list with the options you provided. In this case, we created a Donation drop-down list with two options. You can also predefine the option you would like to be selected by default. Listing Code owners When submitting a PR updating code you're not familiar with, it's not always easy to determine who's the right person to be assigned to for review. To fix that, the community established a list of code owners who will be automatically pinged when the code they own is updated by a PR. Read more about the code owners feature of GitHub here! Add classes / IDs to buttons in admin to allow easier selection in E2E tests This improvement is about adding IDs and classes to different HTML tags in the admin interface. This will allow us to write better selectors for E2E testing. So from now on, if you would like to target specific elements of the admin UI, like buttons to enable or disable a given feature or to run a given recipe, you will have an easier way to do that, because of the additional classes and IDs that you can find in the HTML source code. Recommended development tools for Orchard Core What tools do we recommend to build your app with Orchard Core, or work on Orchard itself? In the end, this is up to your personal preference since as long as you can edit source files and build the app you can use any tool on any platform that .NET Core supports. Check out this page in the documentation to get you going for the general editing experience as well as for other useful tools. Orchard Dojo Library is a portable package of coding and training guidelines and development utilities. These are also part of the best practices and guidelines we use at Lombiq. This library contains Visual Studio code snippets to quickly generate code in some common scenarios for developing Orchard Core modules and themes. To effectively use this collection of VS snippets just point the Snippets Manager to where you cloned or downloaded this folder. To do this, go to Tools → Code Snippets Manager → select the C# language → Add and add the whole folder. For Razor snippets to also work select the HTML Language and do the same. Do note that Razor snippets will only be suggested when you hit Ctrl + space first. You can download the snippets from this GitHub repository and check out this recording to see more snippets in action! Add support for sending email attachments You can use the SendAsync method from the SmtpService to send emails from Orchard Core. The MailMessage class represents a class that contains information about the mail message. And now this class has a new property called Attachments which is a collection of message attachments. Use the MailMessageAttachment class to provide attachments by setting the attachments' filename and the attachments' file stream before calling the SendAsync method to send out your email. Demos Dark mode admin theme Set up your site and navigate to the admin UI. Then go to Configuration -> Settings -> Admin and check Enable dark mode admin theme. If you save the setting you have the option to toggle dark mode for the admin theme. If your OS is using dark mode, it will automatically applies the dark mode theme for you. You might notice that there is a new button in the upper-right corner of the admin theme with different icons: Sun and Moon represent the light and dark mode, respectively. If you switch to the dark mode the admin UI will have the following look and feel. But that's not all of it! Check out this recording on YouTube to know more about the dark mode! News from the community Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 168 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! 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!

New full_text Liquid Filter, Media Field improvements - This week in Orchard (14/11/2020)

See the improvements of the Media Field, the new full_text Liquid Filter, the enhancements of the admin UI, and many more in our upcoming post! Orchard Core updates ListContent Permission as Content Type dynamic permission Install your Orchard Core site with the Blog recipe and head to the admin UI. Navigate to the Security -> Roles and hit Edit near one of the roles. Type list in the search box that will list you some new permissions: the new ListContent permission on each Content Type. However, the global ListContent permission is of course priority over these. That means now you can decide which content items you want to list to the users in the given roles by using this dynamic permission. New full_text Liquid Filter Now there is a new Liquid filter called full_text. This lets you extract the full-text aspect of a content item. A full-text aspect being like metadata that we can get from any content item to represent it as full text. The goal being to be able to define custom full text for custom content types that will themselves use a full text of subitems. Let's say you have a Bag Part and you want to make your full text comprised of every full text of the items that you have in the Bag Part. To do that you can do a foreach on every item in the Bag Part and then you can call into their full text to provide it. Sticky bars on top while scrolling Last week we mentioned that the Features page has a new sticky bar on scrolling for very long pages instead of the scroll to top button. The good news is now more and more pages get this sticky bar on the admin UI. The Content Types page (Content -> Content Definition -> Content Types), the Content Parts page (Content -> Content Definition -> Content Parts), the Tenants page (Configuration -> Tenants), the Users page (Security -> Users), and the Recipes page (Configuration -> Recipes) are now also have a sticky bar. Fix double encoding of non-HTML strings in feed You can use the PopulateAsync method of the CommonFeedItemBuilder to build the RSS feed items using your content items. The RSS feed items have several properties like the link, guid, title, description, and so on. When we set the value of the title by calling the feedItem.Element.SetElementValue, the text that we pass will be encoded, so we don't need to encode it again, otherwise, we get it encoded twice. The same issue has been fixed in the ListFeedQuery feed query provider too. Initializing Liquid Include Filter There is an Include tag in Liquid that allows you to include an external Liquid file and in Fluid it's available through a FileProvider property, and in this case, the FileProvider property of the ILiquidFileProviderAccessor will be assigned to the LiquidTemplateContext. That means you can use it in your modules and your embedded assets. But how can you use that Include filter? Include your Liquid file using the {% include "Areas/TheBlogTheme/Views/Test" %} expression. This will include the Test.liquid file from the Views folder of the Blog theme. Demos New Media Field option to encrypt the image processing query string You could see a demo last week about the new options for Media Field where you can set the alt text of your image and you can also crop your images using a nice media crop picker. The way it was working is it's putting different kinds of options to the query string that allows you to manipulate your image. Let's see the following URL for an example: https://localhost:44300/media/post-bg.jpg?width=1&height=600&rmode=crop&rxy=0.2,0.5. Here you can see we set the width and height of the image from the media library. We also set the resize mode for the processed image with other parameters as well. Now there is a new bool option added to the MediaOptions called UseTokenizedQueryString to encrypt the image processing query string to prevent disc filling. That's true by default so you can try it out right away! To do that just simply open the predefined blog post and view the page source in your browser. Find the header HTML tag, where you can see how Orchard Core sets the URL of the background image. And that's not all of it! If you would like to know more about this feature, don't forget to check out this recording on YouTube! Orchard Core OpenID Connect Code Flow Api BlazorWASM We mentioned the Blazing Orchard project two weeks ago here in This week in Orchard that 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. In this demo, you will see a solution, that contains an updated version of Blazing Orchard that also contains OpenID Connect Authentication! Head to YouTube now to see the recording of this demo! News from the community Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 169 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! 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!

Distributed cache, Media crop picker - This week in Orchard (08/11/2020)

This week we will see the new IDocumentStore, which is a cacheable, committable, and cancellable document store allowing to get documents from a shared cache. And don't forget to watch a demo about how you can add an alt text and crop the images of your Media Field! Orchard Core updates Make features actions sticky while scrolling If you navigate to the admin UI of Orchard Core and head to Configuration -> Features, you will see all of the currently available features of Orchard Core. This list is now getting longer and longer, so the idea here is to use a sticky bar on scrolling for very long pages instead of the scroll to top button. The first page that gets this sticky bar is the Features page, which looks like the following now. Edit button for lists in DetailAdmin view This is a feature that was already there in Orchard 1. When you want to edit something in the admin, you can return a route to the controller that will edit an entity. Or that will display it as a list or display it as a detailed object in the admin. And when you have a list, you have two options. Either you want to show all the content of this list or you want to actually edit the list itself. And to do that, when you see a blog and you click the link of the blog in the content items, it will go to the list of blog posts. This is the DetailAdmin view. And if you actually want to edit the blog you need to click on the edit button. This feature is about adding a new button for the list and you are now not confused about clicking the link or click in the properties button. Move feeds to feature There is a new feature now in Orchard Core called Feeds. Don't forget to enable that module if you would like to have feeds capabilities on your site! Generate xml documentation (comments) for nuget packages Whatever documentation we put on the files, they were not available, because if you don't put the GenerateDocumentationFile tag then it's not generated in the XML file that contains all the documentation, it's not embedded into NuGet, and Visual Studio won't load it. You need that to export your API docs. Not even to generate documentation, just to be able to have it in the NuGet package for the IntelliSense. If you don't do the NoWarn, every public member that doesn't have an API doc would fail the build. The <NoWarn>$(NoWarn);CS1591</NoWarn> removes the warning that some public members do not have comments. Now you will have more documentation when they use the NuGet packages to build sites! Distributed cache Whenever you want some cacheable document that is stored in the storage using YesSq for instance you need to inject the IDocumentStore interface. This will use YesSql to load the document and it will be able to cache it. So, for instance, if you would like to get the site settings you can use the IDocumentStore to do that because it's stored as a document and you want to cache it. And then when you load the site settings using IDocumentStore by passing the type, you can say GetOrCreateImmutableAsync or GetOrCreateMutableAsync. Mutable meaning that when you load the site settings just to read it, you want to say I want an immutable object. And when you want to load the site settings to update it, then use the GetOrCreateMutableAsync method. The difference is in the way that it will either cache it or not and also would it take it from the cache or not, or put it back in the cache or not. Or invalidate the entry in the cache. And there is the IFileDocumentStore which has the same methods as the IDocumentStore, but it's a totally different service. This one can be used to store a document on the file system that can be also cached. But it's a different store. We use the IFileDocumentStore to store the content type definitions. Demos Media crop picker and Alt text editor Set up your site using the Blog recipe. That recipe comes with the Blog Post content type that has the Banner Image Media Field by default. Let's check out the predefined blog post content item to see the new features of the Media Field. If you select the post-bg.jpg image and click on the button with the speech bubble icon, you can set the alt text for the image. Another new button is doing a more interesting thing. If you click on the button with the target cross icon, another new modal window will open where you can select the anchor for the selected image. Using the target cross, you can easily specify the crop point of the image. If you open the preview in another window you can easily see the changes of the image in real-time. But how you can enable/disable these options? Navigate to Content -> Content Definition -> Content Types and hit Edit near the Blog Post and edit the Banner Image settings. Here you will find two new options. One is about allowing alt text and one is to allow the center cropping. These are on by default, that's why you could see the mentioned buttons when you edit the media field. And that's not all! If you would like to know more about this feature don't forget to check out this recording on YouTube! News from the community Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 172 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! 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!

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! 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!