在 apex oracle 应用程序上格式化卡片内的信息

Question

我是使用 apex oracle/sql/html 等的初学者。我正在通过 apex 创建一个应用程序，其中一个页面是一个具有卡片区域的模式对话框报告。我安排了数据组来填充标题、副标题、正文和辅助正文（空格符），并且工作正常。问题在于布局。由于它是一组信息，我想将它们堆叠/显示在不同的行中，类似于上下文信息模板。例如，在副标题中，我有“烹饪时间：xx”和“部分系数：xx”的数据。现在它们是内联的，我希望它堆叠起来。它可以为每个空格符提供高级 html 格式设置的选项，但不知道如何做到这一点。有人可以帮忙吗？多谢！安娜

我尝试在源区域的 sql 查询中添加此配置，但如果我用来创建新行，它就会磨损。然后我尝试在那里添加 char(10) 但也不起作用（没有任何变化）。我尝试更改模板，但对我来说有点复杂并且不起作用。我认为解决方案是在空格符上使用这种高级格式来定义它的布局，但我被困住了。

在此输入图片描述

Answer 1

这里是 emp/dept 示例数据集的示例（通过 SQL Workshop > 实用程序 > 示例数据集 > EMP / DEPT 安装它）。在一张卡片上，部门显示以下信息：

• 副标题包含部门位置（“位置”一词以粗体显示），并在新行中显示该部门的总工资。
• 卡体有员工个人名单及其工资

这与你的“菜谱”概念非常接近。

卡区SQL查询

SELECT d.dname
      ,d.loc
      ,SUM(e.sal) as total_sal
      ,LISTAGG(e.ename ||': '|| e.sal,';') WITHIN GROUP (ORDER BY 1) as employees_w_sal
  FROM dept d
  JOIN emp e ON e.deptno = d.deptno
 GROUP BY d.dname
         ,d.loc

卡片区域属性配置

字幕 HTML 表达式

<ul style="list-style-type: none;" >
<li><div><span class="u-bold">Location:</span> &LOC.</div></li>
<li><div>Total Salary: &TOTAL_SAL.</div></li>
</ul>

• 注意 css 指令“list-style-type: none;”这会删除列表中的项目符号。
• 注意“u-bold”类。这是一个 APEX 本机内容修饰符类（使用 APEX 本机类优于自定义 CSS）

正文 HTML 表达式

Employees and their salary:<br>
<ul>
    {loop ";" EMPLOYEES_W_SAL/}
        <li>&APEX$ITEM.</li>
    {endloop/}
</ul>

• 注意“loop”指令的用法。源 SQL LISTAGG 函数使用“;”作为分隔符 - 这也在这里被引用。

结果

实施细节

• 在支持 HTML 表达式的区域中格式化列数据的方法是使用“模板指令”(docs)。这允许非常灵活的自定义格式。
• 如果可能，请使用 APEX 提供的类。它们记录在“通用主题”文档页面上。您也可以编写自定义 css，这可以工作，但可能不太适合升级。

温馨提示：

• 熟悉 CSS 类和 html 元素（span、div、ul、li 等）。这是基本的 html 知识，不是 Oracle APEX 特定的知识，并且在网络上有很好的文档记录。

• 在更改实际代码之前，先熟悉使用浏览器工具修改页面上的css和html进行测试。这将为您节省数小时的时间。