SPO条件格式-颜色列视图 [英] SPO Conditional Formatting - Color Column views

问题描述

I have 2 columns namely:

• "Status", Choice column with Red,Yellow,Green as values 
• "Comment", Multiple Lines of text column

现在，我想设置评论"的背景.列使用在状态"中选择的颜色.例如:如果选择红色"，则评论"被选择.列应具有红色背景.

Now, I want to set the background of "Comment" column using the color selected in "Status". For eg: If "Red"is selected, "Comment" column should have red background.

我希望将此功能应用于列表中的所有视图，并且重要的是将状态"应用于列表中的所有视图.列在视图中不可用.

I want to have this functionality applied to all the views in the list and importantly "Status" column should not be available in the view.

我认为可以使用JS Link功能来实现，但是我对脚本编写不太满意.

I think this could be achieved using JS Link functionalities,but I'm not good with scripting. Any help will be highly appreciated.

推荐答案

以下步骤供您参考:

1.将以下代码另存为js文件(ColorField.js)并将其上传到 网站资产文档库.

1.Save the following code as a js file(ColorField.js) and upload it into the Site Assets Document Library.

(function () {
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        "Comment": { "View": ColorField }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function ColorField(ctx) {
    var listTitle = ctx.ListTitle;
    var itemId = ctx.CurrentItem.ID;
    var comment = ctx.CurrentItem.Comment;
    var status = GetStatusValue(listTitle,itemId);
    return "<div style='background-color:" + status + "'>" + comment + "</div>";
}
function GetStatusValue(listTitle,itemId) {
    var status;
    var url = _spPageContextInfo.webAbsoluteUrl;   
    var requestUri = url + "/_api/web/lists/getbytitle('" + listTitle + "')/items(" + itemId + ")?

选择= Status;

select=Status";

.ajax({ 网址:requestUri， 类型:"GET"， 标头:{"ACCEPT":"application/json; odata = verbose"； }， 异步:错误， 成功:功能(数据){ 状态＝ data.d [状态"]； }， 错误:函数(err){ //alert(err); } }); 返回状态； }

.ajax({ url: requestUri, type: "GET", headers: { "ACCEPT": "application/json;odata=verbose" }, async: false, success: function (data) { status = data.d["Status"]; }, error: function (err) { //alert(err); } }); return status; }

2.编辑列表视图页面并编辑列表Web部件.转到其他-> JS链接.

2.Edit the list view page and edit the list web part. Go to Miscellaneous -> JS Link.

3.在JS Link文本框中添加以下URL.

3.Add the following URL into the JS Link textbox.

~site/SiteAssets/ColorField.js

最好的问候，

丹尼斯

这篇关于SPO条件格式-颜色列视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！