What about user Types?

Every time you start developing new solution using DotNetNuke, you probably have a question about user types. If you are creating a job site, you will probably have user types like job seeker, employer etc. Is there any way to set multiple registration and login pages for a portal?

Well, This is tricky. As there is no direct way to multiple login page and registration page. So, I generally use query string parameter to determine the registration type. Once we know which is the right registration control to render (Employer signup or Job Seeker Signup), In addition to writing signup code, I add roles to the created user.

Once you register an employee with Role "Employee" and a job seeker with role "Job Seeker" it will be easier to modify login control and place a role check for logged in user and you can correctly redirect the user to its home without having separate login pages.

Does it make sense to you? Do you have another Idea? please tell me!

DotNetNuke - Access pages without tabId

I'm not sure which version of DotNetNuke included this magic, but if you create a page with tab name Sample Page, then you can simply access that page with portalAlias/SamplePage.aspx.

When I see this thing first time, I was impressed, and tried some more tab names with this. Next is to create a child tab of Sample Page called Child Page and tried and it doesn't work. I scratched my head for some time and tried /SamplePage/ChildPage.aspx and it worked.

I'm using dnn 5.x and it works nicely for almost all the pages.

Then I tried some more magic tabs and I come to know that there are some pages in dnn that are always available to all the portals and child portals regardless of they are created or not. For example, If you type portalAlias/login.aspx it will show a login window. If you try portalAlias/LogOff.aspx it will immediately logoff you!

It's nice to know this thing, because it will be useful when you are developing a new skin. If you forget to place login skin object and want to login or logoff, its easier to do that with this.

I assume this is a magic from dnn friendly url provider. I've come to know about this just before some time and thought it may be helpful to you also!

DotNetNuke path helper methods

1. ModulePath
Useful in – Module Development
Member of – PortalModuleBase Class

Bad Practice:
<asp:image id="img" runat="server" imageurl="/DesktopModules/ModuleName/Images/ImageName.gif"/>
Or
<img src="/DesktopModules/ModuleName/Images/ImageName.gif%E2%80%9D" alt="Alt" />

Good Practice:
<asp:image id="img" runat="server" ImageUrl="<%= ModulePath %>Images/ImageName.gif"/>
Or
<img src="<%= ModulePath %>Images/ImageName.gif" alt="Alt Text"/>

Please note:
a. ModulePath will correctly resolve the path to module image regardless of in whatever the tab you are using.
b. If module name is changed, it will still remain correct.
c. This is also useful when you are linking a javascript file or adding additional css reference.

2. SkinPath
Userfull in – Skin Development
Member of – Skin Class

Similar to ModulePath, SkinPath variable will help you resolve the path to your skin folder. You can use it in similar way as ModulePath.

3. Getting SkinPath in Module Development
Code:
PortalSettings.ActiveTab.SkinSrc will return an full path to your ascx control in skin folder. You can simply use System.IO.Directory.GetParent().Name get folder name.

4. Getting Domain name anywhere in your development cycle
Code:
DotNetNuke.Commons.Globals.GetDomainName(Request);

There many in the list, but that's it for now. Happy coding:)

Converting skin package of DotNetNnuke 4.x to DotNetNuke 5.x

• First step for converting the skin package is to Install dotetnuke 4.x skins to dotnetnuke 5.x.
• Once you install the lagency skin package, now you need to go to Admin > Extensions if you have installed that Skin to Admin Extensions otherwise go to Host > Extensions
• In the skins section, find the skin you want to create 5.x package and click on Edit icon at the starting of it
• This will launch the skin information. Update version number, release notes, licence, owner, company, email etc and press Update.
• Now click on Create Package
• This will launch a create package wizard. As you already change the information about version number, licence and all that, just follow the wizard by clicking Next each time.
• Once you finish this wizard, package is generated at ~/Insatall/Skins
• That zip file package is a dotentnuke 5.x compitible package for your skin.
• Follow the same steps for generating package for container also.

Notes:

• You can use this method to package any extension of dnn 5.x (like skin object, module)
  
• This will generate separate packages for skin and container.
  
• You can use this method to create update package of an existing skin
• If I want to create a single package for installing skin and container, I have to manually merge the files and .dnn files. Please suggest if someone knows about creating a single package for skin and conatainer using this method.
• This is how I have converted Cash 2.0 skin package for 4.x to 5.x
  

Installing dotetnuke 4.x skins to dotnetnuke 5.x

• If skin and container both are in single package, extract the zip files and rename Skins.zip to skinname.zip
• Login to your host account in dnn 5.x installation
• Go to Host > Extensions if you want to install the skin at host level, otherwise go to Admin > Extensions
• Switch the mode to Edit if it is not already in Edit mode
• Click on install extensions
• In the Extension Installation wizard, select your skinname.zip file and click on next.
• It will show you this message:
  "This package does not appear to be a valid DotNetNuke Extension as it does not have a manifest. Old (legacy) Skins and Containers do not contain manifests. If this package is a legacy Skin or Container Package please check the appropriate radio button below, and click Next"
• It will show 3 Radio buttons, Choose Skin and click Next
• Follow the installation wizard by clicking 'Next' throughout the wizard.
• Now to install container of the container of the skin, rename the skinname.zip back to Skins.zip and rename Containers.zip to skinname.zip.
• Follow the same step as above accept for the radio button where you choose Skin, you just need to choose Container this time.
• That's it. We are done with the installation! Happy Administration!
  

Please read the following this article about creating skin package for dotnetnuke 5.x from the skin package of the skin for dotnetnuke 4.x

Cash - New package for dnn 5.x is available

Free dotnetnuke skin Cash is updated and now it has a new installation package that supports dotnetnuke 5.x version also. Stay tuned to know how I converted dnn 4.x skin to dnn 5.x skin.

Thanks

DotNetNuke - Implementing Multi-color skins

Introduction:
Here I’m going to present an approach to create a DotNetNuke skin which has multiple colors using a single ascx skin control and multiple css files.

• Allow user to choose the color
• When user selects the color, post an ajax request to server to store the setting in database and send response
  
• read the response using javascript and change the css file.
  When user comes to the portal again, load right css from server side by reading database settings for the portal.
  
• implement authorization so that only admin and host of the portal can change skins

Theory:
jQuery – jQuery comes into the picture when our page is loaded in client browser and it is ready. We will use jQuery to post ajax request to server using some parameters that can tell server side code what to do. That ajax call will wait for response and it expects response code (true or false) and response data (new css url).

Skin Object – The skin object will contain UI for changing the skin color as well as jQuery code that does the change in UI after interaction of the user. It handles the ajax request and update the database with the new skin file name.

Skin – While rendering the skin, we have to look into the database to check if current portal has any skin related setting available or not. If its not, we will render the default color skin. If it contains the setting, we will read it and apply.

Htmls and css - We will have a single ascx control called HomePage.ascx, with multiple css files blue.css and gray.css. Default is gray.css. Common attributes for the skin will be included in skin.css. common images are stored in images folder under skin root. Images for individual color css will be resided in a images/colorname/ folder. For instance, images for blue.css wll be in images/blue/ folder and same for gray.

Let’s Implement
Extend Skin – Create a new class that inherits from DotNetNuke.UI.Skins.Skin. Add a property for saving cssName. In get section of the property write a code to load css name from database by passing PortalSettings.portalid.

Use new Property – in ascx control where you have inherits section, change the DotNetNuke.UI.Skins.Skin to your class name. and add following after the register section at the top of the ascx control.

<link id="lnkMyCss" rel="stylesheet" href="<%=SkinPath+GridCss %>" type="text/css" media="screen, projection" />

Note: Make sure you have all the ascx, css and images arranged like mensioned in Htmls and css section.

Skin Object – Create a new skin object and add following code to its ascx.

<a href="javascript:void(0);" onclick="changeTheme(this.color);" color="Gray">Gray</a> |
<a href="javascript:void(0);" onclick="changeTheme(this.color);" color="Blue">Blue</a>
<script language="javascript" type="text/javascript">

function changeTheme(color)
{
jQuery.post(document.location.href,{action:'changeSkin',colorcode:color},response);
}

function response(data)
{
jQuery('#lnkMyCss')[0].href=data;
}
</script>

Add following code to Page_Init of the skin object.

protected void Page_Init(object sender, EventArgs e)
{
if (Request.Form["action"]!=null)
{
string action = Request.Form["action"].ToString();
string settingValue = string.Empty;
switch (action)
{
case "changeSkin":
if (Request.Form["colorcode"] != null)
{
string colorCode = Request.Form["colorcode"].ToString();
settingValue = colorCode == "Blue" ? "blue.css" : "gray.css";
BR.BRESS.Skins.DataProvider.Instance().setSettings(PortalSettings.PortalId, "CSS", settingValue);
settingValue = PortalSettings.ActiveTab.SkinSrc.Replace("HomePage.ascx", settingValue);
}

break;
default:
break;
}
Response.Clear();
Response.Write(settingValue);
Response.End();
}
}

Register Skin Object – Register this skin object in ascx control.

<%@ Register TagPrefix="BRESS" TagName="SKINMANAGER" Src="~/DesktopModules/SkinManager/SkinManager.ascx" %>

Note: The Src should contain a correct path of your skin object.
And wherever you like to add the UI you need to include this:

BRESS:SKINMANAGER ID="sm" runat="server" />

Conclusion:
• This article is only for those who knows basics about skin development and skin object development
• The methods and techniques used in this code are for demo purpose and can be improved
• It is a starting point to implement multi-skin multi-color functionality using DotNetNuke skinning technique.
• Simple alternative to this approach is to create multiple ascx controls and apply css to each control separately.
• Suggestions for enhancements and improvements are always welcome