CODEWITHSUNDEEP
htmloracle-apex
Ana Brandt
Ana Brandt

Reputation: 1

Formatting the info inside cards on apex oracle app

I am a beginner on using apex oracle/sql/html etc. I'm creating an application through apex and one of the pages is a modal dialog report that has a card region. I arranged groups of data to populate the title, subtitle, body and secondary body (spaceholders) and it is working fine. The problem is the layout. As it is a group of informations, I would like to show them stacked/in diferent lines, similar to contextual info template. For example, in the subtitle I have data for "cook time:xx" and "portion factor:xx". Nowadays they are inline, and I would like it stacked. It has the option for each spaceholders to advanced formatting in html, but not sure how I can do it. Can some one help? Thanks a lot! Ana

I tried to add this configuration on my sql query on the source region, but if I used to create new line, it was worng. Then I tried to add char(10) there and also didnt work (nothing change). I tried to change the template, but was a bit complicated for me and it didnt work. I think the solution is using this advanced formatting on the spaceholders to define the layout of it, but I am stuck.

enter image description here

Upvotes: 0

Views: 96

Answers (1)

Koen Lostrie
Koen Lostrie

Reputation: 18695

Here is an example on the emp/dept sample dataset (install it through SQL Workshop > Utilities > Sample Datasets > EMP / DEPT). On a single card the department is shown with the following info:

  • Subtitle has department location (with the word: "Location" in bold) and on a new line it has the total salary for that department.
  • Card Body has a list of individual employees and their salary

That is pretty close to your "recipe" concept.

Card Region SQL Query
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
Card Region Attributes configuration

enter image description here

Subtitle HTML Expression
<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>
  • Note the css directive "list-style-type: none;" this gets rid of the bullets in the list.
  • Note the class "u-bold". This is an APEX native Content modifier class (usage of APEX native classes is preferred over custom CSS)
Body HTML Expression
Employees and their salary:<br>
<ul>
    {loop ";" EMPLOYEES_W_SAL/}
        <li>&APEX$ITEM.</li>
    {endloop/}
</ul>
  • Note the usage of the "loop" directive. The source SQL LISTAGG function uses ";" as separator - this is referenced here too.
Result

enter image description here

Implementation Details
  • The way to format column data in regions that support HTML Expressions is to use "Template Directives" (docs). This allows very flexible custom formatting.
  • Use the APEX provided classes if possible. They're documented on the "Universal Theme" documentation page. You can write custom css too, that will work but might be less upgrade-proof.

Tips:

  • Familiarize yourself with CSS classes and html elements (span, div, ul, li, etc). This is basic html knowledge, not Oracle APEX specific and very well documented on the web.

  • Familiarize yourself with the use of browser tools to modify css and html on the page for testing before changing your actual code. This will save you hours of time.

Upvotes: 0

Related Questions