zoukankan      html  css  js  c++  java
  • 向视图列添加自定义图标和提示信息 -- PowerApps / Dynamics365

    向视图列添加自定义图标和提示信息


        本篇介绍如何向视图中的某列添加自定义图标和提示信息,先来看下最终的效果,联系人的性别系列显示了(这里男女性别图标反了,就懒得重新截图了),鼠标放到图标会有提示信息(这里图截不出来)。

      那要怎么实现上述功能呢,进实体视图编辑,选中对应的列选择编辑属性

        填上对应的js文件和方法,截图中的js中就带红框中的方法

     

       再赋上这个js方法的代码

    function showIconTooltip(rowData, userlcid) {
    var imageName;
    var tooltipValue;
    var resultarray;
    var row = JSON.parse(rowData);
    if (row.gendercode_Value==1) {
    imageName = "new_male.png";
    tooltipValue = "this is a male";
    }
    else {
    imageName = "new_female.png";
    tooltipValue = "this is a female";
    }
    resultarray = [imageName, tooltipValue];
    return resultarray;
    }
       参数是行数据及用户语言,我这里就没判断语言直接用的英文,如果不知道rowdata取出来是什么样的,可以断点跟踪看下。代码中的new_male.png和new_female.png是图标的名称,这个需要你自己挑选好图标作为web资源建好。

       最后有两点需要注意下,第一这个图标只在标准视图列显示,可编辑状态下的视图列是不显示的,第二该功能只在web端显示,在outlook和移动端是不显示的。

    在Dynamics 365的列表视图中显示自定义图标

    场景
    上传图标资源
    上传js资源
    修改视图字段
    效果呈现
    注意点
    场景

    一般的视图列表的数据,我们看着很头疼,如果对1,2个字段进行特别标注,那么数据阅读的时候会立刻精神起来,比如在一长段的检测数据中,有个设备发生了异常,那么使用醒目的红色图标来加入识别。接下来的示例,我将继续使用事先做好的视图,对列表中的性别字段进行添加自定义图标,男性和女性图标来区分。

    上传图标资源

    首先上传事先做好的男性和女性图标,上传本地文件是带png后缀的,上传之后,js里使用的图片资源的名字是根据自己定义的名称来,这里特别需要注意一下。

     


    上传js资源

    创建一个js资源,js代码里需要指定图标文件需要注意一下,不带.png后缀。这完全取决于上一步的名称的定义。

    function showIconTooltip(rowData, userlcid) {
    var imageName;
    var tooltipValue;
    var resultarray;
    var row = JSON.parse(rowData);
    if (row.ss_xinbie_Value==0) {
    imageName = "ss_male";
    tooltipValue = "男性";
    }
    else {
    imageName = "ss_female";
    tooltipValue = "女性";
    }
    resultarray = [imageName, tooltipValue];
    return resultarray;
    }

    修改视图字段

    找到需要修改的实体视图

    更改性别属性

    选择js文件和js方法名

    效果呈现

    注意点

    js中使用到的图标文件名需要跟图标资源的名称保持一致,否则找不到资源。如果是通过VS插件等上传图标资源可能会自动带有.png后缀名,这点需要注意。
    自定义图标只对视图有效果,对单记录绑定的子网格没有效果。

  • 相关阅读:
    安装IDEA
    缓存工具CacheUtil
    使用Eclipse上传/下载Git项目
    Sublime文本排序&查找重复行&删除重复行
    Sublime Text 3 配置Java开发
    安装XMind
    安装Maven
    安装MySQL
    安装Eclipse及相关Plugin
    Android Xposed框架中创建模块的指导手册
  • 原文地址:https://www.cnblogs.com/lingdanglfw/p/14539321.html
Copyright © 2011-2022 走看看