Salesforce + AngularJS + Bootstrap

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Salesforce + AngularJS + Bootstrap相关的知识,希望对你有一定的参考价值。

也可以分成三步:

1. 添加css和js引用:

    <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></apex:stylesheet>
    <script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
    <script src="{!$Resource.forcetk4ng}"></script>   

2. 添加html代码:

        <div ng-app="ngapp">
            <div ng-controller="positionCtl">
                <button ng-click="getPositions()" class=‘btn btn-primary‘>Retrieve Data</button>
                <table class=‘table table-bordered table-hover  table-striped ‘>
                    <thead>
                        <tr>
                            <td>Id</td>
                            <td>Name</td>
                            <td>IsAllow</td>                            
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="record in position.records">
                            <td>{{record.Id}}</td>
                            <td>{{record.Name}}</td>
                            <td>{{record.IsAllow__c}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

3. 添加js代码,使用forcetk4ng获取数据:

        angular.module(‘ngapp‘, [‘forcetk4ng‘])
            .controller(‘positionCtl‘, function($scope, force){
                force.setAccessToken(‘{!$Api.Session_ID}‘);
                $scope.position = {};    
                $scope.getPositions = function(){
                    var soql = "select Id, Name, IsAllow__c from PositionTest__c";
                    force.query(soql)
                    .then(
                        function(records){
                            $scope.position.records = records;
                        },
                        function(event){
                            console.log(event);
                        }
                    );
                };        
                $scope.getPositions();
            });

 

示例: https://c.ap1.visual.force.com/apex/TestApexPage (此地址为个人测试地址)

 

注:可以给apex:page添加一些属性,去掉Salesforce样式和菜单,就和普通html页面一样了。

<apex:page standardStylesheets="false" showHeader="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

 

以上是关于Salesforce + AngularJS + Bootstrap的主要内容,如果未能解决你的问题,请参考以下文章

在不使用SalesForce Webview的情况下登录iOS的SalesForce?

salesforce啥意思

Salesforce:任何可用于访问 Salesforce 日历的 Rest API?

salesforce考试多少分过

如何在salesforce中设计dashboard

salesforce 怎样导出上传的文件