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屋!