在Oracle APEX Interactive Report中的列中显示带有数据的图标(图标视图) [英] Displaying icons with data in a column in Oracle APEX Interactive Report (Icon View)

问题描述

我正在尝试在Oracle APEX应用程序中创建交互式报告。我要在报表列中随数据一起显示图标。

我成功地显示了这些图标，但是我希望根据单词的不同以不同的颜色显示这些图标。

我在Oracle APEX附带的"通用主题示例应用程序"应用程序中找到了一个这样的示例，我在自己的应用程序中应用了相同的方法。

但在我的应用程序中，所有图标都是黑色的，尽管在示例应用程序中，每个数据都用不同的颜色图标显示。

有人能帮我吗？

这是示例应用程序： Sample Application Screenshot

这是我的应用程序： My Application Screenshot

非常感谢。

css

您可以通过在跨度的样式属性中添加color推荐答案来为图标添加颜色，如下所示：

<span class="fa #STATUS_ICON#" style="color: green;"></span> #STATUS#

对于链接：

<div class="dm-IRR-icon"> <span class="fa #STATUS_ICON#" style="color: red;"></span> <span class="dm-IRR-iconLabel">#TASK_NAME#</span> </div>

您还可以通过在样式中添加font-size属性使图标变大或变小，如下所示：style="color: green; font-size: 15px;"

Edit1：要使用不同的颜色，您有两个选项：

I.在SQL查询中添加新列(在我的示例中命名为icon_color)以带来颜色并在HTML表达式中使用它。

SELECT task_name,
  start_date,
  status,
  CASE status
    WHEN 'Open' THEN 'fa-clock-o is-open'
    WHEN 'Closed' THEN 'fa-check-circle is-closed'
    WHEN 'On-Hold' THEN 'fa-exclamation-circle is-holding'
    WHEN 'Pending' THEN 'fa-exclamation-triangle is-pending'
  END status_icon,
  CASE status
    WHEN 'Open' THEN 'red'
    WHEN 'Closed' THEN 'green'
    WHEN 'On-Hold' THEN 'pink'
    WHEN 'Pending' THEN 'orange'
  END icon_color,
  assigned_to
FROM eba_ut_chart_tasks
ORDER BY 2

HTML表达式：<span class="fa #STATUS_ICON#" style="color: #ICON_COLOR#"></span> #STATUS#

ii.在您的查询中添加1个case内的所有逻辑，如下所示：

SELECT task_name,
  start_date,
  '<span class="fa '||
  CASE status
    WHEN 'Open' THEN 'fa-clock-o is-open" style="color:red'
    WHEN 'Closed' THEN 'fa-check-circle is-closed" style="color:green'
    WHEN 'On-Hold' THEN 'fa-exclamation-circle is-holding" style="color:blue'
    WHEN 'Pending' THEN 'fa-exclamation-triangle is-pending" style="color:pink'
  END ||' "></span>'||status as status,
  assigned_to
FROM eba_ut_chart_tasks
ORDER BY 2;

对于此选项，不要忘记转到您的列(本例中为Status)，并将转义特殊字符属性设置为no。

这篇关于在Oracle APEX Interactive Report中的列中显示带有数据的图标(图标视图)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！