I’m thoroughly enjoying 13 Minutes to the Moon, which is a wonderful podcast series from the BBC World Service. Highly recommended.

(Overcast is my podcatcher of choice.)

Chris Coyier’s Make it hard to screw up driven development struck a chord with me. If there’s ever going to be more than one of you working on a codebase, having a style guide for your CSS or SASS or Javascript or whatever makes sense. Having it automatically applied when you hit save means you rarely have to worry about adhering to the style – it just happens for you. I’ve yet to have one of these tools break my code, either.

One thing Chris didn’t mention though was running a spellchecker over your code. It may sound completely bananas, but hear me out. Firstly, it’s a code-specific spell checker. Secondly, I’ve worked on projects before where we’ve ended up with 3 different spellings of the word “palette”, because 3 different people assumed they had it right. It also means you’re implicitly being encouraged to give your variables and CSS classes meaningful names, so when you revisit the code in the future it’ll make a bit more sense. We used cSpell to do this, but I’m sure other similar products are available.

These tools don’t just exist in the development tools, either. We have them set up in our CI environment, so you can’t merge a code change unless it passes all of the tests – and the tests include both spell checking and matching the style guide. The system won’t let you screw these particular things up – leaving you free to concentrate on not screwing up the actual logic.

I’m a big fan of working this way, in case it wasn’t obvious.

I have a browser extension which shows me a lovely image from Unsplash whenever I open a new tab. Today, this one appeared:

The Arashiyama Bamboo Groves were right near the top of my hitlist when we visited Kyoto. It looks reminiscent of movies where they appear to be stunning, never ending bamboo paradise. Indeed, in this photo they look pretty damn cool. In reality, while stunning, they’re disappointly small. That path is usually crowded with thousands of people and the groves end not far beyond the end of the photo. There’s a genuine feeling of “Is that it?”

It’s worth the trip though, because at the far end is Okochi Sanso, the former home and garden of Japanese actor Denjiro Okochi. It’s absolutely stunning, and a haven of calm just minutes from the bustling city below. When we visited it was raining, whcih doesn’t sound ideal. But the rain made the mossy green gardens positively glow with colour and we practically had the place to ourselves.

If you ever find yourself in the Arashiyama area, take the time to visit. It’s a worthy detour.

I nearly opted for e-tickets when I booked the train but had a gut feeling it was a bad idea. It’s one of my last trips to Manchester for work and the last Christmas ‘do’ I’ll be attending at this job.

I’m glad to have real paper tickets because this morning O2’s entire mobile network seems to be borked. Wouldn’t have been able to get my e-tickets at all.

I’m glad I brought a paperback to read, too. It’s This Is Going To Hurt by Adam Kay. The brilliantly written diary of an NHS junior doctor. I’ve spent the first 50 pages stifling laughter and squeamishly cringing, often at the same time.

Sacha Trauwaen’s OpenForm is a module for DNN which is used for adding forms to a page.

It requires that the OpenContent module is installed first. The configuration is based on AlpacaJS.

Official documentation

• Official documentation
• Discussion / support forum
• Github source code
• Latest release
• Example templates

Creating a new form

1. Browse to the page which will hold the form and switch to edit mode
2. Add a module
3. Choose OpenForm
4. Click Template Exchange
   1. Under Action, choose Copy Template
   2. Under From Template, choose an existing form (e.g. “Site:Contact”)
   3. Under To New Name, type the name of the new form (e.g. “Further Information Request”)
   4. Press Copy
5. When you see Copy Successful, close the modal box and wait for the page to refresh
6. Under Choose a template, choose Site:Whatever-you-just-called-it and wait for the page to refresh
7. Click Template Settings
8. Here you can:
   • Set the Message after Submit that appears after the user successfully sends the form
   • Add Email Notifications (see section below)
   • Add other things (Tracking script / reCaptcha keys)
   • Click Save
9. Hover the module, open the Pencil menu and choose Form Builder
10. Add your fields (see section below) and click Save

Form Builder

1. Edit the page
2. Hover the module, open the Pencil menu and choose Form Builder
3. Give it a moment to load the left column, it can be a bit slow

From here you can add and remove items to the form. The left column shows the form builder, while the right shows a preview (albeit using plain bootstrap styles, so it’s not a true WYSIWYG).

• To add a control, click the Plus icon
• To remove a control, click the Minus icon
• To move a control up, click the up arrow
• To move a control down, click the down arrow
• To edit a control, click its name.
  • From here, set the field name (no spaces or special characters)
  • The type
  • The Label, which will appear on the screen
  • Required
  • Advanced (default value, helper text, placeholder text, position if this is a multi-column form)
  • Values (if this is a drop-down, radio buttons, or multi-select checkboxes)
  • Dependencies (this control can be dependent on the value of other controls)
• Save or Cancel your changes

Note: It’s a good idea to press Save often, as it can occasionally get confused when moving new un-named controls up and down.

Form Settings

You can reach the form settings (for email notifications, etc.) by:

1. Edit the page
2. Hover the module, open the Pencil menu and choose Form Settings

Message after submit

You have a WYSIWYG editor to control the content shown after the form is submitted. To include form data in the message, you can use special tokens.

e.g. If your form contains fields named name and email, put this into the WYSIWYG:

Thanks {{ name }}, your email address is {{ email }}.

Email notifications

To make it send an email notification, you need to:

1. Edit the page
2. Pencil > Form Settings
3. Add an email notification

Note: If the emails start failing, you can look at the Admin Logs in the PersonaBar.

The message uses a WYSIWYG to allow you to customise the HTML email you send back. You can use the same tokens as the Message After Submit to customise it, e.g.

Thanks {{ name }}, your email address is {{ email }}.

There is also a special {{{ FormData }}} token, which outputs all of the data submitted. See https://openform.readme.io/docs/getting-started#section-email-messages-and-user-feedback

You can add multiple email notifications. This means you can send a notification back to the person who filled in the form another to the staff members who need to receive the information, and yet another to a CRM system.

Pre-filling the form with querystring data

You can use Javascript to pre-fill the form with data from the querystring. See https://openform.readme.io/docs/prefill-form-with-query-parameters for an example.

Pre-filling the form with user data

If the current user is logged in, you can pre-fill the form with their profile information. Make sure you use the following field names in your form:

• Username
• FirstName
• LastName
• Email
• DisplayName
• Telephone
• Street
• City
• Country

See https://openform.readme.io/docs/getting-started#section-auto-initialization-of-fields-from-dnn-user-when-logged-in

Viewing form submissions

As well as being emailed out, all form submissions are stored in the database. If you have admin or super user access, you can view them by:

1. Edit the page
2. Hover the module, open the Pencil menu and choose Submissions

From there you can download the data in Excel format.

If you have superuser permissions, you can get to the raw JSON data:

1. Edit the page
2. Hover the module, open the Pencil menu and choose Edit Raw Data

At the time of writing, you cannot delete form submission data. See https://openform.readme.io/v03.02.00/discuss/5bfff3f5261e9d03e601f2b6

Advanced features

Certain features can only be reached by directly editing the config files. For instance, some features (such as multi-page forms) cannot be added using the Form Builder. There is also the ability to use custom CSS and Javascript on the module, and a C#/Razor post-submission message which can do more than the regular submission message (with full access to the DNN API).

If you have Super User access, you can get to these by:

1. Edit the page
2. Hover the module, open the Pencil menu and choose Edit Template Files

If you’re developing a new form on your development machine, you may find it easier to find the files on the file system. They’re stored in:

[path to site]\Portals\[portal id]\OpenForm\Templates

So on my dev machine, where I’ve used nvQuickSite to install DNN, they’re here:

C:\Websites\sesame\Website\Portals\0\OpenForm\Templates

And on an Azure App Service, they’re likely to be under:

site\wwwroot\Portals\0\OpenForm\Templates

Sometimes, for example when working with a Bootstrap carousel, you need to know when you’re on the first item in the visualizer. Liquid Content apparently can’t do this natively (yet) so you’ll need to do this with Javascript.

To add the active class to the first item in a Bootstrap carousel, I put the following code into the script section of the visualizer. You should be able to adapt it to suit your needs:

var items = document.querySelectorAll(".carousel");
if (items.length) {
items.querySelector(".carousel-item:first-child").classList.add("active");
}

I raised this as an enhancement request with DNN Software, as DNN-26912.

To get a unique id for a content item, you simply use {{id}}, in the template part of the visualizer editor.

For example:

<article class="news-headline" id="{{id}}">

It’ll come out as something like:

<article class="news-headline" id="aa1a93b2-cca4-4a32-bc0a-2c52a1b28019">

If you need to link to it, e.g. for a Bootstrap modal, use something like this:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#{{id}}">

It comes out like:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#aa1a93b2-cca4-4a32-bc0a-2c52a1b28019">

The ID is tied to the specific content item, so you can use it across multiple visualizers (e.g. put all the buttons in one visualizer, and all the modals into another one).

This might seem obvious, but I didn’t find it in the documentation.

In DNN Evoq, there’s a structured content solution called Liquid Content. The visualizers used to put that content on a DNN web page use the Liquid template language (I believe it uses dotliquid under the hood). Here’s a few things that’ve been useful to me:

If statement with a checkbox value

Sometimes my users want to be able to choose whether a link opens in a new tab. So I added a checkbox to the content type. Now, I expected it’d be as simple as {% if {{imgOpenInNewTab}} %}target="_blank"{% endif %}. Sadly it wasn’t.

After quite a lot of fiddling, I discovered I had to use the first filter, like so:

{% if {{imgOpenInNewTab.first}} == 'Yes' %}target="_blank"{% endif %}

Working with images

When you want to add an image to the template, add one to your content type and then add it to the template, like so: {{ image }}. It’ll output the entire image tag for you.

But what if you want to do something with the img element? Maybe set your own alt text, or specify other HTML attributes on there. This is where the image_url filter comes in. It returns the URL of the image. You’d use it like this:

<img src="{{ image | images_url }}" alt="" />

Working with absolutely massive images

Sometimes the people putting content into the system will upload a 3000px image from somewhere like Unsplash. DNN has the facility to scale images using the DNN Image Handler (and cache them on the server). You’d set the img src to something like /DnnImageHandler.ashx?mode=file&w=700&resizemode=fit&file=path-to-file. How do we use this with Liquid Content? It’s rather tricky, but it can be done, making use of lots of Liquid Template loops, variables and filters:

Firstly, the Image Handler doesn’t work with SVG images, so first we’ll need to figure out if the image is an SVG:

{%- assign file_extension = image | images_url | split: "." | last | split: "?" | first -%}

Then we need to get the server-local path to the image, (i.e. strip the https://example.com/ off the front). This is a bit complicated:

{%- assign local_image_url = image | images_url | remove_first: "http://" | remove_first: "https://" | split: "/" -%}

Then, pass it to the DNN image handler, stripping off the querystring as we go:

<img src="/DnnImageHandler.ashx?mode=file&w=700&resizemode=fit&file={%- for item in local_image_url -%}{%- unless forloop.first -%}/{%- if forloop.last -%}{%- assign not_qs = item | split: "?" -%}{{ not_qs.first }}{%- else -%}{{item}}{%- endif -%}{%- endunless -%}{%- endfor -%}" alt="" />

Finally, sometimes when an image has funny chracters in the filename it ends up as a .aspx URL, so we can’t do this at all. So all in, we end up with this:

{%- assign file_extension = image | images_url | split: "." | last | split: "?" | first -%}
{%- assign local_image_url = image | images_url | remove_first: "http://" | remove_first: "https://" | split: "/" -%}
{%- if file_extension == "svg" -%}
    <img src="{{ image | images_url }}" alt="" />
{% elsif file_extension == "aspx" %}
    <img src="{{ image | images_url }}" alt="" />
{%- else -%}
    <img src="/DnnImageHandler.ashx?mode=file&w=700&resizemode=fit&file={%- for item in local_image_url -%}{%- unless forloop.first -%}/{%- if forloop.last -%}{%- assign not_qs = item | split: "?" -%}{{ not_qs.first }}{%- else -%}{{item}}{%- endif -%}{%- endunless -%}{%- endfor -%}" alt="" />
{%- endif -%}

Now that might all seem a bit overkill, but if your content editors are prone to uploading 3000px images from Unsplash, this helps deal with the problem.