Find a post...

DNN-Connect Blogs

Extend the DNN disqus App in 3 mins to show only on details pages

A common use case for an app like disqus is to include it in a list/details scenario like a blog, where you only want the discussion items to appear on the details page. Since most such setups use the same DNN page for the list and the details, we need another mechanism to include / not-include this functionality. I present to you: conditional server-views in apps

There's an App for That

As always you can find all this as a simple to install 2sxc app

The Goal: Show Different Views / Templates based on a URL-condition

So this is a very common problem: an app placed on a page has different views - like a list-view, a details-view and a tags-filtered-list view. And each view still uses the same page, so DNN-modules placed on the same page would always appear as well. But this is not always desired. The basic example is the blog-list page 

…which shouldn't show the disqus app, while the blog details page 

…should show it. Note that this is a very generic issue which actually also appears in

  1. The blog list-page should show the list (duh)
  2. …while the details page should show the details (duh again)

Though this may seem logical, before the advent of 2sxc every module had to re-invent the mechanisms to implement this, commonly using a 'if(url.contains("post")) then…' mechanism. But 2sxc will automatically change the views based on the URL parameter thanks to the feature Switch Views On URL which even works for Token templates. 

Implementing Switch Views On URL

Basically we need two views:

  1. The initial view, which is actually empty because in the default (list) mode it shouldn't show anything
  2. The optional view, which is only shown when the URL contains a parameter
    Important: this optional view can use the same template as the standard disqus-view. So we don't need new HTML, we just need another rule so that 2sxc knows when to replace the empty view with the disqus view. 

Step 1: The Initial Empty View

  1. Go to the administration > views, add a view with the name "empty" or similar and tell the system to create a new token template for it. Leave all the other settings blank. 
  2. Then exit the administration and edit the template - either making it completely blank or in our case, just add an HTML comment so that anybody reading this know what happens

Step 2: The Conditional View

  1. Go to the administration > views, then add a view with the name "Show only on details" or similar. 
  2. Re-use the existing template as this should be identical. 
  3. The only special thing you must do is specify the url-param which should activate this view
  4. Optionally I would also set this view as hidden, so that it's not available in the "select view" dropdown when adding an app

Resulting View List

In the end you should have the following views 

Adding to a Page

You can now add the disqus app to the page - and select the Empty view by default.

This causes the user to see nothing (by default), but when the URL parameter exists (in this case the parameter post with a value) then the view is automatically replaced by the real view. 

That's all folks :)
Love from Switzerland,
Daniel





Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler
Daniel Mettler learned programming with the bible translation computer of his parents, deep in the jungles of Indonesia. Since he was only 12 years old at that time and the BIOS only had a version of BASICA, that's what got him started. With 16 he went back to Switzerland and learned German and basic city-survival skills. Equipped with this know-how he founded 2sic internet solutions in 1999 which was focused on web solutions on the Microsoft platform. After a few self-developed CMSs 2sic switched to DNN in 2003 and has been one of the largest partners (17 employees, 700+ projects) in Europe. Daniel is also the chief architect behind the open source 2sxc, a strong promoter of standardization (boostrap, patterns, AngularJS, checklists, etc.) and loves to eat anything - dead or alive. His motto: if the natives eat it, it game.
Comment(s)

Hosting liberally provided by

Geoff Barlow 513 4
Philipp Becker 5882 7
DNN-Connect 430 6
Peter Donker 4836 27
Christopher Hammond 659 2
Olivier Jooris 405 1
Daniel Mettler 11823 88
Clint Patterson 1 1
Jos Richters 65 1
James Rosewell 289 2
Will Strohl 1519 27
Ernst Peter Tamminga 407 4
Barry Waluszko 2411 2
Declan Ward 288 1
Gifford Watkins 721 9
Torsten Weggen 2270 3