Classic Report Customize Design  Using HTML

Topic Introduction: This tutorial will show how to decorate a classic report using HTML into Column Formatting ==> HTML Expression in oracle Apex. This tutorial will help you to format your data as you want. You can design using HTML using query columns. For customizing follow the process one by one.

01. Create a page

02. Create a Classic Report using a SQL Query

      SQL Query

select PID,

       CARD_NO,

       STUDENT_NAME,

       FATHER_NAME,

       MOTHER_NAME,

       SESSION_NAME,

       SHIFT_NAME,

       CLASS_NAME,

       SECTION_NAME,

       MOBILE_NO,

       EMAIL,

       CATEGORY_NAME,

       DATE_OF_BIRTH,

       CASE 

       WHEN NVL(dbms_lob.getlength(STUDENT_IMAGE),0) = 0 OR FILE_MIMETYPE not like 'image%' THEN '<span aria-hidden="true" class="fa fa-user-circle-o fa-5x" style="width: 92px !important; height: 92px !important; -moz-border-radius: 4px; -webkit-border-radius: 4px; border:2px solid; justify-content: center; align-items: center; display: flex;"></span>' 

       ELSE '<img src="'||apex_util.get_blob_file_src('P35_STUDENT_IMAGE',PID)||'" style="width: 92px !important; height: 92px !important; -moz-border-radius: 4px; -webkit-border-radius: 4px;" />' 

       END IMAGE,

       --STUDENT_IMAGE,

       FILENAME,

       FILE_MIMETYPE,

       FILE_CHARSET,

       FILE_UPDATE_DATE

from STUDENT_DEMO

where PID=1;

03. Go to a Column Property of this report. Here I have used the PID column for the Formation of this report. you can choose any column. then type this HTML code in the HTML Expression box.

      Column Formatting==> HTML Expression

<table style="width:100%;">

    <tr>

        <td rowspan="5" style="width:10%;">#IMAGE#</td>

        <th style="width:10%;">ID Card</th>

        <td style="width:2%;">:</td>

        <td style="width:28%;">#CARD_NO#</td>

        <th style="width:10%;">Student</th>

        <td style="width:2%;">:</td>

        <td style="width:28%;">#STUDENT_NAME#</td>

    </tr>

    <tr>

        <th>Session</th>

        <td>:</td>

        <td>#SESSION_NAME#</td>

        <th>Shift</th>

        <td>:</td>

        <td>#SHIFT_NAME#</td>

    </tr>

    <tr>

        <th>Class</th>

        <td>:</td>

        <td>#CLASS_NAME#</td>

        <th>Section</th>

        <td>:</td>

        <td>#SECTION_NAME#</td>

    </tr>

    <tr>

        <th>Father</th>

        <td>:</td>

        <td>#FATHER_NAME#</td>

        <th>Mobile</th>

        <td>:</td>

        <td>#MOBILE_NO#</td>

    </tr>

    <tr>

        <th>Category</th>

        <td>:</td>

        <td>#CATEGORY_NAME#</td>

        <th>Email</th>

        <td>:</td>

        <td>#EMAIL#</td>

    </tr>

</table>

04: Go to Image Column Property

      Security ==> Escape Special Character: NO

05: Select all columns except PID (in which column you have used the HTML code) and make this type a hidden column.

     Identification ==> Type: Hidden Column