Continuing in the line of blog posts that help extend the ease of DNN management, today's post on DNN Enhancement is our Page Skins Manager.

As a development company with tons of DotNetNuke sites out there for our clients, we've found that we often will need to make site-wide edits and updates to the site as quickly and painlessly as possible. The larger the sites are (more pages), then the longer it takes to perform some tasks across-the-board. Here, I'm thinking of DNN skin-related changes, the kind you have to make when, for example, a client wants you to update the look & feel of the site skin for the "new 2012 web 2.0 look" that the designers have been working on.

If you have only a few page templates, perhaps a Home and Interior (and maybe an Admin skin), AND you've managed the skin through the Site Settings, then it's not really a problem for you to edit.

However, in sites with many pages and a variety of skin templates, then this DNN Page Skin manager can help tremendously! Think of it as a bulk manager that lets you quickly see what skins and containers are used across the whole portal and then make changes to many pages at a time.

Imagine that we have several skins such as Home, Interior Main, Interior Three Column, Interior Special, News, Admin, etc. The DNN Site Settings might have the defaults for the portal to use the Interior Main. However, in several pages sprinkled throughout the site, you'll have some set in the Page Settings, a specific skin set for that Tab. Well, now to setup the rest of the example, let's imagine that the client wants you to update the site with new skin designs, BUT, it's not a simple 1-to-1 change.

This has happened to us a few times in the past, and our solution at the time was to either hunt down each page manually by visiting every page of the site and check for/make changes, or to work in the database and sort by the SkinSrc field in the Tabs table and make the edits there. Earlier this year, we were in the same situation with a site that had about 250 pages. The specifics were that we could change the main pages, but then needed to have whole sections of pages change to different/new skins and go to the new "2011 design" while others had to stay with the old, etc. We had a mess of a good skin update project on our hands, and we thought, "Man, what a perfect use of XMod Pro to build a DNN custom Page Skin Manager!"

There are lots of ways that this manager can help save time.

Benefits:

• This manager lets you see all the pages and their skins that are set at a glance.
• Then you can edit that one page manually in the normal page's page settings.
• You can bulk edit all the pages that have that same skin setting and change them all to a different skin.
• You can clear out all the pages with that skin to go back to the "none specified" setting in a batch.
• Also, it's useful if you've been messy in the past with whether a skin was uploaded and used as a PORTAL skin or a HOST skin... and then you edit one or the other and get out of sync... this manager lets you see them all at a glance, and then you can easily take all of one and change them to the other.

Download the Code - MooreCreative_XMP_PageSkinContainer_Manager.zip

I've posted a zip file with the contents of this blog post...so that you can quickly get the code and try it out. Each form or template is in a txt file and ready to use following the notes and instructions below.

First - Make 3 Pages & Add XMod Pro Modules

Begin by making a new page called "Page Skins" and if you like, put it under the parent of Admin and order it after the core Pages tab. Next add the main XMod Pro module to the page and we'll get into the Template and Form setup.

Also, you'll need to make child pages for this new PageSkins page, for "Page Containers" and "Module Containers" put in the XMod Pro FormView module, on both of these.

XMod Page One: PageSkins.aspx - XMod Template "_dnn_PageSkin_List"

The first goal was to make a management list page that would display all of the Tabs in the site, and show us the skins and containers that might be specified for the Tabs.

Whenever we're making forms or templates that are for internal use or are system type things, we'll name them with a leading underscore to help make sure that the name goes to the end of the list of XMOD forms and templates. That helps group the system and bottom items when you get into 20 and 40 templates in a complex site.

For the Template that we've named "_dnn_PageSkin_List", we have a basic table structure that presents each page/Tab in a row, with column breakdown of Tab Name, and then Skin and Container settings.

SQL - We have two versions of the SQL Query for the main Template... the one I’ve presented here is a simple query that you can insert in the ListDataSource select statement. The other version that we use, on occasion, is one in a Stored Procedure. It has a little bit more logic to it and will order the pages a bit differently and suppress the Admin menu from the list returned. If anyone is interested in that version, LMK and I’ll post it too. For now, this query gets the job done.

Some of the things you'll see used in the Template:

xmod:ScriptBlock: We have a general set of css styles that we use in our generic table listings. the set specify things like alternating colors, error highlight colors, etc. We keep some of them, especially in managers like this, in the XMod code rather than in the skin css as it helps us keep them portable!

ItemTemplate / AlternatingItemTemplate: These have the same code in them, just with a different class to setup our alternating row styles. I know we can do styles for alternating rows other ways, but this works well, cross browser, and is easy to follow.

xmod:Select: SkinSrcFlag | ContainerSrcFlag - we use XMod case statements to allow us to display/highlight items differently based on whether the content is present or blank/null. It lets us quickly set a different style, and a message such as "- None Specified -".

SearchSort - Although not required, I never build an XMod list without the search/sort at the top! You can sort by TabName or TabID, or by SkinSrc. You can also search. We have it setup by TabName, though I could also see where skin name might be useful too.

MooreCreative's DNN Enhancement with XMod Pro, the Page Skin/Container Manager

Clicking on the edit pencil icon lets you go directly to the Page Settings of that Tab so that you can change it's specified Skin setting. This allows you to quickly get to and edit one page at a time.

Clicking on the Change Skins link, however, takes you to an XMod Pro custom form which we'll describe below. It's really the value in this DNN Enhancement, as it lets you batch change many pages and modules at a time!

XMod Pro Page One: PageSkins.aspx - XMod Pro Form "_dnn_PageSkin_Batch_Form"

This Form we've titled as "_dnn_PageSkin_Batch_Form", and you'll only be needing the EditForm.

For the Form, we've used the XMod Pro Form Builder wizard to produce a simple form which gives us the SkinSrc and the TabID. We find that on quick forms that we build for our own internal use, or quick forms for simple tables for client's use, we love using the Form Builder. Many times, our more complex forms will start out from a quick build from the Form Builder and then we'll enhance it further with js and changes to make the XMod Pro tags more complex. That's what we did here and swapped that TabID out for a Dual List.

Probably the only complex piece in this was setting up the values for the DualList in the initial select statement. After that, all the rest is creating forms with XMod Pro's built in features.

You'll notice that we had to do some tricks with our SQL for both creating the array to show selected items, as well as how to process the submitted values on form submission. Some of these would be easier in a stored procedure, but for this quick and simple tutorial I try to keep out stored procedures. Feel free to clean up the SQL (and code for that matter) to suit your needs.

the Pages/Tabs - Skin Manager Form

XMod Page Two: PageSkins/PageContainers - XMod Form "_dnn_PageContainer_Batch_Form"

This Form is pretty much a duplicate of the one that handles skins except that it is working with the ContainerSrc instead. The other difference is that we're working from a form post when loading this page, so the select statement has a different parameter to it.

You'll notice too, that on this form, since it's a separate page, we need to have a redirect value on both the Update and Cancel buttons so that we'll be returned to our main list. If you have a different path/structure, you'll need to make sure to update these page names/paths.

the Pages/Tabs - Container Manager Form

XMod Page Three: PageSkins/ModuleContainers - XMod Form "_dnn_ModuleContainer_Batch_Form"

In this DNN enhancement tool built with XMod Pro, this could be the most powerful element. Imagine how many modules you have throughout a large site, and what happens when you need to change a batch of them to a different container? Well, this solves the problem of having to manually edit each module on each page! Simply load the form and you can set new containers to any group of modules all in one click of the Update button!

This form is pretty much a duplicate of the one that handles the containers except that it is working now with the ContainerSrc but in the TabModules table in the DotNetNuke database. Now, there are some important differences here to note and make changes to based on your DNN environment! In DNN 4 vs 5+ there is a difference in availability for the "Title" of a module. So, you'll see in the ControlDataSource for the list of modules and titles, that I have one version for each. Simply comment out/in the correct one for your version of DNN.

• Use for DNN5up
• CAST(TabModules.ModuleTitle AS VARCHAR)
• Use for DNN4down
• CAST(Modules.ModuleTitle AS VARCHAR)

And, same as with the other one, since it's a separate page, we need to have a redirect value on both the Update and Cancel buttons so that we'll be returned to our main list. If you have a different path/structure, you'll need to make sure to update these page names/paths.

the Module - Container Manager Form

Enjoy The Results

Now, at a glance, you can review all of the tabs of the website on one page and at-a-glance audit the skins that are being specified. If you need to make a batch edit to all the skins or to all of a group of pages, then the XMod Pro form will allow you to make sweeping changes to several pages/Tabs or Skins at a time.

Some note for further development:

I think you'll find that when we're preparing an XMod item like this, we're putting together the quick and dirty code to get it working fast. There are always improvements and additions that can be made to things like this... we've used it a time or two now in this state and haven't desperately needed new items, but we have had a few ideas. I would love to see your thoughts and ideas for additions too!

Thanks for reading everyone, I hope you try out the tool and get some use out of it!

Ryan - MooreCreative

MooreCreative XMOD Development Blog

In the MooreCreative XMOD PRO Development Blog, I'll try to share some of the thoughts and ideas that we've come up with on a day-to-day basis as my development company uses DNN + XMOD PRO to tackle client projects. I'll include items such as tips/tricks, did-you-know articles, troubleshooting/testing examples as well as posting samples solutions and explanations behind our experience working with XMOD and jQuery functions, PageBlaster, ZLDNN Article, and other modules/elements.

If you would like to see us tackle a topic, especially anything out of the forums that could use further examples, please, don't hesitate to email me, and I'll look into preparing it for a blog post.

MooreCreative_XMP_PageSkinContainer_Manager.zip