Oracle Apex : How to Display Images on Cards

 


Step - 1:Create Blank Page:




Step - 2: Create Cards Region:

                Identification - Type - Cards



                 Sample SQL Query:

                                     select product_id,
                                               product_name,
                                               filename,
                                               mimetype,
                                               image_last_update,
                                               product_image,--blob column
                                               price,
                                               product_avail
                                      from demo_product_info


Step - 3 : Go To Cards Region  Attributes:

                Follow below steps:

               Primary Key  column 1 : PRODUCT_ID --primary key of my table




           
               In Body Section

               Step1 : Enable Advanced Formatting

               Step 2: HTML Expression : 

                              <table>
                                     <tr>
                                             <td ><b>&PRODUCT_NAME.</b></td>
                                    </tr>
                                    <tr>
                                           <td><b>PRICE</b> : 
                                           &LIST_PRICE.</td>
                                    </tr>
                                    <tr>
                                          <td><b>QUANTITY</b> :
                                          &PRODUCT_AVAIL.</td>
                                   </tr>
                              </table>



               In Media Section

               Step1: Enable Advanced Formatting

               Step2: Source -BLOB Column

               Step3: BLOB Column - PRODUCT_IMAGE-------my table  blob column




Step - 4 : Save and Run the page:

Output:








Comments

Post a Comment

Popular posts from this blog

Oracle Apex - How to Display Add, Remove, Delete buttons on the Cards-Using Classic Report

Image
  Step - 1: Create blank page  :  Step - 2:Create classic report region :          Region Name = demo_classicreport   Sample  SQL query:   Select   'name:' || ' ' || product_name || '<br> quantity:' || ' ' || product_avail AS card_text,   filename,   mimetype,   image_last_update,   product_image,   sys.dbms_lob.getlength(product_image) AS card_title,   product_id,---my table primary key   list_price,   apex_util.prepare_url('#') AS card_link,   '<div data-id=' || PRODUCT_ID || '>    <button class="t-button t-button--nolabel t-button--icon trash-me " id="fav_' || PRODUCT_ID || '"          type="button">   <span class="t-icon fa fa-trash" aria-hidden="true"></span>   </button>  <button class="t-button t-button--nolabel t-button--icon add-favorite " id="fav_' || PRODUCT_ID || '"     ...
Read more

Oracle APEX: How to Display Column Text Color in Interactive Grid with JavaScript

Image
     Step-1:Create a new page in your application and give  name to the page. Step-2: Add below code in page level -  Function and Global Variable Declaration       function highlightIgCell(){            $('.COLOR').each(function(index) {            var td_ele = $(this);            var val = $(this).text();           if(val == 'Preparing')             {             td_ele.attr('style','text-color:RED;color:#d50000 ;font-weight:bold;')             }              if(val == 'Received')             {           ...
Read more