Extra Profile Fields
Posted by
Pedro on
Oct 01, 2013; 8:04pm
URL: https://support.nabble.com/Extra-Profile-Fields-tp7586937.html
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>