Will "the Mighty" Strohl

WillStrohl.Injection Module for DotNetNuke, Explained

Recently, I created my first Forge and CodePlex project.  This one was called WillStrohl.Injection.  The purpose of this project was two-fold.  First, I wanted to build a useful module to give to the community for free, in an attempt to give back.  Second, all of my module development up to this point has been private modules, unavailable to the public in most capacities.  I wanted to have something publicly available.  :)

This first venture was to be in the form of an injection module.  The basic idea was to allow DotNetNuke site administrators to easily inject HTML content into a DNN page.  This, in hopes of preventing the site administrators from modifying the DNN page source code.  I hopefully have achieved that for those that use the module.

This module can be downloaded from CodePlex here:  http://wnsinj.codeplex.com/

You can also find the module in DNN's Forge area by searching, using "strohl" as your search term.

Installed - View Mode

One thing I wanted to do with this module, was to require as little manipulation from the administrator as possible.  I didn't want an administrator to have worry about how and where it might appear to unauthenticated site visitors.  So, I implemented a little trick to hide the module when the portal was not in "Edit Mode," resulting in a view like shown in the image below.  Note that you do not see the module anywhere, but it's there.

WillStrohl.Injection Module: View Mode

Installed - Edit Mode

When you put the portal back into Edit mode, and when the authenticated visitor has edit permissions to the page or the module, you will have a different view of the module.  This is illustrated in the next screen shot.  You should notice that there is no need to worry about the container used with this module.

WillStrohl.Injection Module: View Mode

Adding an Injection

Adding something to be injected is simple.  If you have appropriate permissions, and the site is in Edit mode, click the "Manage this Module" link.  This will bring you to a view like shown in the next image.

WillStrohl.Injection Module: No Items View

Click the "Add New Injection" link.  This will show you an empty web form, allowing you to enter information about your injection.

WillStrohl.Injection Module: Add Injection Form

Enter information into the form as needed to accomplish the effect you're looking for.  The available fields are:

  • Injection Name: The name given to your injection to make it easy to manage later
  • Content to Inject: The HTML mark-up to add to the HTML source when the page is rendered.  This could be client-side scripts, or anything else you find to be necessary.
  • Inject Where: Choose whether you want to inject the content into the header or the footer of the DNN page.
  • Enabled: If you uncheck this checkbox, the injection will be saved, but it will not be injected into the page.

Here is an example of an injection.

WillStrohl.Injection Module: Example Content

Now when you view the DNN page, you can see your injection in the HTML source, as shown below:

WillStrohl.Injection Module: Header Source

You can see that the injection is added to the header, just after the Portal.css, but before any DNN scripts are added to the page.  Any additional injections will be appended to the end of the previous injection, but in the same place in the rendered HTML.  Had we chosen to add the injection to the footer of the page, the source might look like the following image.

WillStrohl.Injection Module: Footer Source

The footer injections are placed in the footer area of the HTML source, before the DNN scripts, but after the hidden form fields.

Update Existing Injections

In order to update an injection that is already created, go back the manage module view.

WillStrohl.Injection Module: View Injection List

Simply click the pencil to edit the injection.  You will be shown the same view as when you added the injection.  Simply change the information as needed, then click "Update" to save your changes.  You will be returned to the injection list view.

Delete Existing Injections

Once again, return to the injection list view.  However, if you want to delete the injection, click the red X icon instead of the pencil.  You should be prompted, asking if you are sure you want to delete the injection item.  If you are, click "OK" to go ahead with the deletion.  You will be returned to the list view again.

blog comments powered by Disqus