Oracle Apex - How to Display Image and Text Side by Side Using Cards

 



Step - 1 : Create Blank Page.



Step - 2 : Create Cards Region :

               Title - Cards 

               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 Title Section

               Step1 : Enable Advanced Formatting

               Step 2: HTML Expression : <span style="font-weight:&WEIGHT.;font-size:80%;padding-                
                                                                 bottom:50px;"><b>&PRODUCT_NAME.</b><br></span>
  

               In Subtitle Section

               Step1: Enable Advanced Formatting

               Step2:  HTML Expression : <span style="font-size:70%"><B>PRICE</b> : &PRICE.</span>



               Icon and Badge :   Icon Source - Image BLOB Column
             
                                               Image Column - PRODUCT_IMAGE--my 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