为Dynamics 365添加系统更新日志页面(自定义)

本文介绍在通过自定义开发为 Dynamics 365 添加系统更新日志画面，通过新建“系统更新日志”与“日志明细”实体，并结合 HTML、Vue3、Element Plus，实现按日期汇总并可视化展示系统更新内容

Table of contents

前言

最近在实施一个项目，经常有用户问这次发版更新了什么内容，系统有没有画面能看到等待，基于这个背景，我在 Dynamics 365 加了个自定义的系统更新日志页面，用于集中展示系统的更新记录

效果展示

实现思路

整体设计思路比较简单，以日期作为更新日志的一级维度进行汇总，在每个日期下，再细分具体的更新内容。因此，我们只需要在系统新建2个实体：

1. 系统更新日志：用于记录更新日期等汇总信息
2. 系统更新日志明细：用于记录具体的更新内容

在此基础上，通过一个自定义的 HTML Web 资源，使用 FetchXML 获取数据并进行前端展示

实现步骤

1. 新建 “系统更新日志” 实体
2. 新建 “系统更新日志明细” 实体
3. 新建并配置自定义 HTML Web 资源

使用说明

1. 创建 “系统更新日志” 实体
2. 创建 “系统更新日志明细” 实体
3. 新建 SystemUpdateLog_v1.html Web 资源，该资源我上传在Github仓库：Github-SystemUpdateLog_v1.html

根据自己的实际情况，替换代码中实体的逻辑名称和字段的逻辑名称

// 根据自己的实际情况，替换代码中实体的逻辑名称和字段的逻辑名称
const App = {
            data() {
                return {
                    Constants: {
                        Entities: {
                            log: "gdh_system_update_log",
                            logCollection: "gdh_system_update_logs",
                            logDetail: "gdh_system_update_log_detail",
                            logDetailCollection: "gdh_system_update_log_details",
                        },
                        Fields: {
                            // log entitie field
                            log_UpdateDate: "gdh_date",
                            log_Remark: "gdh_remark",
                            log_id: "gdh_system_update_logid",

                            // log detail entitie field
                            logDetail_SystemModel: "gdh_systemtype",
                            logDetail_UpdateType: "gdh_updatetype",
                            logDetail_Content: "gdh_content",
                            logDetail_RefLog: "gdh_system_update_log",

                            // common statecode
                            state: "statecode",
                        }
                    },
                    fLogData: [],
                };
            }SystemUpdateLog_v1.html

前端依赖资源

页面依赖以下 3 个前端资源，需要提前上传为 Web 资源（可在我的 GitHub 仓库中获取）：

Github仓库

1. vue3.js
2. element-plus.js
3. element-plus.css