Search code examples
oracleoracle-apexoracle-apex-5

Oracle Apex 5 custom report


in my application I have a form based on a report with the list of Dishes. I want to change apperance of the report so that it doesn't look like a table, but more like a list. I don't want to have a heading. I would expect something similar to the amazon list after you submit your search:

http://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=oracle+apex

Is it possibe to achieve it without creating a plugin? How would you approach this?


Solution

  • You can do this by creating a new bespoke report template for the report.

    Go to Shared Components, Templates and create a new report template. Select "Named Column (row template)" as the template type.

    After creating it, edit it and change the "Row template 1" property which initially looks like this:

    <tr><td>#1#</td><td>#2#</td><td>#3#</td><td>#4#</td><td>#5#</td></tr>
    

    Replace that with the HTML for each report row, for example:

    <li>
      <div class="picture">
        <img src="#DISH_PICTURE#">
      </div>
      <div class="description">
        <h2>#DISH_TITLE#</h2>
        <p>#DISH_DETAILS#</p>
      </div>
    </li>
    

    The words between #'s are column names from your report query (this template is bespoke for this particular report). So your query might be:

    select dish_picture, dish_title, dish_details
    from dishes
    order by dish_seq;
    

    Use the "Before Rows" and "After Rows" properties to define the HTML before and after the rows, for example <ul class="dishList"> and </ul>.

    You can then apply styling using CSS in files or in the page attributes (for example).