Enhance the Search module and UI, System Module - This week in Orchard (24/03/2023)

Gábor Domonkos's avatar
Admin UI, Media Library, Background task, This week in Orchard, Widget

Ensure the Background tasks name is visible for old entries, enhance the Search module and UI, and a demo about the System Module! Check out our post for the details!

Orchard Core updates

Ensure the Background tasks name is visible for old entries

In a recent change to the background tasks, a title was added to the background tasks. This works great for entries that have not been saved into the database. However, for entries that are already saved in the database, we do not have a title to show so it leads to no name being displayed on the UI.

Since the title is not an editable field, we should always set the title to the default settings when showing tasks on the UI.

Background tasks missing names

Enhance the Search module and UI

Currently, we have two different SearchController. Each one handles its own search provider, Lucence and Elasticsearch. We should be able to combine these two into one and place it on the Search module since that module's sole purpose is to export a front-end UI for the search. Also, we should add a setting to change the placeholder for the search bar. Additionally, we should have a Search Form widget that would allow the user to add a search widget.

So, this update contains the following enhancements:

  1. Remove the SearchController from both Elasticsearch and the Lucene module. We now have one common SearchController in the Search module.
  2. The new controller now returns a shape instead of a view model which allows the user to override the default views.
  3. Adds settings to allow the user to define a title for the search page and also a placeholder text for the search bar.
  4. Add a Search widget that a user can add to their site. The default widget will direct the user to the /search route.
  5. Allow the user to optionally pass the index name in the route value. For example, /search/index-name the index-name is an optional value, and when it is not provided, the default index is used.

Let's see some of the improvements mentioned in action! For this demonstration, we set up our site using the Blog recipe, and to be able to test the enhanced Search module, we have to enable the Search module itself and one search provider, which will be Lucene, for example. Now, we need to create a Lucene index under Search -> Indexing -> Lucene Indices. Here we added the name BlogPosts and included the Blog Post content type to the index. After that, we navigated to Search -> Settings -> Lucene and selected the BlogPosts search index as the default index to use for the search page and put a tick into the "Allow Lucene queries in search form" checkbox. Now we have a simple search set up, let's see the new Search Widget in action!

We decided to place this widget on the home page. The predefined Blog content item is the home page in this recipe, so we edited the content definition of the Blog content type by adding a Flow Part to it. By having a Flow Part, we can add the new Search Form widget to the Blog content item. Here we can add some placeholder text if we want and can define the index name.

Adding the Search Form widget to the Blog

Now it's time to utilize our widget! If we navigate to the home page of our site, we will see our Search Form widget. Let's type something and hit the Search button. As you can see, it lists our test posts which contain the "post" word. And you may notice the index name in the URL too (BlogPosts). If we had multiple indices, we can replace the BlogPosts one with any other existing index and that would mean that we search for something based on the content of that index.

Utilize the Search Form widget

Remove .tiff from the supported images array

Most modern web browsers, including Google Chrome, Microsoft Edge, Mozilla Firefox, and Opera, do not support the display of TIFF images natively on web pages. This is because TIFF files are typically very large in size and may take a long time to load. If you check out the MediaOrchardHelperExtensions class, you will see that the .tiff is now missing from the _imageExtensions.

Remove .tiff from the supported images array

Demos

System Module

For this demo, we will clone the following GitHub repository which contains a set of modules for Orchard Core CMS that is driven by the community members who love Orchard Core. This will encourage all the passionate developers to build modules that aren't included in Orchard Core. Such modules may be necessary for the community or essential for any sort of CMS.

This repository contains several modules, this time we will check out the one called System Module, which provides information about the currently running application; it can display the available system updates and put your site in maintenance mode while you upgrade. If you run this repository and enter the admin site using the admin username and admin@OCC123 password, you can navigate to Configuration -> Features and search for the "system" word. This will list the following features: System, System Maintenance, and System Updates. Enable them all!

Now you will find a new option on the menu called System. Click on the Info under System!

The System Info page

This page lists several useful information, like the ASP.NET Core Version, the OS Version, the Tenants, the enabled features, and so on.

But you can find another option under System, called Updates. On this page, you can make sure that you are using the latest version of Orchard Core. If you are using the latest one (1.5 currently), you will see a "You're all up to date!" text, meaning there is no newer version of Orchard Core.

System updates page

And the third thing is the Maintenance mode. You can enable this mode by navigating to Configuration -> Settings -> System -> Maintenance and putting a tick into the "Allow maintenance mode" checkbox. If you do that and navigate to the front end of your site, you will see the page which shows you that the site is currently offline for maintenance.

The Under Maintenance page

And as always, if you would like to learn more about this module, don't forget to check out this recording on YouTube!

News from the community

Orchard Dojo Newsletter

Lombiq's Orchard Dojo Newsletter has 430 subscribers! We have started this newsletter to inform the community around Orchard of 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 would like to read our weekly articles? Tell them to subscribe here!

If you are interested in more news about Orchard and the details of the topics above, don't forget to check out the recording of this Orchard meeting!

No Comments

Add a Comment