This week in Orchard - 11/15/2019

Gábor Domonkos's avatar
Admin UI, Orchard Harvest, This week in Orchard

This week we would like to show you two demos about the newest features of Orchard Core. First, you can take a look at the brand new content items UI, then we will dive a bit deeper and try out the new Trumbowyg editor for the Text Field and the HtmlBody Part. And of course, the discussion continues about the next Harvest!

On Orchard Core

Filter Features dependencies

When you navigate to Configuration -> Features you have the ability to enable or disable the different features. To find the feature you want easier you can use a filter here and can type the name of the module. This filter only sort by the name of the feature. From now this filter checks for the different dependencies too! For example, if you type localization, you could see the Content Culture Picker in the list, because this module has dependencies with names like Content Localization or Localization.

Harvest Core 2020

Sipke Schoorstra has connections in Nice and Miami, so that would be easier to organize the next Harvest one of these cities. Nice is in Europe, but Miami is warmer and easier to travel there from Europe because it's on the East Coast. The two possible dates are February and April, but the weather is not the same in these cities. If we do it in April, Nice would be the better option because of the weather. Miami is warmer in both months, so that wouldn't be an issue. Stay tuned for more information about the next Harvest!

Demos

New content items UI

Now when you enter the admin site and go to Content -> Content Items, you will see a brand new UI. Under the Content Type dropdown, you can filter the items based on the selected or the typed type. You can filter the items by their status using the Show dropdown. And lastly the Sort dropdown is responsible to order the items by title, recently created, recently modified or published.

If you select more than 1 item, you will see a new dropdown, called Actions, instead of the dropdowns we mentioned above. By using the Actions, you can publish, unpublish or delete the selected items.

Lastly, we would like to mention the Filters dropdown near the textbox that has the Search all content items placeholder text. By using this you can filter the list by showing only the draft items, only the published items or the items owned by the logged-in user.

Adding Trumbowyg editor for TextField and HtmlBody

Let's set up a site using the Blog recipe. This recipe contains an Article content type. If you edit the definition of the Article under Content -> Content Definition -> Content Types you will see the attached HtmlBody Part. Hit Edit near it and select that you would like to use the Trumbowyg editor type.

Under the editor options you can explicitly set the config you want to use, for example, which button you want to add to the toolbar. If you navigate to the OrchardCore.Resources module and check the content of the Assets folder, you will see the files that needed for the Trumbowyg plugins to work. Therefore you can use every existing plugin that is described on this page.

Trumbowyg has a lot of plugins that you can use to customize your editor. Now let's add some new buttons to the editor! We will use the emoji, the giphy, and the font family plugin. All you need to do is to extend the btns section of the editor options like this:

btns: [
["viewHTML"],
['emoji', 'giphy', 'fontfamily'],
["undo", "redo"],
["formatting"],
["strong", "em", "del"],
["foreColor", "backColor"],
["superscript", "subscript"],
["link"],
["image"],
["align"],
["unorderedList", "orderedList"],
["horizontalRule"],
["removeformat"],
["fullscreen"]
],
plugins : {
giphy: {
apiKey: 'N5OwBrzBjP8nXXaFdv1TvVwZ82DWNUSz'
}
}

Here you can see that the three new buttons will be placed after the View HTML button and will be near each other without a separator. The buttons you define in the same square brackets will be in one group. You could also see that we added a new section here, called plugins. Here you can define the options that needed for the different plugins. For example, to use giphy, you need to have an API key that will communicate with GIPHY. If you navigate to the Dashboard on the GIPHY Developers page you can create a new one by clicking on the Create an App button.

Now you have successfully set up the editor options. It's time to create a new Article! Notice the three new dropdown buttons near the View HTML button and use them to create your awesome article!

Another nice stuff is the template plugin, that manages a set of HTML templates to insert fast. In these options we only define the templates plugin with two options:

{
btns: [
["template"]
],
plugins: {
templates: [
{
name: 'Lorem ipsum',
html: '<p>I am a Lorem ipsum template</p>'
},
{
name: 'Lorem ipsum 2',
html: '<p>Another Lorem ipsum template</p>'
}
]
}
}

In this case, the editor will look like the following, where if we select the Lorem ipsum 2 option, the following HTML content will be injected to the editor.

The same works for HTML Field too. If you add a new HTML Field to your content type and set the editor to Trumbowyg editor, you can define the editor options and you will get a customized Trumbowyg editor.

On Lombiq

Upload recordings of demos from the weekly meeting in separate videos

We have an idea to upload recordings of demos from the weekly meeting in separate videos as well, so they can be found easier. To help us decide please visit our Tweet and choose from the following options:

  • Good, I look for demos!
  • Good, but don't need it.
  • Bad, why more videos?
  • Another idea, see reply!

Searching for performance-intensive codes

Do you write a performance-intensive code? Then help us build the nerdiest .NET thing! Drop us a line to [email protected] and we'll ask a few questions about the challenges you encounter, and in exchange, we'll show you how to make a chip out of your programs!

Orchard Dojo Newsletter

Now we have 102 subscribers of the Lombiq's Orchard Dojo Newsletter! 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!

No Comments

Add a Comment