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

Favicon in oracle apex 5.1

The "Cool-est" new feature of Oracle Application Express 5.1 is "Favicon".

Let's say we wanted to set Favicon on every page of our application. First we check how it looks like without Favicon. (See right side)

Now we add Favicon for the same and it will look something like this --}

Steps to Accomplish.

Edit you're application (In my case it is Sample Calendar)
Go to shared component.
Find  User Interface --Then Click On--> User Interface Attributes.

Add what ever Favicon you like to add in below place.

Save it and check you're application page you will have the nice and cool Favicon.

YouTube : https://youtu.be/BkQVrjXPj74

Toggle check-box in tabular form

 Hide and display Check box(td) based on value of other td.

Situation is such where by we want users to input some data into some specific field without it we wont allow them to do any data manipulation stuff with particular field value.

We wanted to hide Check-box (td) if user do not insert value into date-picker.

Datepicker HTML structure looks something like :

 <span style="white-space: nowrap;">
<input type="text" class="u-TF-item u-TF-item--datepicker  hasDatepicker" id="f04_0003" name="f04" maxlength="2000" size="12" value="09-JUN-81" autocomplete="off">
<button type="button" class="ui-datepicker-trigger a-Button a-Button--calendar">
<span class="a-Icon icon-calendar"></span>
<span class="u-VisuallyHidden">Popup Calendar: Hiredate <span>
 </button>
 </span>

 Here name is f04 and it's id f04_0003.For all the fields in tabular form each cell will have unique ID which we will be able to get.
 ID is nothing but the combination of name plus string to represent a row in this case '_0003' so if you combine both name and unique value it becomes 'f04_0003'.

Check-box HTML structure looks something like :

 <td class="t-Report-cell" headers="CHECK$01">
<label for="f01_0002" id="f01_0002_LABEL" class="u-VisuallyHidden">Select Row</label>
<input type="checkbox" name="f01" value="2" class="u-TF-item u-TF-item--checkbox row-selector" id="f01_0002" autocomplete="off" style="display: inline-block;">
 </td>

 For the same we will create Dynamic Action(DA) which will fire based on following condition.

 Event = Change
 Selection type = jQuery selector
 jQuery selector = input[name="f04"]
 Fire on page load = Uncheck

(Example : whenever an input whose name is 'f04' is changed, fire this action.)

Execute Javascript Code =

 var this_id = $(this.triggeringElement).attr('id');

console.log(this_id );

var that_id = 'f01'+this_id.substr(3);

console.log(that_id);



   if ($(this.triggeringElement).val() == "") {

   $('#'+that_id).hide();

   console.log("Let's hide it");

} else {

    $('#'+that_id).show();

    console.log("Let's display it back again");

}

If you want to hide any text-field then modify as below.

if ($(this.triggeringElement).val() == "") {
    $('#'+that_id).closest('span').hide();
} else {
    $('#'+that_id).closest('span').show();
}


 demo
 test/test

Clickable display only item in oracle apex 5.0.4

You can use Jquery to achieve the same.

Let's take a look at below example.

Function and Global Variable Declaration

1. $(function(){  
2.     $('#P50_CLICK_DISPLAY').on('click', function(){  
3.       $("#P50_HIDE").hide();  
4.       $("#P50_SHOW").show();  
5.       $("#P50_HIDE_LABEL").hide();    
6.       $("#P50_SHOW_LABEL").show();   
7.     })      
8. })  

Three  items in same region(Static). here P50_CLICK_DISPLAY is a display only item and it's value is static. There are two more item which is Hide and Show.

Now, initially p50_show will be hidden on page load and p50_hide will be displayed.When user clicks on display only item's value then p50_show will be displayed and p50_hide will be hidden.

Execute when Page Loads

1.  $("#P50_SHOW").hide();  
2.  $("#P50_SHOW_LABEL").hide();  

Here we have hide the Label as well as item.

This can be done without using DA which is more convenient way in this scenario.

Css:

1. #P50_CLICK_DISPLAY {   
2.         text-decoration: underline;  
3.         -webkit-text-decoration-color: red;  
4.         -moz-text-decoration-color: red;  /* vendor prefix not required as of V36 */  
5.          color: red;  
6. }  

If you want to  redirect you can use :

$('#P50_CLICK_DISPLAY').wrap('<a href="Link_url"></a>') ;

Demo : https://apex.oracle.com/pls/apex/f?p=30631:50:12855411930739:::::

Page : 50

Credentials : test/test

Remove X from Modal Page

Sometimes our clients have some good requirements where by we need to do some stuff according to their requirements  as we all know "Customer is always right - Harry Gordon Selfridge, John Wanamaker and Marshall Field"

So what if we want to hide X mark from the Modal Page (Oracle apex 5.0) basically there two ways to achieve the same first way would be add some css which will do it for us.

Copy and paste below code in page css :

button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close {    visibility: hidden !important;  
}  

Another method is very clean. For that we need to edit modal page -> Dialog -> Attributes

Add this code :

open:function(event,ui){parent.$('.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close').hide();}

We can also add button in modal page near close button:

$('.ui-dialog-titlebar', window.parent.document).append('<a href=""><span class = "fa fa-user someIdentifier"> </span></a>');

   $('.someIdentifier', window.parent.document).click(function(){
       alert('whol');
   });

Oracle application express or Oracle APEX have some good inbuilt functionalities and it's better we always follow the same without playing it with much.

Comment if you like the content and share :)

Follow:   Twitter

Find me on linkedin and you can always endorse

Select Multiple checkbox with shiftkey

An answer to this Question which was asked on forum.

Basically if you have a multiple check box and you want to select multiple check box with Shift key
pressed and mouse key click then it would be quite handy sometimes.




First we will find the class name of check box.

$("input[type='checkbox']").change(function() {
    var classes = $("input[type='checkbox']:checked").map(function() {
        return this.className;
    }).get().join(",");
    alert(classes);
});

Run above code in DOM and hit enter it will save your state now click any check box from page it will alert Class name of particular check box now if every check box are having same class then it would be quite easy to deal with it.

Alert will be something like this.
u-TF-item u-TF-item--checkbox row-selector

Now will just a create a logic to get things done according to our needs.Just edit your page and use below logic to get things done.

var lastChecked = null;
 
            $(document).ready(function() {
                var $chkboxes = $('.u-TF-item.u-TF-item--checkbox.row-selector');
                $chkboxes.click(function(e) {
                    if(!lastChecked) {
                        lastChecked = this;
                        return;
                    }
 
                    if(e.shiftKey) {
                        var start = $chkboxes.index(this);
                        var end = $chkboxes.index(lastChecked);

                        $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked', lastChecked.checked);
 
                    }
 
                    lastChecked = this;
                });
            });

Cool Done :)
demo
test/test

Calendar holiday events

I was working on a project where client wants to show list of holidays from start date to end date.Client was having multiple sub businesses running under one root.So, each department was having different list of holidays.

Whenever there is a holiday calendar should display its Name for which is called off-or-holiday on same day.By clicking on that event it should redirect to some other page whereby client can edit or add same holiday as per need.

So first of we need to create some basic sql to keep it going.Based on my table structure i had created simple query as below.

WITH D1 AS
       (SELECT   cal_event_id,
 cal_start_date AS firstdate,
 cal_end_date AS lastdate
   FROM   cal_event)
   SELECT u.name,c.cal_start_date,u.cal_event_id
   FROM cal_event u,
  (SELECT
firstdate + LEVEL - 1 cal_start_date
FROM D1
CONNECT BY firstdate + LEVEL - 1 <= lastdate) c
WHERE c.cal_start_date BETWEEN u.cal_start_date AND u.cal_end_date

Now, it's time to add calendar region in page. Create a calendar based on above query if you want you can add a Link to a event and it will redirect to a specific page as i did in my demo page.

Thats it now you can see Events from star date to end date. :)

Demo : test/test
Calendar Events for hoildays

Twitter:
Pranav

"Aller Anfang ist schwer.- German"(All beginnings are hard.)