Created
February 23, 2014 08:01
-
-
Save tyoshikawa1106/9168496 to your computer and use it in GitHub Desktop.
JSforceをつかったVisualforceページの検索画面
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<apex:page showHeader="true" 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}" /> | |
<style type="text/css"> | |
#vf-page .webparkList input { | |
background-color: transparent; | |
border-style: none; | |
} | |
#vf-page table.webparkList { | |
border-spacing: 0; | |
font-size:12px; | |
} | |
#vf-page table.webparkList th { | |
color: #fff; | |
padding: 8px 15px; | |
background: #258; | |
background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%); | |
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9))); | |
font-weight: bold; | |
border-left:1px solid #258; | |
border-top:1px solid #258; | |
border-bottom:1px solid #258; | |
line-height: 120%; | |
text-align: center; | |
} | |
#vf-page table.webparkList tr td { | |
padding: 8px 15px; | |
border-bottom: 1px solid #84b2e0; | |
border-left: 1px solid #84b2e0; | |
} | |
#vf-page table.webparkList tr { | |
background: #fff; | |
} | |
#vf-page table.webparkList tr:nth-child(2n+1) { | |
background: #f1f6fc; | |
} | |
#vf-page table.webparkList tr:last-child td { | |
box-shadow: 2px 2px 1px rgba(0,0,0,0.1); | |
} | |
#vf-page table.webparkList tr:hover { | |
background: #bbd4ee; | |
} | |
</style> | |
<div id="vf-page" class="ng-app"> | |
<div ng-controller="mainCtrl"> | |
<apex:pageBlock title="{!$ObjectType.ApexPage.Label}"> | |
<input class="form-control" type="text" placeholder="Search" ng-model="query" style="width:300px;padding:5px;" /> | |
<table class="webparkList" style="width:100%;"> | |
<thead> | |
<tr> | |
<th style="width:300px;"> | |
<apex:outputText value="{!$ObjectType.ApexPage.Fields.Name.Label}" /> | |
</th> | |
<th> | |
<apex:outputText value="{!$ObjectType.ApexPage.Fields.Description.Label}" /> | |
</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr ng-repeat="item in lists|filter:query"> | |
<td> | |
<apex:outputLink value="/{{item.Id}}"> | |
<apex:outputText value="{{item.Name}}" /> | |
</apex:outputLink> | |
</td> | |
<td> | |
<apex:outputText value="{{item.Description}}" /> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</apex:pageBlock> | |
</div> | |
</div> | |
<script> | |
function mainCtrl($scope){ | |
var conn = new jsforce.Connection({ accessToken: '{!$Api.Session_Id}' }); | |
var soql = "SELECT Id, Name, MasterLabel,Description FROM ApexPage ORDER BY Name ASC LIMIT 1000"; | |
conn.query(soql , function(err, res) { | |
if (err) { | |
alert('NG : ' + err); | |
} else { | |
$scope.lists = res.records; | |
$scope.$apply(); | |
} | |
}); | |
} | |
</script> | |
</apex:page> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment