Quantcast

Extra Profile Fields

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Extra Profile Fields

Pedro <Nabble>
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>


My test forum.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Extra Profile Fields

Pedro <Nabble>
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>
My test forum.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Extra Profile Fields

Harvey
Loading...