-
Notifications
You must be signed in to change notification settings - Fork 41
/
JSForce with Angular.Page.html
75 lines (73 loc) · 3.64 KB
/
JSForce with Angular.Page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<apex:page showHeader="false" sidebar="false">
<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" />
<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"/>
<apex:includeScript value="{!$Resource.jsForce}" />
<html xmlns:ng="http://angularjs.org" ng-app="hello" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
<style>
.input-mysize { width: 900px }
.search-query {
padding-left: 469px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ5JREFUeNpi+P//PwMQMANxERCfAeI/UBrEZwbJQ9WAFR0A4u1AbAnEbFB6O1ScGaawGoi3wHQiYyBYDZKHKbwHxLo4FOqC5GEKf4Ksw6EQ5IyfIDYTkPEUiNUZsAOQ+F9GRkYJEKcFiDficSOIcRjE4QTiY0C8DuRbqAJLKP8/FP9kQArHUiA+jySJjA8w4LAS5KZd0MAHhaccQIABALsMiBZy4YLtAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: 562px 8px;
}
</style>
</head>
<div class="ng-app">
<div class="navbar">
<div class="navbar-inner">
<apex:image url="{!$Resource.jsforcelogo}" width="50" height="50"/>
<a class="brand" href="">JSforce with Angularjs on Force.com - By OyeCode (Harshit) </a>
</div>
</div>
<div ng-controller="ctrlRead">
<div class="input-append">
<input type="text" ng-model="query" class="input-mysize search-query" placeholder="Search"/>
</div>
<table class="table table-hover success">
<thead>
<tr>
<th class="id">Id <a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
<th class="name">Name <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
<th class="Phone">Phone <a ng-click="sort_by('Phone')"><i class="icon-sort"></i></a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in pagedItems|filter:query" class="success">
<td class="info">
<apex:outputLink value="/{{item.Id}}">
<apex:outputText value="{{item.Name}}" />
</apex:outputLink>
</td>
<td>
<apex:outputText value="{{item.Phone}}" />
</td>
<td>
<apex:outputText value="{{item.Title}}" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--- Javascript -->
<script type="text/javascript">
function ctrlRead($scope){
var conn = new jsforce.Connection({ accessToken: '{!$Api.Session_Id}' });
var query = "SELECT Id, Name, Phone, Title from Contact ORDER BY Name ASC LIMIT 1000";
conn.query(query , function(error, res) {
if (error) {
console.log("error");
} else {
$scope.pagedItems = res.records;
$scope.$apply();
}
});
}
</script>
</html>
</apex:page>