更改配置文件页面中字段的颜色

开发者框架允许交互管理员通过在页面中嵌入自定义javascript来扩展和定制交互的一些功能

最近在Community门户网站上的一个请求询问了这样一个问题:是否可以根据一个额外的字段在个人资料页面上显示彩色圆点。

我建议使用开发者框架在个人资料页面上设置“药丸”的背景色以匹配文本。下面的脚本正是这样做的…

$(document).ready(function(){if($("#body_rptAdditionalFields_addFieldItem_0 span")){var color = $("#body_rptAdditionalFields_addFieldItem_0 span").html();$("#body_rptAdditionalFields_addFieldItem_0").css({"background-color":color， "color":"white"});$("#body_rptAdditionalFields_addFieldItem_0 span").html("员工评级");$ (" # body_rptAdditionalFields_addFieldItem_0 img ") hide ();}});

把它分解

让我们来看看每个部分，看看它们是如何组合在一起的

这假设附加字段的ID为0，您需要首先通过导航到页面并使用浏览器开发工具检查元素来检查这一点

$(document).ready(function(){if($("#body_rptAdditionalFields_addFieldItem_0 span")){

这将函数附加到文档就绪事件，以便仅在页面加载时执行代码，然后检查附加字段是否在页面上。

这一点很重要，因为在开发者框架中，javascript包含在每个页面上，但并不是每个页面上都有额外的字段，所以在这些页面上运行其余的代码是没有意义的

var color = $("#body_rptAdditionalFields_addFieldItem_0 span").html();$("#body_rptAdditionalFields_addFieldItem_0").css({"background-color":color， "color":"white"});$("#body_rptAdditionalFields_addFieldItem_0 span").html("员工评级");$ (" # body_rptAdditionalFields_addFieldItem_0 img ") hide ();}});

该部分然后从文档中获取附加字段的内容，并将背景颜色的值设置为该值，同时将前景色设置为白色。

$("#body_rptAdditionalFields_addFieldItem_0 span").html("员工评级");$ (" # body_rptAdditionalFields_addFieldItem_0 img ") hide ();}});

最后，脚本将一些文本添加到药丸中，以便用户知道他们正在查看的内容，并隐藏附加字段的图标。

这是它在页面上的样子