Modifying Our Custom Orchard Core Widget

Orchard Core CMS Tutorials

In the last Orchard Core Tutorial I developed a custom Alert Widget that allows one to easily create a Bootstrap Alert Component in an Orchard Core CMS Website with no knowledge of HTML. While giving a presentation using that example, an attendee asked "how would you make the alert dismissible?" I coded the answer live and thought it would be a good follow-up post. In this tutorial I will be modifying the custom Alert Widget so the user has the option of making it dismissible.

Adding a Boolean Field to a Content Type in Orchard Core

In the previous tutorial I created an Alert Content Type with a stereotype of Widget. I can add a new Boolean Field to the Alert Content Type and call it Dismissible.

Boolean Field Orchard Core CMS

I specify the standard editor for the Boolean Field. The standard editor is a checkbox, allowing one to toggle the Dismissible option on and off. As an FYI, I chose the Switch editor when developing a custom Carousel Widget for Orchard Core CMS.

Boolean Field Standard Editor is a Checkbox in Orchard Core CMS

Now when I create or edit an Alert Widget, there is a Dismissible Checkbox.

Develop a Custom Orchard Core CMS Widget Displaying Dismissible Alert

Modifying the Widget Template in Orchard Core CMS

The current widget template, Widget__Alert, knows nothing about the new boolean field so I need to modify it. The example HTML in the Bootstrap documentation for a dismissible alert is as follows:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

When the user specifies a dismissible alert, I need to add a few more classes to the div as well as a button. I modified the template as follows.

{% assign dismissible = Model.ContentItem.Content.Alert.Dismissible.Value %}
{% assign classes = "alert alert-" + Model.ContentItem.Content.Alert.Type.Text %}

{% if dismissible %}
{% assign classes = classes + " alert-dismissible fade show" %}
{% endif %}

<div class="{{ classes }}" role="alert">
  {{ Model.Content.HtmlBodyPart | shape_render }}
  {% if dismissible %}
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
  {% endif %}
</div>

With the new boolean field and minor changes to the template I now have the option of displaying dismissible Bootstrap Alerts.

Custom Orchard Core Development - Dismissible Alert Widget

Conclusion

Adding the Boolean Field and modifying the Liquid Template to add dismissible functionality to the Alert Widget is pretty easy. All of this is done within the Orchard Core Dashboard without any need for Visual Studio or any other IDE or editor.

If you're interested in learning more about creating and overriding themes in Orchard Core CMS, I wrote a couple more tutorials recently on the subject: