Extra Profile Fields

[Pedro]

Here are the steps to add the basic extra fields ( age, sex and place ) in your app.

1- At the bottom of your app-> See "Edit this page" or "naml".
2- At the engine wheel -> "Go to Advanced Editor" .
3- Add new file named "Extra Fields"
4- add the following code:

<macro name="extra_profile_fields" requires="user,servlet">
    
    <n.set_local_user.this_user />
    
    <!-- css for the extra fields input  -->
    <style type="text/css">
        #extra_fields_form{
       }
        #extra_fields_form div, #extra_fields_form label{
        float: left;
        clear: both;
        border-radius: 10px;
        }
         #extra_fields_form div{
        margin-left: 10px;
        margin-top: 5px;
        }
        #extra_fields_form .sub_but{
        padding: 3px;
        margin: 3px 10px;
        }
        .clear{
        clear:both;
        }
        #extra_button{
        cursor: pointer;
        font-style:italic;
        }
    </style>
    <!-- Setting the dropdown effect to show the input fields -->
    <script type='text/javascript'>
        $( document ).ready(function() {
           $("#extra_button").click(function () {
              $("#extra_fields_form").show("slow", function(){
                 Nabble.resizeFrames();
              });       
           });
         });       
    </script>
    

    <!-- Here I check if a form has been submited, if so, I get the parameter and save insite the user property -->    
    <n.if.is_submitted_form>        
        <then>
            <n.this_user.set_property name="sex" value="[n.get_parameter name='sex' /]" />
            <n.this_user.set_property name="location" value="[n.get_parameter name='location' /]" />
            <n.this_user.set_property name="bday" value="[n.get_parameter name='bday' /]" />
            <!-- S1: you can save more properties here, just copy and change the lines above -->
        </then>        
    </n.if.is_submitted_form>
    
    <!-- Listing the fields already filled -->
     <n.this_user.list_extra_fields/>
</macro>

<macro name='list_extra_fields' requires='user'>
    <n.if.this_user.has_property name="sex">
        <then>
            <strong>Sex: </strong><n.this_user.get_property name="sex"/><br/>
        </then>
    </n.if.this_user.has_property>
    
    <n.if.this_user.has_property name="bday">
        <then>
            <n.if.not.is_empty.trim.this_user.get_property name="bday">                
                <then>
                    <strong>Age: </strong><span class='age' ></span><br/>
                    <n.age_script/>
                </then>
            </n.if.not.is_empty.trim.this_user.get_property>
        </then>        
    </n.if.this_user.has_property>
    
    
    <n.if.this_user.has_property name="location">        
        <then>
            <n.if.not.is_empty.trim.this_user.get_property name="location">
               <then>
                   <strong>Location: </strong><n.this_user.get_property name="location"/>
                </then>
            </n.if.not.is_empty.trim.this_user.get_property>
        </then>
    </n.if.this_user.has_property>
    
    
    <!-- Last login and ip are not saved here because they may not be controlled by the user-->
    
    <!--Last Login property-->
    <n.if.this_user.has_property name="last_login">        
        <then>
            <br/>
            <strong>Last Login: </strong><n.this_user.get_property name="last_login"/>
        </then>   
    </n.if.this_user.has_property>
    
    <!-- Ip property-->
    <n.if.this_user.has_property name="ip">        
        <then>
            <br/>
            <strong>ip: </strong><n.this_user.get_property name="ip"/>
        </then>   
    </n.if.this_user.has_property>


</macro>

<!-- Here is the form to fill the extra fields. It is only shown to the own user.-->
<macro name="extra_fields_form">   

    <br/>
    <span id="extra_button">Edit your profile</span>
    <hr/>
        <form style="display: none" id="extra_fields_form" method="post" action=""  class='shaded-bg-color'>      
 
        <div>
            <label>Sex:</label>
            <div>
                <input type="radio" class='Male' name="sex" value="Male" />Male<br />
                <input type="radio" class='Female' name="sex" value="Female" />Female
            </div>
        </div>
        <br class='clear'/>        
            
            <div>
                <label>Birthday:</label><div><input type="text" class='bday' pattern='^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d$' name="bday"  /> (mm/dd/yyyy)</div>
            </div>
            <br class='clear'/>
            
        <div>
            <label>Location:</label><div><textarea class='location' maxlength='30'  name="location" ></textarea></div>
        </div>
        <br class='clear'/>
            <br/>
        <input class="sub_but"  type="submit" value="Update" />
        <br class='clear'/>
    </form>    

    <!-- S2 You can keep adding properties input fields here-->
    
    <n.load_fields/>
</macro>


<!-- Here the input fields are filled with previous saved values -->
<macro name="load_fields">
    <n.if.this_user.has_property name="sex">
        <then>
            <script type='text/javascript'>
                $(document).ready(function(){
                var sexClassName = '<n.this_user.get_property name="sex"/>';
                var sexClass = $("."+sexClassName);
                sexClass[0].checked=true;
                })                
            </script>
        </then>
        </n.if.this_user.has_property>
    
    <n.if.this_user.has_property name="bday">         
        <then>
            <script type='text/javascript'>                          
                $(document).ready(function(){
               var bday= '<n.this_user.get_property name="bday"/>';
                $(".bday").val(bday);
                age_fill(bday);                
                })                
            </script>            
        </then>    
    </n.if.this_user.has_property>
    
    <n.if.this_user.has_property name="location">        
        <then>
            <script type='text/javascript'>
                $(document).ready(function(){
                var location = '<n.this_user.get_property name="location"/>';
                $(".location").val(location);               
                })                
            </script>            
        </then>        
    </n.if.this_user.has_property>
    
    <!-- S3 add here more scripts to fill out your input fields-->
    
</macro>


<!-- Here is an extra script to calculate users age based on his birth-->
<macro name="age_script">
    <script type="text/javascript">
        
        function age_fill(birth){
        var bday= birth;
        var d =bday.split("\/");
        
        var d1 = new Date(d[2],d[0], d[1]);
        var d2 =new Date();         
        
        var milli=d2-d1;
        var milliPerYear=1000*60*60*24*365.26;
        
        var yearsApart=milli/milliPerYear;        
        var age = Math.floor(yearsApart);        
        $(".age").text(age);
        
        }       

       
        if( $("#extra_fields_form").length == 0){
        age_fill('<n.this_user.get_property name="bday"/>');
        }       

        

    </script>
</macro>

[Pedro]

Then, edit your profile_header macro, I will explain it better later.

<override_macro name="profile_header" requires="user">
<n.set_local_user.this_user />
<n.block.>
    <div class="second-font shaded-bg-color rounded" style="font-size:170%;padding:.2em .5em;margin-left:.1em">
        <n.local_user.name/>
    </div>
    <table>
        <tr valign="top">
            <td><n.local_user.avatar size="big"/></td>
            <td style="width:100%;padding-left:.5em">
                <n.if.both condition1="[n.visitor.is_site_admin/]" condition2="[n.local_user.is_authenticated/]">
                    <then>
                        <strong>Email</strong>: <n.local_user.user_email/>
                    </then>
                </n.if.both>

                <n.if.local_user.is_banned>
                    <then>
                        <n.local_user.banned_label/>
                    </then>
                    <else>
                        <n.local_user.registration_label/>                        
                       <!-- <n.local_user.list_current_groups/> -->
                        
                        <n.local_user.extra_profile_fields/>                       
                        
                        <n.if.not.local_user.is_deactivated>
                            <then.local_user.send_email_to_user_link/>
                        </n.if.not.local_user.is_deactivated>                        
                    </else>
                </n.if.local_user.is_banned>       
                <!-- If this is the profile of the visitor -->
                <n.if.visitor.equals.local_user>
                    <then>
                        <!-- if the user is authenticated -->
                        <n.if.local_user.is_authenticated>
                            <then>                                                            

                                <n.local_user.authenticated_self_profile_header/>
                                <n.local_user.extra_fields_form/>  
                              
                                <n.local_user.set_property name="last_login" value="[n.now.long_format/]" />                                
                                
                            </then>
                            <else>
                                <div style="margin-top:.5em">
                                    <t><n.register_link.>Register now</n.register_link.> if you want to edit your profile, receive posts via email,control your starred items or have access to your global profile.</t>
                                </div>
                            </else>
                        </n.if.local_user.is_authenticated>
                    </then>
                    <else>
                        <n.if.visitor.can_manage_banned_users>
                            <then>
                                <div style="margin-top:.5em">
                                    <img src="/images/icon_blocked.png" class="image16" style="margin:0 1px"/>
                                    <n.if.local_user.is_banned>
                                        <then><a href="[n.local_user.unban_path/]"><t>Unban this user</t></a></then>
                                        <else><a href="[n.local_user.ban_path/]"><t>Ban this user</t></a></else>
                                    </n.if.local_user.is_banned>
                                </div>
                            </then>
                        </n.if.visitor.can_manage_banned_users>
                    </else>
                </n.if.visitor.equals.local_user>
            </td>
        </tr>
    </table>

</n.block.>

</override_macro>

[Harvey]

[mark]

Awesome. Thanks!

Does it matter which part of the site that you're in when you click Edit this page? If so, which part of the site should I be in? Just any person's profile (such as mine), or the page for editing my profile, or somewhere else?

If I only I want to add a field for a clickable link (and not have the other extra fields), what should I do? For instance, I have a forum for profiles, where each user can make a profile post (with as much or as little information as they desire). However, I'd like them to be able to link to that post from their built-in profile, since that would make the profile posts more accessible.

[GregChapman]

Hi Mark,

mark wrote

Does it matter which part of the site that you're in when you click Edit this page? If so, which part of the site should I be in? Just any person's profile (such as mine), or the page for editing my profile, or somewhere else?

Anyone may enter the NAML editing part of any Nabble app anywhere to inspect its code even Nabble Support itself. However you can only edit the code you see if you are an Administrator in that app.

You are taken to the code for whatever "this page" may be, but from that screen you can navigate anywhere else in the code for that app.

If I only I want to add a field for a clickable link (and not have the other extra fields), what should I do?

There you have me! I'm not an expert in NAML code. Obviously, it will need to be the appropriate NAML code that generates the link to the relevant introductory post for the profile currently displayed.

As the profile pages list all a user's posts it may not be too difficult to work out what that is. As posts are listed most recent at the top, presumably it will be the code for the link at the bottom of the list.