注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

微软MVP罗勇的博客

微软MVP罗勇,www.luoyong.me

 
 
 

日志

 
 

在Dynamics CRM中使用AngularJS之二  

2016-04-17 21:34:14|  分类: CRM探索 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复220或者20160417可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me 
上一篇文章 在Dynamics CRM中使用AngularJS之一 是AngularJS的基本演示,但是要在Dynamics CRM中能够使用还需要做点工作,首要做的是要添加 AngularJS 的生产版本(angular.min.js)到CRM中,作为 脚本(JScript) 类型的Web资源上传到CRM中,当然还有Bootstrap相关的东西,具体怎么做,可以参考我前面的博文: 在Dynamics CRM中使用Bootstrap ,我这篇文章不详细说明了。
我这篇博客做出的效果和以前的博文 在Dynamics CRM中自定义一个通用的查看编辑注释页面 差不多,但是我这里使用的是 AngularJS,使用的代码如下:

<!DOCTYPE html>
<html lang="zh-cmn-Hans" ng-app="crmApp">
<head>
    <title>注释</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid" ng-controller="AnnotationController">
        <blockquote>这是微软MVP罗勇使用AngularJS和Bootstrap做出的效果!<small>Powered by AngularJS & Bootstrap</small></blockquote>
        <table id="notestable" class="table table-striped table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>注释标题</th>
                    <th>注释内容</th>
                    <th>创建人</th>
                    <th>创建时间</th>
                    <th>修改人</th>
                    <th>修改时间</th>
                    <th>是否包含附件</th>
                    <th>附件名称</th>
                    <th>附件大小(KB)</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="note in notes">
                    <td class="text-center">{{$index + 1}}</td>
                    <td>{{note.subject}}<span class='glyphicon glyphicon-paperclip' ng-show="note.isdocument"></span></td>
                    <td>{{note.notetext | limitTo:21}}</td>
                    <td>{{note["_createdby_value@OData.Community.Display.V1.FormattedValue"]}}</td>
                    <td>{{note.createdon | date:'yyyy-MM-dd'}}</td>
                    <td>{{note["_modifiedby_value@OData.Community.Display.V1.FormattedValue"]}}</td>
                    <td>{{note.modifiedon | date:'yyyy-MM-dd'}}</td>
                    <td>{{note.isdocument?'是':'否'}}</td>
                    <td>{{note.filename}}</td>
                    <td>{{note.filesize / 1024 | number:2}}</td>
                    <td><input type="button" value="删除" ng-click="buttonClick($index)" class="btn btn-danger" /></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="../../../ClientGlobalContext.js.aspx" type="text/javascript"></script>
    <script type="text/javascript" src="../js/angular.min.js"></script>
    <script type="text/javascript">
        (function () {
            var app = angular.module('crmApp', []);
            app.controller('AnnotationController', function ($scope, $http) {
                $scope.notes = [];
                var match = RegExp('[?&]id=([^&]*)').exec(window.location.search);//这里是外接通过url传递id的值过来
                var id = match && decodeURIComponent(match[1].replace(/\+/g, ' '));
                id = id.replace('{', '').replace('}', '');
                match = RegExp('[?&]typename=([^&]*)').exec(window.location.search);
                var typename = match && decodeURIComponent(match[1].replace(/\+/g, ' '));
                var req = {
                    method: 'GET',
                    url: GetGlobalContext().getClientUrl() + "/api/data/v8.0/annotations?$select=_createdby_value,createdon,modifiedon,filesize,filename,isdocument,_modifiedby_value,notetext,subject&$filter=objecttypecode eq '" + typename + "' and  _objectid_value eq " + id + "&$orderby=createdon asc",
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json; charset=utf-8',
                        'OData-MaxVersion': '4.0',
                        'OData-Version': '4.0',
                        'Prefer': 'odata.include-annotations=\"OData.Community.Display.V1.FormattedValue\"'
                    }
                };
                $http(req).then(function (resp) {
                    $scope.notes = resp.data.value;
                },
                function (errResp) {
                    alert('查询annotations实体出错.statusText=' + errResp.statusText + ',status=' + errResp.status);
                });
                $scope.buttonClick = function (index) {
                    $scope.notes.splice(index, 1);
                };
            });
        })();
    </script>
</body>
</html>


这里先看效果,如下:红色的删除按钮是可以点击的,点击后页面会变化,将记录移除(我这里没有实际删除注释,当然写点代码是可以得),页面自动刷新了,酷。
在Dynamics CRM中使用AngularJS之二 - 罗勇 - 微软MVP罗勇的博客

简单说明下:
1. 引入了AngularJS 内置的服务$http,这种服务以美元符号($)开头,当然自己也可以写服务(service),服务是放置公用代码的地方。 这个 $http 服务用来发起http请求,AngularJS对它进行了一些封装,这样异步调用(使用Promise)后获取到数据就不需要使用 $scope.$apply(); 来刷新模型反应到视图上。
2. 按钮的 ng-click 来指定点击时候执行的函数,当然这个函数是要定义在 Controller中。
3. http请求添加 'Prefer': 'odata.include-annotations=\"OData.Community.Display.V1.FormattedValue\"' 来使返回的数据更多,有点儿像以前的OData版本数据,如果不加这个的话,对于查找字段只会返回记录主键,选项集记录只会显示选项的值,加了以后查找字段会返回更多信息,比如查找记录的主字段的值,选项集记录也会返回选项的显示值,以前有同行问起这个问题,我在这里就顺便回答下。

素格格新疆特产店--做新疆特产的搬运工。
本店由博主的新疆老婆开设,搬运各种上等的新疆特产,是自用,送礼,年货,孝敬长辈特别是(岳)父母的首选!
Dynamics CRM 2015/2016新特性之十五:CRM On<wbr>line升级和产品计价更多选择 - 罗勇 - 微软MVP罗勇的博客
  评论这张
 
阅读(304)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017