Barcode lable printing using jquery with oracle apex

So lets say we wanted to print barcode layouts in our Oracle Application Express  which will print small,simple and elegant labels with information we wanted to print, First let me tell you barcode  label printing needs some define paper layout on which we can print barcode data Paper Size Information

After selecting the proper layout its time for start coding in  HTML, JAVASCRIPT and PL/SQL this part is very interresting here i have share the neccessary js file which needs to be included on page you can add this Javascript - For Barcode Layout file in workspace.

Create report in your application which will be pl/sql based so we can write some htp.p methods in that report.

As of now we have selected page layout and added js as per our need now it's time to build a page in oracle which will work with js and layout.

So we gonna add report with below code.

DECLARE

page_cnt number := 1;
row_count number := 3;
page_elements number := 24;
l_cnt number:=0;

cursor c1 is
select a.lvl,
null DUMMY_COLS,
null DUMMY_COLS2,
null DUMMY_COLS3,
null DUMMY_COLS4,
null DUMMY_COLS5,
null DUMMY_COLS6,
null DUMMY_COLS7
from
(SELECT LEVEL as lvl FROM dual CONNECT BY LEVEL <= 24) a
join
(
SELECT  LVL
FROM MY_TABLE t
and rownum < 2
) b on a.lvl < b.lvl
union all
 ( SELECT    (rownum+p_begin_no) - 1 as lvl
    FROM MY_TABLE2
    )
order by 1;

                               
BEGIN
                                                       

htp.p('<table class="mainTable">');
htp.p('<tr class="singleRow">');

-- max l_cnt will be
-- page_elements = 24 -- number of elements on a single page
-- row_count = 3 -- max number of elements in a single row
-- page_cnt -- running total of pages created, init at 1
-- l_cnt -- running total of elements printed .. init at 0
                                                       
FOR A IN c1 LOOP
 
-- increment the counter to get the current element number
l_cnt:=l_cnt+1;

-- open a new table if required
IF  ((mod(l_cnt, page_elements) = 1) AND (l_cnt > 1))  THEN
 htp.p('<table class="mainTable">');
END IF;

-- open a new row if required
IF  ((mod(l_cnt,row_count) = 1) AND (l_cnt > 1))  THEN
 htp.p('<tr class="singleRow">');
END IF;


-- add the element under an existing row...
        if a.item_id is null then
            htp.p('<td class="singleColumn"></td>');                                                
        else                                          
            htp.p('<td class="singleColumn">
                <div  name="barcode">'||A.COL1||'</div>
                <div class="singleDiv">'|| A.COL2||'</div>
                </td>');
        end if;

-- based on the l_cnt determine, if we need to close a row or not
        IF (mod(l_cnt,row_count) = 0 AND l_cnt > 1) then
            htp.p('</tr>');
        END IF;

-- based on the l_cnt determine, if we need to close a table or not
        IF (mod(l_cnt,page_elements) = 0 AND l_cnt > 1) then
          htp.p('</table>');
        END IF;
END LOOP;
     
-- Add elements to complete a row
IF mod(l_cnt, row_count) <> 0 then
    FOR i in 1..(row_count - mod(l_cnt, row_count)) loop
        htp.p('<td class="singleColumn"></td>');
    end loop;
end if;
 
    IF mod(l_cnt, row_count) <> 0 then
        htp.p('</tr>');
        htp.p('</table>');
    end if;
END;

How actually everything works ?? 

  

what i did for my task is user will select some data from lov and based on lov data Tabular result will get reflected (so far so good) i have report  on page so if user checks the checkbox and submit it will save into the database with beginning number of barcode to be printed and then after it will open a new page with barcode in it.

In pl/sql we are using what, where and how many records of  barcode we wanted to print.

So the logic is if user selects he wants to start printing from label no 3 then according to our pl/sql logic as shown above it will print data from #3.

How many formats can we print??

Different formats(on a single page): 24 label, 28 label, 30 label etc...

It will print every format no matter what layout you are working on just change the sql according to you're need and you are good to go.

Declaimer 

Oracle Application Express version 5.0
Report
Javascript