基于到期日的状态指示器

Question

我的 SharePoint 页面中有一个“优先级指示器”列，其中显示了绿色、黄色或红色的项目符号点。我似乎在任何地方都找不到任何关于如何将其编码为与“截止日期”列链接的帮助。

目前，我的状态指示器仅显示“优先级”选择了高、正常或低。

对于“优先指标”，我的代码是；

Priority Indicator

我的 JavaScript 代码见下文；

JavaScript Code

我希望显示优先级指标； 红色指示器显示到期日是否在一周内 黄色指示器显示到期日是否在 2 周内 如果到期日在 3 周内，绿色指示器会显示。

Answer 1

查找列不会自动刷新，因此我建议您使用 CSR 来满足此要求。

将脚本编辑器 webpart 插入您的列表视图 webpart 页面，并将下面的脚本插入脚本编辑器 webpart。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        (function () {

            // Create object that have the context information about the field that we want to change it's output render
            var priorityFiledContext = {};
            priorityFiledContext.Templates = {};
            priorityFiledContext.Templates.Fields = {
                // Apply the new rendering for Priority field on List View
                "Priority_x0020_Indicators": { "View": priorityFiledTemplate }
            };

            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);

        })();

        // This function provides the rendering logic for list view
        function priorityFiledTemplate(ctx) {

            // get today's date
            var today = new Date();
            // zero out the time portion so we will only compare days
            today.setHours(0, 0, 0, 0);

            // get the date set in your date YourDateField
            var itemDate = new Date(ctx.CurrentItem["Due_x0020_Date"]);
            // zero out the time portion so we only compare days
            itemDate.setHours(0, 0, 0, 0);
            // Return html element with appropriate color based on priority value

            var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds

            var diffDays = Math.round(Math.abs((itemDate.getTime() - today.getTime()) / (oneDay)));
            if (diffDays < 7) {
                return "<span style='color:red'>&bull;</span>";
            } else if (diffDays < 14) {
                return "<span style='color:yellow'>&bull;</span>";
            } else {
                return "<span style='color:green'>&bull;</span>";
            }
        }
    </script>

通过开发工具检查字段静态名称（在列表新建/编辑表单中）。