This week in Orchard - 9/21/2018

Gábor Domonkos's avatar
This week in Orchard

Check out our current post for loads of demos about Orchard Core and of course for a 2-hour long demo about how to use Orchard Core as a Decoupled CMS!

On Orchard Core

Demos

Handling theme-less sites

The Login page is now using the admin theme, not the frontend one. To do that, we need to use a custom layout, the Layout-Login.cshtml. See that this view is part of the TheAdmin theme.

Also, at the bottom of the Active Themes menu you will find a section called Reset default themes. Here you can reset the site and the admin theme, that means there will be no layout injected in the view. This feature is useful for a Decoupled CMS.

Icon picker editor

Now Text Field has a new editor type, called Icon picker. If we would like to create a new content item that has a Text Field with an Icon picker editor, we will see a default heart icon.

With the help of this editor you can select an icon from the Font Awesome icon set. You also have the ability to search an icon by typing its name.

Security token to setup a new tenant

When we create a new tenant, we can preselect a recipe like we can preselect the type of the database. By the past everybody can go to the setup screen of your tenant and set it up without having a permission to do that. Now, you have to click on the green Setup button near the name of the tenant in the Tenants page, that lets you access to the setup screen thanks to a security token. This token is also time limited. With this feature you can create tenants to users, send it by email and wait for them to set it up.

Because the database and the recipe are preselected, the user cannot set the values of those when setting up a new site. You can also see the token in the Query string.

Content picker field

A new Content Picker Field is available for Orchard Core. When you add a new field to your content type, you can select the Content Picker Field type. Then you can choose which content types you want to display in this field and you can have a standard editor or select Lucene to search for a Lucene index. In a standard editor, you can select content items based on their DisplayText.

You can watch these great demos in the recording of the latest Orchard Podcast!

Using Orchard Core as a Decoupled CMS

Last Friday Sébastien showed us how to use Orchard Core as a Decoupled CMS. In the next few lines we would like to give you a short recap based on the 2-hour long video, that you can also find on YouTube!

The differences between Standard CMS, Headless CMS and Decupled CMS

We have already talked about the different types of CMSs in a detailed way in this post, so for now just focus on what these differences means for Orchard Core.

When we look at Standard CMS, what we see is that, when a website displays a page, it will use the ItemController in the OrchardCore.Content module. Inside that controller, there is a Display method, that takes a Content Item Id and renders that item whatever it is. Everything we see in an Orchard website is rendered by this exact action.

With a Headless CMS, the CMS doesn't render anything in a frontend. It's just a set up APIs in terms of REST APIs, that you can query with HTTP protocol and then you get the result from these queries and then you do whatever you want with the content. In Orchard we have an ApiController in the same module which lets you to Get a Content Item and just returns the JSON document representing the Content Item.
So, you can create a website, that you host somewhere and Orchard is hosted somewhere else. The first website just queries Orchard by asking to give me this Content Item and I will display it. There are most endpoints to get Content Items, like to do queries to list Content Items and so on.

The Decoupled CMS is run as part of the CMS, but the CMS is not rendering the pages, it's your app or your web page that is rendering the pages. The communication between your pages and the CMS is in process using local APIs, compared to Headless CMS, where the communication is network communication.

Create a new tenant to host content based on the Blank recipe

The Blank site recipe creates a blank site with content management features. This will enable some features and the TheAdmin theme for the admin and nothing as the site theme. So, there is no selected theme for the frontend views.

If you would like to access the admin site, you can do that, because the admin works correctly. This site has content management modules and in terms of Content Items, there is nothing. In terms of Content Types, there is nothing either, just the Menu and the Link Menu Item.

Create a page on the web app directly

You can just simply create a new Pages folder inside the OrchardCore.Cms.Web project (in the web application level) and inside that folder you can create a new file, like Foo.cshtml. The content of Foo.cshtml could be something like:

@page
Foo Page

After that if you go to https://localhost:44300/Foo, you can see it loads that page. It can be inside modules, and it will work too.

If you add a page called Index.cshtml in the same folder, it will be your Home Page. Of course, you can define custom routes for your pages too.

This is a kind of a Decoupled CMS, because we haven't used any theme for the frontend and not using any controller to display content.

Decoupled theme

As we mentioned earlier you have two different approaches when you build a new theme:

  1. You can construct the model first and create the theme. In this case you could have switchable themes for the precreated content.
  2. You can construct the theme first and then build the model.

Let's create a theme based on the Modern Business one. First download it and copy everything to the wwwroot folder of OrchardCore.Cms.Web. If you type https://localhost:44300/index.html it will work, so now we have access to all static content.

Making the static theme dynamic

Copy the index.html file to our Pages folder and rename it to Index.cshtml. Don't forget to add the @page directive to the first line of the file. Then you can remove the static index.html file. So now if you visit your root URL, you will see your new home page.

After that we can start make it dynamic. To do that you need to inject the OrchardHelper, that is an object which is usually available when we do a theme.

@page
@inject OrchardCore.IOrchardHelper Orchard

<!DOCTYPE html>
<html lang="@Orchard.CultureName()">
...
</html>

For the end of the demo you will have a Decoupled site where you can list Project and Service typed content items and also have a detail page for the Project content type.

The Index page of the site contains two notable helpers:

  • GetContentItemByAliasAsync: if your content type has an AliasPart attached, you can define an alias for it. You can get the content item based on the value of the alias. If you add a BagPart to that content item, you can query over the items of it in the view.
  • GetRecentContentItemsByContentTypeAsync: you can get content items by the type using this helper. You can also provide the number, that how many items you would like to fetch.

In the last screen you can see the detail page of the Project content type. Here we display the name of the Project.

So if you are interested in how to get there, just watch the recording of the demo!

On Lombiq

Win a year of free custom domain usage: Still time to fill out the developer survey!

As we've written about before, we ask you to tell us everything you wish DotNest would do differently. The DotNest developer survey is still on, but not for long: We'll close it on the 23rd. If you haven't filled it out here's the time, because you may also win a year of custom domain usage!

So tell us your thoughts in the survey, enjoy an improved DotNest and win!

DotNest is back in the Azure Marketplace - and it's in Microsoft AppSource!

A while ago DotNest was part of the Azure Marketplace - and it's back again! Actually not just there, but also in the Microsoft AppSource catalog.

The Azure Marketplace is mostly aimed at businesses already using Azure. AppSource is frequently utilized by any business users to source solutions for their needs, and we believe DotNest can provide a suitable platform for a lot of web-centric business use-cases. Having these two new offers published will help drive more people to DotNest and Orchard, strengthening our ecosystem.

Do you know of somebody looking for a CMS, especially a hosted one? Ping them to check out these marketplace offers!

2 Comments

  • Jacob Feng said Reply

    Not sure if it's the right place to post questions:
    1) how to programmatically redirect to another page in page template
    2) how to define a custom 404 page
    Thanks

  • Zoltán Lehóczky said Reply

    Jacob, please post questions on Stack Overflow with the orchardcms tag: https://stackoverflow.com/questions/tagged/orchardcms.

Add a Comment