Presentation at the DotNetNuke Seattle Users Group in September 2012. The presentation features a walkthrough of the social features in DotNetNuke and building a module on the DotNetNuke Social API.

1. DNN 6.2 SOCIAL FEATURES &
MODULE DEVELOPMENT
SEADUG – 11 SEPT 2012
Scott McCulloch
s.mcculloch@f5.com

2. Agenda
• My Story
• DotNetNuke, Ventrian & F5 Networks
• The DotNetNuke 6 Evolution
• Social, Services Layer, Client Resources Management, UI
• Module Development
• Social Images (Pinterest clone)
• Q&A

3. DotNetNuke – My story
• Started on IBUYSPY Workshop (December 24 th, 2001)

4. DotNetNuke – My story
• Core contributions
• Hierarchical pages (Tabs)
• Users online
• HttpModule pipeline
• UrlRewriting
• Books (co-author of first two DotNetNuke books)
• Ventrian
• Began as smcculloch.net (code samples)
• News Articles, Simple Gallery, Property Agent
• F5
• Joined in 2012 to help support their DotNetNuke environment
(devcentral.f5.com)

5. DotNetNuke 6 – The story thus far…
• DNN 6.0 (released July 2011)
• Major conversion of codebase to C#
• UI Improvements*
• DNN 6.1 (released November 2011)
• Mobile device support
• Client resource management*
• DNN 6.2 (released May 2012)
• Social Networking*
• Service Layer*
• DNN 7 (released ???)
• Improved default styling
• Shift away from MVC to WEB API
* discussed in this presentation

6. DotNetNuke 6.0 UI Improvements
• New UI design patterns (http://uxguide.dotnetnuke.com/)
• Combination of functionality and styling
• Forms
• Tabs, Panels, Labels, Dialogs, Tooltips, Grids & Input controls
• Messages
• Information, Success, Warning, Error
• Vastly improves consistency between modules
• Implementation
• Add “dnnForm” class to the wrapper of your module
• <div class=“dnnForm”> … Contents … </div>
• Side notes
• Primarily for forms

7. DotNetNuke 6.1 Client Resource
Management
• Problem
• Explosive growth of page payloads has reduced performance
• 25% larger each year!
• (2010 –> 700kb, 2012 –> 1042kb, 2015 –> 2344 kb)
• Centralised resource API
• Allows module & skin developers to register JS & CSS scripts
• Result
• Reduce size of resources
• Only deliver resources that are needed
• Combine resources into few as possible
• Enable instructions (http://bit.ly/UD7EN5)
• Turn on in host -> Client Resource Management

8. DotNetNuke 6.2 Social Networking
• Integrated social networking features into core
• Not a port of active social, but built from the ground up
• Not just new modules, an API!
• Features
• Journal module
• Member directory
• Social groups
• Messaging
• Notifications

9. DotNetNuke 6.2 Social Networking :
Journal
• Similar to Facebook, allows for Status updates posted by
site users
• Allows for text updates, photo + attachments
• Set privacy per Journal post
• Administrator : allow photo/attachments, posts per page and
length of posts.
• Developers: can post Journal items through Journal API
• Journal is templated but not through module settings, you
must use RESX to do it:
• /DesktopModules/Journal/App_LocalResourceses/SharedResource
s.resx

10. DotNetNuke 6.2 Social Networking :
Journal

11. DotNetNuke 6.2 Social Networking :
Member Directory
• List members on the site
• Provides comprehensive search for members
• Social actions : message, friend, follow
• Administrator : templates (item, alternate, popup), filters
(user, profile, relationship) & sorting, members per page
• Links to public user profile page

12. DotNetNuke 6.2 Social Networking :
Member Directory

13. DotNetNuke 6.2 Social Networking :
Social Groups
• Social Groups are a public or private way of members to
associate
• Similar in theme but not execution to Facebook groups
• Groups can have a group-specific Journal
• Social Groups are now extended Security Roles – ie,
existing DNN roles with more metadata

14. DotNetNuke 6.2 Social Networking :
Social Groups

15. DotNetNuke 6.2 Social Networking :
Messaging
• Member to Member private messaging
• Provides messages in conversation format, with replies
linked together
• Can send to groups or individuals
• Developers: can post messages through API

16. DotNetNuke 6.2 Social Networking :
Notifications
• Special type of message that may be actionable
• E.g. A comment is pending approval (Approve, Reject)
• Developers: can post items through API

17. DotNetNuke 6.2 Services Layer
• Service Layer – non visual way of interacting with the data
stored in a DotNetNuke site
• /DesktopModules/<ModuleName>/API/<Handler>.ashx/<Method>
• Comprises of :
• Authentication: ensuring person accessing data is authorised to do
so
• Core Functions : GetUserDetails, PosttoJournal, GetPageDetails
• Extensible : Implement your own Service functions specific to an
individual DotNetNuke Module
• Side Notes :
• Built on MVC – what does this mean for DNN 7 which is moving to
web API?

18. Part II
Social Images

19. DotNetNuke 6.2 Social Images

20. DotNetNuke 6.2 Social Images

21. DotNetNuke 6.2 Social Images

22. DotNetNuke 6.2 Social Images
• Image sharing module inside DNN
• Registered users may submit images
• Images post to user’s journal
• Images are viewable by all
• Registered users may follow other users
• Option to see images of those they are following
• Notification sent to user that they are being followed

23. DEMO

24. DotNetNuke 6.2 Social Images : Key
Technologies
• jQuery Masonry (landing page scaffolding)
• http://masonry.desandro.com/

25. DotNetNuke 6.2 Social Images : Key
Technologies
• jQuery/jQuery UI
• Standard popup/UI was not good enough
• Used for popup/transitions, client side calls to services framework
• jQuery TimeAgo (http://timeago.yarp.com/)
• Renders any date into auto-updating fuzzy timestamps (e.g. “4
minutes ago” or “about a day ago” )
• Refreshes automatically allowing you to do “heavy” caching

26. DotNetNuke 6.2 Social Images : Key
Technologies
• DNN Services Framework
• Follow/Unfollow/IsFollowed
• Configured to allow requests only from Social Images and to users
that have “view” permission

27. DotNetNuke 6.2 Social Images : Journal
API
• Submitted to user’s journal when an image is added
• Find your journal type (Journal_Type table)
• 32 different journal types (I used “Photo”)
• Creating custom types is discouraged
• See open source blog module for complete code
• Can also post from the client through the Services
Framework API

28. DotNetNuke 6.2 Social Images : Future
Ideas
• Usability
• Infinite scroll
• http://masonry.desandro.com/demos/infinite-scroll.html
• User interaction
• “Like” image
• User Boards
• “Pin” other user images to your own repository
• Comments
• Performance
• Thumbnail caching
• Object caching

29. DotNetNuke 6.2 Social Images : Further
Resources
• DNN 6 Wiki
(http://www.dotnetnuke.com/Resources/Wiki.aspx)
• Specifically, “quick starts”
• Services framework getting started (http://bit.ly/PfCXx4)
• See also, framework security (http://bit.ly/Okc2Bs)
• VS 2012 Templates (http://bit.ly/U3Bk3J)
• DotNetNuke 7 CTP (http://bit.ly/SCbU22)
• Biggest tip: read core code!

30. Questions?