Wolf X Machina

Back to blog

Three Things I Learned Lately

Posted in DNN on May 30, 2020

Here's the latest roundup of things I learned to make both my job easier, as well as the websites I build better and easier to work with. I won't go into full tutorial mode, but you will see some instruction and code samples.

If you have any specific questions, feel free to contact me at the end of the post.

Here are the 3 most exciting things I've learned recently that will make me a better web developer:

#1. 2SXC lists within lists using Entity Picker and C# Razor Templates

This is the most exciting feature as I've needed know how to do this for a long time. There are often times when you have a listing of content. Let's say, for example, you have a Packages grid. For each package in the grid you have a list of features. The main item in your pricing grid is the package that has a title, price, and a description. But then inside of that item, you want to have a customizable list of features. A feature is its own Content Type with a Title and an optional Tooltip.

You can set this up by creating a regular Packages content type with a C# razor template, then setting up a separate content type for the features themselves. In your main Packages content type, create an Entity Picker field and choose your Package Feature content type. Then in your C# template, you would add some code like this:

@* package features loop *@

	@if (Content.PackageFeature.Count > 0) {

		foreach(var item in AsList(Content.PackageFeature as object)){
			<div class="summit-package-feature text-center border-bottom pb-4 mb-4" @Edit.TagToolbar(item, actions: "edit,item-history,remove")>
				<label class="d-block mb-0">@item.Title 
					@if (item.Tooltip != "") { 
						<a class="package-helper" tabindex="0" role="button" data-toggle="popover" data-placement="top" data-trigger="focus" data-content="@item.Tooltip"><i class="far fa-question-circle"></i></a> 
					} </label>
			</div>
	}
}

@* end package features loop *@

Using a list within a list gives you complete control over the design and template of your content, while still giving your content editors complete control to add, edit, remove, and reorder their content.

You can find more information on this here: https://stackoverflow.com/questions/61546334/is-it-possible-to-make-a-list-within-a-list-in-2sxc

#2. 2SXC Module inserted in DNN Skin

If you're like me, you want to always make your clients lives easier by limiting their control so they can only change what they need to. While, at the same time, making your life easier on the time you spend developing their websites. Quite often, you need to insert a content module on every page of a website. A good example would be content in the footer of the design like social media icons, "quick links", a Google map, a disclaimer, a special business registration number, or any other content that appears on every page of the website in the same place. You could use the setting "Display Module on all pages" or use the "Add Existing Module" functionality, but those have their own drawbacks. If you use Add Existing Module, it just takes a long time to do if you have a lot of pages. And if you use "Display Module on all pages", your content editor still has the ability to accidentally change the module permissions, delete the module or move it to the wrong pane.

Ideally, you want to have one place where you set the module up and then load it via the DNN skin. This allows you to have complete control while only giving your Content Editors control over editing content. The other advantage is that if you ever need to remove the module or swap it out with another module, you can do it quickly through the skins. Here's how you can do that:

  1. On a public but hidden page, create a 2SXC module with your footer content. For example, social media links
  2. Find out the tabid of where this module exists. And find the moduleid of this module
  3. Open your DNN skin's .ascx and insert this code to where you want the module to show:
    <%=ToSic.Dnn.Factory.CmsBlock(tabid, moduleid).Render()%>
  4. Replace the tabid with your tabid, and the moduleid with the module
  5. Save the file
  6. Browse to your website and view a page that uses the skin. You should see your module appearing in the skin

Caveat: As it currently stands, when you go to edit content through the module loaded in the skin, you will see an error after you save. But your content will still save. So I would suggest sticking to editing the module itself on the public but hidden page. You can see the issue on GitHub here: https://github.com/2sic/2sxc/issues/2084

#3. In Action Forms, display HTML content in the confirmation email based on whether or not a checkbox is checked

I was recently working on a really simple Session sign up form. It had fields for Name, Email, and then 4 individual True / False checkboxes. Once the user fills out the form and chooses any of the session checkboxes, I wanted to send an email that includes session information (title, time, description, and link) for each of the sessions that they chose.

Using the typical tokens in Action Form only outputs the value - either True or False. Unfortunately, there aren't conditional tokens available inside of the Action Form email action. After contacting DNN Sharp's support, they led me to a solution where you use the "Inject Data" action to create an empty token on click of the submit button. Following that, I created another 4 Inject Data actions for each session checkbox that have conditional logic on each action to only make a new token if the checkbox is true. Then in my email template, I have the 4 tokens that are dynamically generated.

It was a bit of a workaround but simple enough concept that I'll be able to use that the next time I encounter a form set up like that.

I'm always learning new ways to make my coding simpler and the lives of my clients easier. If there are ways that I can help you, your team, or your clients improve their website, check out https://wolfxmachina.com/expert-dnn-development.

Aaron Lopez

Aaron Lopez

Founder & Lead Developer at Wolf X Machina

Theme picker

Wolf X Machina

Next Level Interface Development for the DNN CMS

DNN themes, module design, and more from Wolf X Machina.

Learn More