一、使用salesforce实现自定义的“任务签到”页面，实现了百度地图地位功能
1）首先必须创建一个自定义页面
2)创建salesforece对象
3)创建控制器
4)进入页面写代码
二、代码实现
前台页面代码
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" showQuickActionVfHeader="false" docType="html-5.0" standardController="attendance__c" extensions="attendanceController">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>员工签到</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{!URLFOR ($Resource.SLDS012, ‘assets/styles/salesforce-lightning-design-system-vf.min.css‘)}"/>
<script src="{!URLFOR($Resource.jQuery, ‘jquery1.9.js‘)}" ></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=XyV6s136GhZs2fbl2gCpkKfG&s=1"></script>
<script>
var $ = jQuery.noConflict();
$(function(){
var dname = "{!u.UserRole.DeveloperName}";
if(dname == "KFJSY" || dname == "servicebusiness" || dname == "servicetech"){
$("#send").show();
$("#trip").show();
}else{
$("#send").hide();
$("#trip").show();
}
});
</script>
<style >
body{margin:0; padding:0}
</style>
</head>
<body>
<div class="slds">
<div class="slds-grid">
<div class="slds-col--padded">
<div class="slds-section-title--divider " ><span style="font-size:1.5em; font-weight:bold;">任务签到</span>
<div class="slds-float--right" style="margin-top:-10px">
<button class="slds-button slds-button--brand" onclick="subData1()">保存</button>
</div>
</div>
</div>
</div>
<div class="slds-grid slds-wrap" style="margin-top:10px">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-2">
<div id="msgDiv" class="slds-box slds-theme--error" style="display:none;">
<p id="msg">saf</p>
</div>
<div class="slds-form--stacked" id="trip">
<div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
<div class="slds-form-element">
<label class="slds-form-element__label" for="attend_tripApplication" style="font-size:14px;color:#333333">出差申请:</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
<svg aria-hidden="true" class="slds-input__icon">
<use xlink:href="{!URLFOR ($Resource.SLDS012, ‘assets/icons/utility-sprite/svg/symbols.svg#search‘)}"></use>
</svg>
<input id="attend_tripApplication" value="" class="slds-input" placeholder="请输入出差申请单号或出差地址" type="text" aria-autocomplete="list" role="combobox" aria-expanded="false" aria-activedescendant="" />
</div>
</div>
<div class="slds-lookup__menu" role="listbox" id="results" style="display:none">
<div class="slds-lookup__item">
<button class="slds-button">
<svg aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon--small">
<use xlink:href="{!URLFOR ($Resource.SLDS012, ‘assets/icons/utility-sprite/svg/symbols.svg#search‘)}"></use>
</svg>在出差申请上搜索"<span id="keyword"></span>" </button>
</div>
<ul class="slds-lookup__list" role="presentation" id="ui_results">
</ul>
</div>
</div>
</div>
<div class="slds-form--stacked" id="send" style="margin-top:10px">
<div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
<div class="slds-form-element">
<label class="slds-form-element__label" for="attend_sendwork__c" style="font-size:14px;color:#333333">派工单号:</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
<svg aria-hidden="true" class="slds-input__icon">
<use xlink:href="{!URLFOR ($Resource.SLDS012, ‘assets/icons/utility-sprite/svg/symbols.svg#search‘)}"></use>
</svg>
<input id="attend_sendwork__c" value="" class="slds-input" placeholder="请输入派工单号或标题或客户名称" type="text" aria-autocomplete="list" role="combobox" aria-expanded="false" aria-activedescendant="" />
</div>
</div>
<div class="slds-lookup__menu" role="listbox" id="results2" style="display:none">
<div class="slds-lookup__item">
<button class="slds-button">
<svg aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon--small">
<use xlink:href="{!URLFOR ($Resource.SLDS012, ‘assets/icons/utility-sprite/svg/symbols.svg#search‘)}"></use>
</svg>在派工单上搜索"<span id="keyword2"></span>" </button>
</div>
<ul class="slds-lookup__list" role="presentation" id="ui_results2">
</ul>
</div>
</div>
</div>
<div class="slds-form-element" style="margin-top:10px">
<label class="slds-form-element__label" for="select-01" style="font-size:14px;color:#333333">签到方式:</label>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select id="signMethod" class="slds-select">
<option value=‘‘>无</option>
<option value=‘到达‘>到达</option>
<option value=‘离开‘>离开</option>
</select>
</div>
</div>
</div>
<div class="slds-feed">
<ul class="slds-feed__list">
<li class="slds-feed__item">
<span style="margin-top:10px">员工工号:</span> {!u.Employee_number__c }
</li>
<li class="slds-feed__item">
<span style="margin-top:10px">员工姓名:</span> {!u.Name}
</li>
<li class="slds-feed__item">
<span style="margin-top:10px">签到地址:</span> <span id="address"></span>
</li>
<li class="slds-feed__item">
<span style="margin-top:10px">签到时间:</span> <span id="signTime"></span>
</li>
<li class="slds-feed__item">
<span style="margin-top:10px">经度:</span> <span id="longitudes"></span>
</li>
<li class="slds-feed__item">
<span style="margin-top:10px">纬度:</span> <span id="latitude"></span>
</li>
<li class="slds-feed__item">
<div class="slds-form-element">
<label class="slds-form-element__label" for="textarea-input-01" style="font-size:14px;color:#333333">备注:</label>
<div class="slds-form-element__control">
<textarea id = "memo" class="slds-textarea" placeholder="请输入备注信息"></textarea>
</div>
</div>
</li>
</ul>
</div>
<div class="slds-float--right">
<button class="slds-button slds-button--brand" onclick="subData1()">保存签到信息</button>
</div>
</div>
</div>
</div>
<script>
(function($){
$.isBlank = function(obj){
return(!obj || $.trim(obj) === "");
};
})(jQuery);
var address;
var signTime;
var method;
var longitudes;
var latitude;
$(document).ready(function() {
//加载地址信息
getMap();
$(‘#attend_tripApplication‘).mousedown(function(e){
//$(‘#attend_tripApplication‘).attr("placeholder","");
});
//获取后台数据
$(‘#attend_tripApplication‘).keyup(function(e)
{
$(‘#results‘).css("display","block");
$(‘#attend_tripApplication‘).attr(‘aria-expanded‘,‘true‘);
$(‘#keyword‘).html($(‘#attend_tripApplication‘).val());
if($.isBlank($(‘#attend_tripApplication‘).val())){
$(‘#results‘).css("display","none");
$(‘#ui_results‘).empty();
return;
}
attendanceController.queryCustomObject2($(‘#attend_tripApplication‘).val(),
function(result, event){
if (event.status) {
$(‘#ui_results‘).empty();
populateLookup(result);
} else if (event.type === ‘exception‘) {
$(‘#attend_tripApplication‘) = ‘ERROR: ‘ + event.message;
} else {
$(‘#attend_tripApplication‘) = ‘ERROR: ‘ + event.message;
}
},
{escape: true}
);
});
function populateLookup(result){
if(result){
$( result ).each(function() {
console.log(this.Field2__c );
$(‘#ui_results‘).append(‘<li class="slds-lookup__item">‘ +
‘<a id="‘ + this.Id + ‘" href="javascript:void(0)" role="option">‘ +
‘<svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">‘ +
‘<use xlink:href="{!URLFOR ($Resource.SLDS012, ‘assets/icons/utility-sprite/svg/symbols.svg#user‘)}"></use>‘ +
‘</svg>‘ + this.Name +‘|‘+(this.Field7__c==undefined?‘‘:this.Field7__c) +‘|‘+(this.Field2__c==undefined?‘‘:this.Field2__r.Name)+‘</a>‘ +
‘</li>‘);
});
$(‘#ui_results a‘).click(function(e)
{
$(‘#attend_tripApplication‘).val($(this)[0].innerText);
$(‘#attend_tripApplication‘).attr(‘aria-activedescendant‘,$(this)[0].id);
$(‘#attend_tripApplication‘).attr(‘aria-expanded‘,‘false‘);
$(‘#results‘).css("display","none");
});
}
}
$(‘#attend_sendwork__c‘).mousedown(function(e){
//$(‘#attend_sendwork__c‘).attr("placeholder","");
});
$(‘#attend_sendwork__c‘).keyup(function(e)
{
$(‘#results2‘).css("display","block");
$(‘#attend_sendwork__c‘).attr(‘aria-expanded‘,‘true‘);
$(‘#keyword2‘).text($(‘#attend_sendwork__c‘).val());
if($.isBlank($(‘#attend_sendwork__c‘).val())){
$(‘#results2‘).css("display","none");
$(‘#ui_results2‘).empty();
return;
}
attendanceController.queryCase($(‘#attend_sendwork__c‘).val(),
function(result, event){
if (event.status) {
$(‘#ui_results2‘).empty();
populateLookup2(result);
} else if (event.type === ‘exception‘) {
$(‘#attend_sendwork__c‘) = ‘ERROR: ‘ + event.message;
} else {
$(‘#attend_sendwork__c‘) = ‘ERROR: ‘ + event.message;
}
},
{escape: true}
);
});
function populateLookup2(result){
if(result){
$( result ).each(function() {
console.log(this);
$(‘#ui_results2‘).append(‘<li class="slds-lookup__item">‘ +
‘<a id="‘ + this.Id + ‘" href="javascript:void(0)" role="option">‘ +
‘<svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">‘ +
‘<use xlink:href="{!URLFOR ($Resource.SLDS012, ‘assets/icons/utility-sprite/svg/symbols.svg#user‘)}"></use>‘ +
‘</svg>‘ + this.CaseNumber + ‘|‘+(this.Subject==undefined?‘‘:this.Subject) +‘|‘+(this.Account.Name==undefined?‘‘:this.Account.Name)+‘|‘+(this.Status==undefined?‘‘:this.Status)+‘</a>‘ +
‘</li>‘);
});
$(‘#ui_results2 a‘).click(function(e)
{
$(‘#attend_sendwork__c‘).val($(this)[0].innerText);
$(‘#attend_sendwork__c‘).attr(‘aria-activedescendant‘,$(this)[0].id);
$(‘#attend_sendwork__c‘).attr(‘aria-expanded‘,‘false‘);
$(‘#results2‘).css("display","none");
});
}
}
});
function getMap(){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var currentPoint = new BMap.Point(r.point.lng,r.point.lat);
new BMap.Geocoder().getLocation(currentPoint,function(rs){
address = rs.address;
$("#address ").text(address);
$("#signTime").text(getNowFormatDate());
$("#longitudes").text(r.point.lng);
$("#latitude").text(r.point.lat);
});
}
else {
alert(‘failed‘+this.getStatus());
}
},{enableHighAccuracy: true})
}
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
return currentdate;
}
function subData1(){
$("#msgDiv").hide();
$("#bt").toggleClass("disabled");
var userId = "{!u.Employee_number__c } ";
var name = "{!u.Name}";
var address = $.trim($("#address").text());
var signTime = $.trim($("#signTime").text());
var longitudes = $.trim($("#longitudes").text());
var latitude = $.trim($("#latitude").text());
var signType = null;
var type = "任务签到";
var signMethod = $("#signMethod").val();
var memo = $("#memo").val();
var sendWork = $(‘#attend_sendwork__c‘).attr(‘aria-activedescendant‘)==undefined?‘‘:$(‘#attend_sendwork__c‘).attr(‘aria-activedescendant‘);
var tripApplication= $(‘#attend_tripApplication‘).attr(‘aria-activedescendant‘)==undefined?‘‘:$(‘#attend_tripApplication‘).attr(‘aria-activedescendant‘);
var dname = "{!u.UserRole.DeveloperName}";
if(dname == "KFJSY" || dname == "servicebusiness" || dname == "servicetech"){
if($.isBlank(sendWork) && $.isBlank(tripApplication)){
$("#msg").text(‘派工单或出差申请单不能为空!‘);
$("#msgDiv").show();
$("#bt").toggleClass("disabled");
return false;
}
}else{
if($.isBlank(tripApplication)){
$("#msg").text(‘出差申请单不能为空!‘);
$("#msgDiv").show();
$("#bt").toggleClass("disabled");
return false;
}
}
if($.isBlank(signMethod)||signMethod==‘无‘){
$("#msg").text(‘请选择签到方式!‘);
$("#msgDiv").show();
$("#bt").toggleClass("disabled");
return false;
}
if($.isBlank(address)){
$("#msg").text("正在定位....，请等当前位置的信息显示后再点击‘保存任务签到信息’!");
$("#msgDiv").show();
$("#bt").toggleClass("disabled");
return false;
}
attendanceController.saveTask(userId, name, address, signTime, longitudes, latitude, type, signMethod ,memo , sendWork , tripApplication, function(result, event){
$("#bt").toggleClass("disabled");
if(result != null){
$("#dataform").hide();
$("#success").show();
// 移动端跳转
if( (typeof sforce != ‘undefined‘) && sforce && (!!sforce.one) ) {
setTimeout(sforce.one.navigateToSObject(result),2000);
}
//PC端跳转
else {
setTimeout(parent.parent.location.href=‘/‘+result,2000);
}
}
})
} </script>
</body>
</html>
</apex:page>控制器代码
global class attendanceController {
public String userId{set;get;}
public String userName{set;get;}
public User u {set;get;}
public attendance__c attend {set;get;}
public static String fId{set;get;}
public List<String> signTypes{set;get;}
public attendanceController (ApexPages.StandardController controller){
u = [select id,Name,Employee_number__c,UserRole.DeveloperName from User where id=:UserInfo.getUserId()];
signTypes = new List<String>();
Schema.DescribeFieldResult fieldResult = attendance__c.attend_type__c.getDescribe();
List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
for( Schema.PicklistEntry f : ple){
signTypes.add(f.getValue());
//System.debug(f.getLabel()+‘==‘+ f.getValue());
}
}
@RemoteAction
global static String saveData(String userId, String name, String address, String signType, String signTime, double longitudes, double latitude, String type){
Datetime dt = System.now();
attendance__c order = new attendance__c();
order.attend_name__c = name;
order.attend_userid__c = userId;
order.attend_address__c = address;
order.attend_longitudes__c = longitudes;
order.attend_latitude__c = latitude;
order.attend_type__c = signType;
order.attend_time__c = signTime;
order.attend_category__c = type;
order.RecordTypeId = [select id,Name from RecordType where Name=‘考勤管理‘].id;
insert order;
return order.id;
}
@RemoteAction
global static String saveTask(String userId, String name, String address, String signTime, double longitudes, double latitude, String type, String signMethod, String memo,String sendWork , String tripApplication){
//userId, name, address, signType, signTime, longitudes, latitude, type, signMethod ,memo , sendWork , tripApplication
System.debug(tripApplication);
Datetime dt = System.now();
attendance__c order = new attendance__c();
order.attend_name__c = name;
order.attend_userid__c = userId;
order.attend_address__c = address;
order.attend_longitudes__c = longitudes;
order.attend_latitude__c = latitude;
order.attend_time__c = signTime;
order.attend_category__c = type;
order.attend_signMethod__c = signMethod;
order.attend_memo__c = memo;
if(String.isNotBlank(tripApplication)){
order.attend_tripApplication__c = tripApplication;
}
if(String.isNotBlank(sendWork)){
order.attend_sendwork__c = sendWork;
}
order.RecordTypeId = [select id,Name from RecordType where Name=‘任务签到‘].id;
insert order;
return order.id;
}
public PageReference acc(){
System.debug(fId);
return new PageReference(‘/‘+fId);
}
@RemoteAction
global static List<CustomObject2__c> queryCustomObject2(String keyword) {
List<CustomObject2__c> CustomObject2List = new List<CustomObject2__c>();
if (keyword != null && keyword.trim() != ‘‘) {
keyword = ‘%‘ + keyword + ‘%‘;
CustomObject2List = [select id, Name ,Field2__c ,Field2__r.Name,Field8__c, Field7__c, Field4__c from CustomObject2__c where (Name like :keyword or Field7__c like :keyword or Field2__r.Name like :keyword) and CreatedById=:UserInfo.getUserId() order by createdDate desc limit 20 ];
}
return CustomObject2List;
}
@RemoteAction
global static List<Case> queryCase(String keyword){
System.debug(keyword);
List<Case> caseList = new List<Case>();
if (keyword != null && keyword.trim() != ‘‘) {
keyword = ‘%‘+keyword +‘%‘;
caseList = [select id, CaseNumber, Subject, Contact.Name, Account.Name, Status from Case where (CaseNumber like :keyword or Subject like :keyword or Account.Name like :keyword) and id in (select CaseId from CaseShare where UserOrGroupId =:UserInfo.getUserId()) order by createdDate desc limit 20 ];
}
return caseList;
}
}时间： 2024-08-29 12:12:22