Employee Self-Service - Details - Full Example

Employee Self-Service (ESS)	Details - Fields	Details - Default Layout	Details - Full Example
Link	Link	Link	Link

1 Overview

The Details section of the Employee Self-Service (ESS) aspect of bxp can be fully customised. bxp will not know what fields you will or won't want, and with what presentation, so we have developed an interface that allows you to customised your own.

To save time on development and configuration a full worked example with all fields as per the wixi article groups has been created to reduce development time. Employee_Self-Service_-_Fields

Please note this full example is provided to serve as a reference for you to customise your ESS to your own business needs. It is not indicative of a finished, customised solution for your business.

2 Details

<div style="width:100%;" id="divESS_SectionsMenu" style="text-align:center;">
<input type="button" name="btnShow_1"  id="btnShow_1"  value="Personal"           class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_Personal' );" />
<input type="button" name="btnShow_2"  id="btnShow_2"  value="Emergency Contacts" class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_EmergencyContacts' );" />
<input type="button" name="btnShow_3"  id="btnShow_3"  value="Social Media"       class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_SocialMedia' );" />
<input type="button" name="btnShow_4"  id="btnShow_4"  value="Support"            class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_Support' );" />
<input type="button" name="btnShow_5"  id="btnShow_5"  value="Employment"         class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_Employment' );" />
<input type="button" name="btnShow_6"  id="btnShow_6"  value="Payroll"            class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_Payroll' );" />
<input type="button" name="btnShow_7"  id="btnShow_7"  value="Tax"                class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_Tax' );" />
<input type="button" name="btnShow_8"  id="btnShow_8"  value="Time Tracker"       class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_TimeTracker' );" />
<input type="button" name="btnShow_9"  id="btnShow_9"  value="Contract"           class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_Contract' );" />
<input type="button" name="btnShow_10" id="btnShow_10" value="Work Permit"        class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_WorkPermit' );" />
<input type="button" name="btnShow_11" id="btnShow_11" value="Travel"             class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_Travel' );" />
<input type="button" name="btnShow_12" id="btnShow_12" value="Pension Scheme"     class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_PensionScheme' );" />
<input type="button" name="btnShow_12" id="btnShow_12" value="Data Protection"    class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_DataProtection' );" />
<input type="button" name="btnShow_13" id="btnShow_13" value="Client"             class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_Client' );" />
<input type="button" name="btnShow_14" id="btnShow_14" value="System"             class="cssMaster_Button" style="width:19%;height:30px;" onclick="fn_Show_EssSections( 'divESS_System' );" />
</div>
<style>
.css_Table_First_Cell{
	width:40%;
	height:30px;
}
.css_Table_First_Row{
	width:60%;
	height:30px;
}
.css_Table_Data_FirstCell{
	height:30px;
}
.css_Table_Data_DataCell{
	height:30px;
}
.css_Table_Data_Alt_FirstCell{
	height:30px;
}
.css_Table_Data_Alt_DataCell{
	height:30px;
}
</style>
<div style="width:100%;" id="divESS_Personal">
	<h2>Personal</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Gender<td>
			<td class="css_Table_Data_DataCell">--strHR_Personal_Gender#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Nationality<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Personal_Nationality#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Birthday<td>
			<td class="css_Table_Data_DataCell">--dteHR_Personal_Birthday#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Home Address 1<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Personal_Home_Address1#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Home Address 2<td>
			<td class="css_Table_Data_DataCell">--strHR_Personal_Home_Address2#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Home Address 3<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Personal_Home_Address3#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Home Address 4<td>
			<td class="css_Table_Data_DataCell">--strHR_Personal_Home_Address4#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Home Address 5<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Personal_Home_Address5#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Home Address 6<td>
			<td class="css_Table_Data_DataCell">--strHR_Personal_Home_Address6#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Civil Status<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Personal_CivilStatus#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Date of marriage<td>
			<td class="css_Table_Data_DataCell">--dteHR_Personal_MarriageDate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Maiden name<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Personal_MaidenName#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Projected retirement date<td>
			<td class="css_Table_Data_DataCell">--dteHR_Personal_ScheduledRetirementDate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Actual retirement date<td>
			<td class="css_Table_Data_Alt_DataCell">--dteHR_Personal_RetirementDate#Read--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_EmergencyContacts">
	<h2>Emergency Contacts</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Emergency Contact 1 - Firstname<td>
			<td class="css_Table_Data_DataCell">--strHR_Emergency_Contact1_Firstname#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Emergency Contact 1 - Surname<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Emergency_Contact1_Surname#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Emergency Contact 1 - Relationship<td>
			<td class="css_Table_Data_DataCell">--strHR_Emergency_Contact1_Relationship#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Emergency Contact 1 - Contact Number 1<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Emergency_Contact1_ContactNumber1#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Emergency Contact 1 - Contact Number 2<td>
			<td class="css_Table_Data_DataCell">--strHR_Emergency_Contact1_ContactNumber2#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Emergency Contact 2 - Firstname<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Emergency_Contact2_Firstname#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Emergency Contact 2 - Surname<td>
			<td class="css_Table_Data_DataCell">--strHR_Emergency_Contact2_Surname#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Emergency Contact 2 - Relationship<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Emergency_Contact2_Relationship#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Emergency Contact 2 - Contact Number 1<td>
			<td class="css_Table_Data_DataCell">--strHR_Emergency_Contact2_ContactNumber1#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Emergency Contact 2 - Contact Number 2<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Emergency_Contact2_ContactNumber2#Edit--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_SocialMedia">
	<h2>Social Media</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Twitter Account URL<td>
			<td class="css_Table_Data_DataCell">--strHR_SocialMedia_TwitterAccount_URL#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Twitter Account Show External<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_SocialMedia_TwitterAccount_ShowExternal#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">LinkedIn Account Show External<td>
			<td class="css_Table_Data_DataCell">--strHR_SocialMedia_LinkedInAccount_URL#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">LinkedIn Account Show External<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_SocialMedia_LinkedInAccount_ShowExternal#Edit--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_Support">
	<h2>Support</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Suport Manager<td>
			<td class="css_Table_Data_DataCell">--intHR_Support_ManagerId#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">HR Owner<td>
			<td class="css_Table_Data_Alt_DataCell">--intHR_Support_HROwnerId#Read--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_Employment">
	<h2>Employment</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Employment Status<td>
			<td class="css_Table_Data_DataCell">--strHR_Employment_Status#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Employment SubStatus<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Employment_SubStatus#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Employee Status<td>
			<td class="css_Table_Data_DataCell">--strHR_Employment_EmployeeStatus#Read--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_Payroll">
	<h2>Payroll</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Payroll Company<td>
			<td class="css_Table_Data_DataCell">--strHR_Payroll_Company#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Payroll Number<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Payroll_Number#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Pay Group<td>
			<td class="css_Table_Data_DataCell">--strHR_Payroll_PayGroup#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Daily Rate<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_Payroll_DailyRate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Weekly Rate<td>
			<td class="css_Table_Data_DataCell">--fltHR_Payroll_WeeklyRate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Monthly Rate<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_Payroll_MonthlyRate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Pay Multiplier<td>
			<td class="css_Table_Data_DataCell">--fltHR_Payroll_PayMultiplier#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Full Time Equivalence<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_Payroll_FullTimeEquivalence#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">BIC<td>
			<td class="css_Table_Data_DataCell">--strHR_Payroll_BankAccount_BIC#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">IBAN<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Payroll_BankAccount_IBAN#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Last Pay Date<td>
			<td class="css_Table_Data_DataCell">--dteHR_Payroll_LastDate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Next Pay Date<td>
			<td class="css_Table_Data_Alt_DataCell">--dteHR_Payroll_NextDate#Read--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_Tax">
	<h2>Tax</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">P2C Date Imported<td>
			<td class="css_Table_Data_DataCell">--dteHR_Tax_P2C_DateIImported#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">P2C Imported by<td>
			<td class="css_Table_Data_Alt_DataCell">--intHR_Tax_P2C_ImportedBy#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Tax Credit Details<td>
			<td class="css_Table_Data_DataCell">--strHR_Tax_P2C_TaxCreditDetails#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Standard Cut Off Rate<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Tax_P2C_StandardCutOffRate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Universal Social Charge<td>
			<td class="css_Table_Data_DataCell">--strHR_Tax_P2C_UniversalSocialCharge#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Local Property Tax Info<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Tax_P2C_LocalPropertyTaxInfo#Read--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_TimeTracker">
	<h2>Time Tracker</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Target Hours Per Day<td>
			<td class="css_Table_Data_DataCell">--fltHR_TimeTracker_TargetHoursPerDay#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Target Hours Per Week<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_TimeTracker_TargetHoursPerWeek#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Target Hours Per Month<td>
			<td class="css_Table_Data_DataCell">--fltHR_TimeTracker_TargetHoursPerMonth#Read--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_Contract">
	<h2>Contract</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Contracted Hours Per Week<td>
			<td class="css_Table_Data_DataCell">--fltHR_Contract_EmploymentContractedHoursPerWeek#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Contracted Hours Per Month<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_Contract_EmploymentContractedHoursPerMonth#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Types of Leave<td>
			<td class="css_Table_Data_DataCell">--strHR_Contract_TypesOfLeave#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Probation End Date<td>
			<td class="css_Table_Data_Alt_DataCell">--dteHR_Contract_ProbationEndDate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Induction Date<td>
			<td class="css_Table_Data_DataCell">--dteHR_Contract_InductionDateTime#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Induction eCourse Id<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Contract_Induction_eCourseId#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Leaving eCourse Id<td>
			<td class="css_Table_Data_DataCell">--strHR_Contract_Leaving_eCourseId#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Max Leave Days Per Year<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_Contract_MaxLeave_DaysPerYear#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Max Leave Hours Per Year<td>
			<td class="css_Table_Data_DataCell">--fltHR_Contract_MaxLeave_HoursPerYear#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Max Sick Days Per Year<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_Contract_MaxSick_DaysPerYear#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Max Sick Hours Per Year<td>
			<td class="css_Table_Data_DataCell">--fltHR_Contract_MaxSick_HoursPerYear#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Absence Entitlement Per Year<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_Contract_AbsenceEntitlementPerYear#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Force Majeure Per Year - 3 Year<td>
			<td class="css_Table_Data_DataCell">--fltHR_Contract_ForceMajeurePerYear_3Year#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Force Majeure Per Year - 5 Year<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_Contract_ForceMajeurePerYear_5Year#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Leave Entitlement Per Year<td>
			<td class="css_Table_Data_DataCell">--fltHR_Contract_LeaveEntitlementPerYear#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Minimum Skills<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Contract_MinimumSkills#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Minimum Docs<td>
			<td class="css_Table_Data_DataCell">--strHR_Contract_MinimumDocs#Read--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_WorkPermit">
	<h2>Work Permit</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">GNIB Id<td>
			<td class="css_Table_Data_DataCell">--strHR_WorkPermit_GNIB_Id#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">GNIB Type<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_WorkPermit_GNIB_Type#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">GNIB Expiry Date<td>
			<td class="css_Table_Data_DataCell">--dteHR_WorkPermit_GNIB_ExpiryDate#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Work Permit Id<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_WorkPermit_Id#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Work Permit Expiry Date<td>
			<td class="css_Table_Data_DataCell">--dteHR_WorkPermit_ExpiryDate#Edit--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_Travel">
	<h2>Travel</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Has Own Transport<td>
			<td class="css_Table_Data_DataCell">--strHR_Travel_HasOwnTransport#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Assigned Vehicle Licence Plate<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Travel_AssignedVehicleLicencePlate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Drivers Licence Id<td>
			<td class="css_Table_Data_DataCell">--strHR_Travel_Driving_DriversLicenceId#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Driving Vehicle Categories<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Travel_Driving_Categories#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Drivers Licence Expiry Date<td>
			<td class="css_Table_Data_DataCell">--dteHR_Travel_Driving_ExpiryDate#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Passport Id<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Travel_Passport_Id#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Passport Expiry Date<td>
			<td class="css_Table_Data_DataCell">--dteHR_Travel_Passport_ExpiryDate#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Passport Restrictions<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_Travel_Passport_Restrictions#Edit--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_PensionScheme">
	<h2>Pension Scheme</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Pension Supplier<td>
			<td class="css_Table_Data_DataCell">--strHR_PensionScheme_PensionSupplier#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Pension Reference<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_PensionScheme_PensionReference#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Pension Scheme<td>
			<td class="css_Table_Data_DataCell">--strHR_PensionScheme_PensionScheme#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Pension Start Date<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_PensionScheme_StartDateTime#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Pension End Date<td>
			<td class="css_Table_Data_DataCell">--strHR_PensionScheme_EndDateTime#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Percentage Employee Contribution<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_PensionScheme_PCEmployeeContrib#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Percentage Employer Contribution<td>
			<td class="css_Table_Data_DataCell">--fltHR_PensionScheme_PCEmployerContrib#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Additional Voluntary Contribution - Percentage<td>
			<td class="css_Table_Data_Alt_DataCell">--fltHR_PensionScheme_AdditionalVoluntaryContribuation_Percentage#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Additional Voluntary Contribution - Amount<td>
			<td class="css_Table_Data_DataCell">--fltHR_PensionScheme_AdditionalVoluntaryContribuation_Amount#Edit--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_DataProtection">
	<h2>Data Protection</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Show photo in FrontDesk<td>
			<td class="css_Table_Data_DataCell">--strHR_DataProtection_ShowPhotoInFrontDesk#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Show photo in Meet the Team<td>
			<td class="css_Table_Data_Alt_DataCell">--strHR_DataProtection_ShowPhotoInMeetTheTeam#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">For no photo what colour avatar<td>
			<td class="css_Table_Data_DataCell">--strHR_DataProtection_AvatarColourForNoShow#Edit--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_Client">
	<h2>Client</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Work Phone<td>
			<td class="css_Table_Data_DataCell">--strClient_Phone#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Primary Mobile Phone<td>
			<td class="css_Table_Data_Alt_DataCell">--strClient_Mobile#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Work Email<td>
			<td class="css_Table_Data_DataCell">--strClient_Email#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">PPS Number<td>
			<td class="css_Table_Data_Alt_DataCell">--strClient_PPSNumber#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Job Title<td>
			<td class="css_Table_Data_DataCell">--strClient_JobTitle#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Company Start Date<td>
			<td class="css_Table_Data_Alt_DataCell">--dteClient_CompanyStartDate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Company End Date<td>
			<td class="css_Table_Data_DataCell">--dteClient_CompanyEndDate#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Photo<td>
			<td class="css_Table_Data_Alt_DataCell">--strClient_Photo#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Supervisor<td>
			<td class="css_Table_Data_DataCell">--intClient_Supervisor#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Extension<td>
			<td class="css_Table_Data_Alt_DataCell">--strClient_Extension#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Company Staff Id Number<td>
			<td class="css_Table_Data_DataCell">--strClient_CompanyStaffIdNumber#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Office Address 1<td>
			<td class="css_Table_Data_Alt_DataCell">--strClient_Address1#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Office Address 2<td>
			<td class="css_Table_Data_DataCell">--strClient_Address2#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Office Address 3<td>
			<td class="css_Table_Data_Alt_DataCell">--strClient_Address3#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Office Address 4<td>
			<td class="css_Table_Data_DataCell">--strClient_Address4#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Office Address 5<td>
			<td class="css_Table_Data_Alt_DataCell">--strClient_Address5#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Office Address 6<td>
			<td class="css_Table_Data_DataCell">--strClient_Address6#Edit--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Email Signature<td>
			<td class="css_Table_Data_Alt_DataCell">--strClient_EmailSignature#Edit--<td>
		</tr>
	</table>
</div>
<div style="width:100%;" id="divESS_System">
	<h2>System</h2>
	<table class="css_Table_New_Table" style="width:100%;" border="0" cellspacing="10" cellpadding="10">
		<tr>
			<td class="css_Table_First_Cell">Field<td>
			<td class="css_Table_First_Row">Current Value<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Last Opened By<td>
			<td class="css_Table_Data_DataCell">--intHR_System_LastOpenedBy#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Last Opened Date Time<td>
			<td class="css_Table_Data_Alt_DataCell">--dteHR_System_LastOpenedDateTime#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Last Updated By<td>
			<td class="css_Table_Data_DataCell">--intHR_System_LastReviewedBy#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Last Updated Date Time<td>
			<td class="css_Table_Data_Alt_DataCell">--dteHR_System_LastReviewedDateTime#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_FirstCell">Last Edited By<td>
			<td class="css_Table_Data_DataCell">--intHR_System_LastEditedBy#Read--<td>
		</tr>
		<tr>
			<td class="css_Table_Data_Alt_FirstCell">Last Edited Date Time<td>
			<td class="css_Table_Data_Alt_DataCell">--dteHR_System_LastEditedDateTime#Read--<td>
		</tr>
	</table>
</div>

3 JavaScript

        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        //Showing and hiding elements as they're clicked
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        function fn_Show_EssSections( strSection ) {

            document.getElementById('divESS_Personal').style.display = 'none';
            document.getElementById('divESS_EmergencyContacts').style.display = 'none';
            document.getElementById('divESS_SocialMedia').style.display = 'none';
            document.getElementById('divESS_Support').style.display = 'none';
            document.getElementById('divESS_Employment').style.display = 'none';
            document.getElementById('divESS_Payroll').style.display = 'none';
            document.getElementById('divESS_Tax').style.display = 'none';
            document.getElementById('divESS_TimeTracker').style.display = 'none';
            document.getElementById('divESS_Contract').style.display = 'none';
            document.getElementById('divESS_WorkPermit').style.display = 'none';
            document.getElementById('divESS_Travel').style.display = 'none';
            document.getElementById('divESS_PensionScheme').style.display = 'none';
            document.getElementById('divESS_DataProtection').style.display = 'none';
            document.getElementById('divESS_Client').style.display = 'none';
            document.getElementById('divESS_System').style.display = 'none';
			document.getElementById(strSection).style.display = 'inline-table';
        }
        fn_Show_EssSections('divESS_Personal');