Walkthrough: Creating A User Profile

Many sites have a need to create solutions where only one record is allowed per user. A good example of this is the User Profile, but it could be something else like a company profile, a resume, a for sale by owner home listing, or any number of applications. In this walkthrough we'll create a user profile application. This walkthrough is not intended to explain how to create forms and/or templates. It's focus is to guide you through the process of setting up a one-record-per-user application. To keep things simple, we'll dispense with the styling and other nice-to-have features. That is left as an exercise for the reader.

Description

In this walkthrough we'll create a user profile application that:

1. Allows a registered DNN user to only add one record
2. Create the data-entry form used to create each profile. This form will also demonstrate how we can supply a default value for the user which can be overridden or kept
3. Create 2 list view templates: The first will be shown to the user so he/she can add/edit their profile. The second will list all of the profiles that have been created.
4. Demonstrate how to combine our custom data with profile data already stored for the user by DNN.

Data-Entry Form

The data-entry form is pictured below. It offers the user an option to hide their identity by providing a screen name if they desire. The Screen name defaults to the user's DNN user name. Here we're logged-in as the Super User account, which has a user name of "host". The user can keep that value or change it. Next we provide a drop-down list box with several possible hair colors including black, blonde, purple, and hot pink.  The next control is a radio-button list, which provides a short pick-only-one control for short option lists. Following that, we use a text box for the user's favorite movie, and we provide multi-line text boxes to give them room to rant or rave about their likes and dislikes. We've also modified the text of the Add Item button to the more descriptive "Create Your Profile". If the user is updating the profile, the text will be "Save Changes to Your Profile".

Let's start building...

1. In the Manage Forms page, select the "Create New Form" option and click the "Create New Form" link.
2. Here's a screen shot of the next page. You can modify the settings, but you MUST tick the Only Allow One Record Per User check box. Without this setting, users will be able to add as many records as they want. Additionally, if you decide to require approval, you'll probably want to check the After Approval: Allow user to edit record check box and, perhaps the one that allows the user to delete the record. This will allow the user to modify his/her profile later on and even delete it if they no longer want their profile displayed.
   .
    
3. Click the Next >> link to go to the form editor. Rather than step you through how to use the form editor, we'll simply provide the form's definition here. You can copy and paste it into the code.
   
    

   <form> <controls>  <input ref="ScreenName" class="NormalTextBox" width="150px" maxlength="25">    <label>Screen Name</label>    <default>{XMOD_UserUsername}</default>  </input>  <select1 ref="HairColor" class="Normal" appearance="minimal">    <label>Hair Color</label>    <items>      <item>        <label>Black</label>        <value>black</value>      </item>      <item>        <label>Blonde</label>        <value>blonde</value>      </item>      <item>        <label>Brunette</label>        <value>brunette</value>      </item>      <item>        <label>Red</label>        <value>red</value>      </item>      <item>        <label>Purple</label>        <value>purple</value>      </item>      <item>        <label>Hot Pink</label>        <value>pink</value>      </item>      <item>        <label>White</label>        <value>white</value>      </item>    </items>  </select1>  <select1 ref="Gender" class="Normal" appearance="full">    <label>Gender</label>    <items>      <item>        <label>Male</label>        <value>male</value>      </item>      <item>        <label>Female</label>        <value>female</value>      </item>      <item>        <label>None of the Above</label>        <value>none</value>      </item>    </items>  </select1>  <input ref="Movie" class="NormalTextBox" width="250px">    <label>Favorite Movie</label>  </input>  <textarea ref="Likes" class="NormalTextBox" cols="65" rows="5">    <label>What I Like</label>  </textarea>  <textarea ref="Dislikes" class="NormalTextBox" cols="65" rows="5">    <label>What I Dislike</label>  </textarea>  <addbutton text="Create Your Profile" display="linkbutton" class="CommandButton" />  <updatebutton text="Save Your Profile Changes" display="linkbutton" class="CommandButton" />  <cancelbutton text="Cancel" display="linkbutton" class="CommandButton" /> </controls> </form>

    

4. Click the Save Form link at the bottom of the page and then the Return link.

Display Templates

The next step is to create our templates to display the profile data. Our solution calls for 2 XMod module instances - one for users to see and edit their templates and one which allows registered and un-registered users to see basic profile data for everyone that's created a profile record. So, we'll create 2 list view templates and one detail template.

The User's List View

The user's list view template is pretty straight-forward. From the Manage Templates page, Click the Add New Template button to create a new template. On the General  Tab, enter and select the following info.

Next, click the Item Settings tab. On that tab, select the Item Style sub-tab. On that tab, use the color picker to select the color white or simply type #FFFFFF into the Background color box as shown below.

Next, select the Editor template to go to the template editor. You could use the drop-down tag list controls to create your template or you can simply copy and paste the code we've supplied below. As with all templates, how you format and layout your templates is up to you and the HTML code you use to style it. In the example below, the plain text and HTML code has been colored gray so that you can focus on the XMod tags we're using. There are 3 types of tags we're using: <xmod:field> tags which tell XMod where to position data from the record; <xmod:user> tags - we're only using one here to give you an example of how you can grab the user's DNN profile data, in this case, the user's country; and XMod "button" tags which allow you to customize the Edit and Delete buttons. While we're just changing the text of the buttons below, you can also opt to turn them into clickable images or HTML buttons by setting their display property to imagebutton, button, or linkbutton (the default). See <xmod:editbutton>, <xmod:deletebutton>, <xmod:copybutton>, <xmod:approvebutton> for more details.

Click the Save Template button to return to the main Manage Templates screen.

The "Everyone's" List View

1. Click Add New Template again to begin creating the list view we'll use for all users.
2. Select the General tab and enter User Profile List (Everyone) for the template name, select List View - List for the template type, and select User Profile from the list of forms.
3. Our list view template is going to provide a link users can click to see the profile's details and we want to show those details on the same page, so on the Template Settings tab, tick the Show Details Inline checkbox.
4. Select the Item Settings tab. Then select the Item Style sub-tab.
5. In the Item Color - Background text box, enter #FFFF99 (or select a light yellow color using the color picker).
6. Select the Alternating Item Style  sub-tab. For every other item in the list, we'll make the background white. In the Item Color - Background text box, enter #FFFFFF (or select white using the color picker).
7. Finally, select the Editor tab and copy and paste the following code into the editor (again, the plain text and HTML code are in gray so you can see the XMod tags better). Here we're displaying the user's Screen Name and their country of origin, as well as providing a link to view the details.
   
    

   <span class="Normal"><strong>Screen Name:</strong> <xmod:field name="ScreenName"/> from (<xmod:user type="add" field="country"/>)<br /> <xmod:detailbutton text="View Profile Details" class="CommandButton"/></span>

8. Click Save Template to save your changes and return to the main Manage Templates screen.
    

The Detail Template

Finally, we need to create the detail view that users will see when they click the detail link

1. Click Add New Template
2. Select the General tab
3. For the form name, enter User Profile - Detail.
4. Select Detail View as the template type
5. Select User Profile as from the Form Fields drop-down list.
6. Select the Editor tab
7. Our detailed view of the profile will include the user's screen name, country of origin, hair color, favorite movie, Likes, and Dislikes. In other words, it's nearly identical to the User's list view template we've already created, except we won't be including any command button definitions (like Edit, Copy, etc). Copy and past the following code into the Editor:
   
    

   <div class="Normal"> <strong>Screen Name:</strong> <xmod:field name="ScreenName"/><br /> <strong>Country:</strong> <xmod:user type="add" field="country" /><br /> <br /> <strong>Hair Color:</strong> <xmod:field name="HairColor" /><br /> <strong>Favorite Movie:</strong> <xmod:field name="Movie" /><br /> <strong>What I Like...</strong><br /> <div style="border: 1px solid black;background-color:#FFFF99;padding:5px;">   <xmod:field name="Likes" /></div> <strong>What I Dislike...</strong><br /> <div style="border: 1px solid black;background-color:#FFFF99;padding:5px;">   <xmod:field name="Dislikes" /> </div>

8. Click Save Template and then click Return. We're done creating our templates. Now all we need to do is setup our modules to use them.
   
    

Setting Up Our Modules

If you haven't already done so, create a new page in your DNN web site and add 2 XMod modules to the page. The first will be used by Registered Users to enter and their profile. The 2nd will be seen by all users.

Module 1: The User's Profile

1. First, we need to set the security for this module so that only registered users will be able to see it. From the first module's Actions menu, select Settings which you'll find toward the bottom of the menu.
2. Under "Basic Settings", in the Permissions section, if "Inherit View permissions from Page" is checked, uncheck it. Next, make sure that "Registered Users" have the View Module permission checked, but not the Edit Module permission. In a typical scenario, no other role (except Administrators) should have any box checked. By doing this, we're ensuring that the User's Profile module can only be seen and used if the user is registered and logged-in. Click the Update link to return to the main page.
3. While we're here, we might as well change the Module Title to Your Profile.
4. Select Configure XMod Module from the first module's Actions menu.
5. On the General tab, select User Profile as the Data Entry Form.
6. Set the Page Size to 1
7. Set the Result Set Size to 1 as well.
8. In the Filtering section, tick the "Show Only Current User's Records" check box. This is required so that when a user is logged-in, he or she will only be able to see the profile they've created.
9. In the Security section, in the "Roles that Can Add Records" list box, select Administrators and Registered Users. To select those two roles, you need to hold the CTRL key while you select the role.
10. If a user hasn't yet created a profile, we want to display a message and provide a link so they can. To do this, enter the following code in the "No Items Found Message" text box:
    
     

    <span class="NormalRed">You Haven't Created Your Profile</span><br /> <xmod:addbutton text="Create Your Extended Profile" class="NormalBold"/>

11. Next, select the Display tab
12. For Detail View Template, select User Profile Detail. Technically we're not using this template, but XMod requires that a detail template be specified. Theoretically, you could use any template here.
13. For List View Template select User Profile List.
14. Click the Save Changes link. What you will see should look similar to this (we've already change the module's title to "Your Profile":
    
    

Module 2: The "Everyone's Profile" Module

1. Note that, since we want everyone to be able to see the user profiles (something you may not want to do in a production environment), we can simply accept the default DNN security settings for this module. By default, all users are able to view this module. The security you set is up to you.
2. On the second module, select Configure XMod Module from the Actions menu.
3. On the General tab, select User Profile for the Data Entry Form
4. For the "No Items Found Message", enter the following code:
   
   <span class="NormalRed">No Profiles Were Found</span>
    
5. Select the Display tab
6. For Detail View Template select User Profile Detail. Since this module will be providing a link to view the details, we need to ensure we're selecting the right template.
7. For List View Template select User Profile List (Everyone).
8. Click Save Changes and you're done. Your page should look something like this:
   
   
    

The Finished Product

At this stage, we have a functional User Profile application that combines the DNN user data with our extended data into one place. What kind of data you use and how you format it is up to you. Hopefully this walkthrough has given you a good foundation upon which to build your solution. Below are some screen shots showing the finished product.

Here's a shot of the "Your Profile" and "Everyone's Profile" modules. In this case, user #2 (screen name Sci-Fi Fanatic) is viewing the page. She sees her profile at the top, with a link to edit that profile. At the bottom she sees all the profiles that have been added: User #1 (screen name TomFoolery) and hers. Notice that her record also has an "edit" link, but no link shows up for the profile for User #1.

This next shot is visible by User #3. He hasn't yet created a profile. Notice that he is prompted to create on in the first module. He can view the profile details for User #1 and User #2, but he is unable to edit them.

Next, User #3 is viewing User #2's profile