Skip to main content
Home  ›  Blog

Create an amazing, multi-lingual DNN-App in 1 hour

For the DNN-Connect event in Italy, we demonstrated how to create a powerful feature-rich DNN-App in 1 hour. Here a short preview of the result:

If you have 1 hours time, do sit back and enjoy this video and this PDF presentation with all the links (as it's hard to read in the video) - for all others, skip it and read the stuff below :).

We based our demo on TimelineJS, IMHO the greatest timeline-script available. We believe in low-hanging fruits, so why spend weeks on developing such a feature, if other did it and would be glad to share their work? 

Want to try the live example or install the App?

So what can be achieved in 1 hour of development time?

  1. A fully packaged App ready for redistribution for DNN
  2. ...containing the TimelineJS - so it's responsive and fully automated
  3. thanks to the features of TimelineJS, it automatically shows images, videos, Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud and a few more- all you need to do is specify the link
  4. an in-page data-editing interface which allows for very easy data-editing
  5. every timeline-entry is multilingual, all the data is versioned by default, and draft-publishing is enabled
  6. the app is very easy to customize if a web designer wants to change something
  7. easy to add: just add like any other module in DNN, instant gratification
  8. the app can be installed on multiple portals, and modifications in a portal will not affect other portal
  9. 100% server-safe-code (no server-code) - all is done in JS and HTML

What can we improve with another hour (so a total of 2 hours)?

  1. In-App editing - so editors can browse through the timeline to find your "record" and edit it, which makes it much more comfortable. This uses the new JS-API for inline editing.
  2. Added 2 lines of c# server-code to enable JSON streaming by code (otherwise the editor would have to set this in the module settings)
  3. Added settings for default folder (so uploaded local images have a initial folder)
  4. Optimized the JS to handle situations where data might be missing (like no date specified)
  5. Created Getting Started instructions in the App-Catalog which will be shown to users reviewing the App-Settings
  6. add comments to the labels / input boxes to help users understand what to enter
  7. make minor adjustments to ensure that multiple timelines can co-exist on 1 page
  8. catch various errors in JavaScript

So with another hour of work, we can make it even slicker and easier to edit for the user. Our last change needed 2 lines of non-safe-code (C# on the server), so it's not 100% safe-code any more :(. But it makes it easier to add for a normal user, so we figured it's important. In the future we hope to add a general "enable JSON" feature to Apps, but we must first be sure of the security consequences.

What could we improve with another hour (totaling 3 hours)?

In another hour we could (but didn't yet) add features like

  1. Helpers for data editing - like GPS-Pickers to simplify adding Google-Map Links
  2. Translate all labels / help texts into another 2-4 languages
  3. Add global App-Settings for central configuration of values like the default Zoom-Level
  4. Place the main items of the timeline in the HTML to enable SEO-Google-Indexing
  5. Create some more demo-timelines

Is anything missing or less than perfect?

The only thing missing in this 100% Safe-Code, because we had to use a few lines of server-side code. To be honest, I think we (2sic) are the only ones trying to enable Safe-Code development ATM, so nobody else will care :).  Otherwise the App is awesome - and took us 3 hours to develop.

Go for the Low Hanging Fruits

We really want to encourage others to do the same. Take an amazing JS, convert it into an App - and distribute your work again :). For example, Armand just went live with his new (not related to 2sic) and everything he created uses 2SexyContent. So please: try it, create some Apps, and let's keep on open-sourcing our work!

With love from Switzerland
Daniel & the 2sic Team

PS: watch more videos from DNN-Connect here
PPS: read my blog about creating a minimal App in exactly 10 minutes

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 github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler