Saturday 23 January 2016

Cascading - Text With Auto-Complete in Tabular Form

Text with Auto Complete is  most common requirement and can be done normally for item level. But coming to tabular form it seems to be tedious due to dynamic ids and queries. Also Cascading 
process inclusion adds a valuable requirement.
Following are steps involved Cascading - Text with Auto-complete:
Step : 1: For Cascading I have to get source id and value, so I have used
               dynamic action,
Event                : Click
Selection Type : JQuery Selector
                            Value : [name = f03]   //Source Id
Action               : Javascript Code
Code                 :   var source_element = this.triggeringElement.id; //gets source id 
                              var source_value = $("#"+source_element).val(); 
                                                        // gets source value
                              $("#P41_MAP_TYPE").val(source_value);
                                                // Assign to item
Step:2: List of Values to be displayed in Text with Auto-complete can be       listed as static or it can also be fetched from query. So I have added   one more true action to add query and assigned query result to item, which act as  result set for auto-complete.
       Action              : Execute PL/SQL Code
       PL/SQL Code : DECLARE
                     lv_tag_asset   VARCHAR2 (32767);
                     lv_temp VARCHAR2(1000);
                     BEGIN
                          FOR i IN (SELECT tag_code tag_asset
                            FROM doy_com_tag_master
                            WHERE NVL (status, 'Y') = 'Y'
                            AND :P41_MAP_TYPE = 'TAG'
                            AND company_id = :f121_company_id
                            AND location_id = :f121_location_id
                         UNION
                              SELECT serial_number tag_asset
                              FROM doy_com_item_transaction
                              WHERE NVL (status, 'Y') = 'Y'
                               AND :P41_MAP_TYPE = 'ASSET'
                               AND company_id = :f121_company_id
                               AND location_id = :f121_location_id)
                  LOOP
                      lv_tag_asset := lv_tag_asset || ','|| i.tag_asset;
                  END LOOP;
                      :P41_TAG_ASSET := lv_tag_asset;
                   END;
Page Items to Return : P41_TAG_ASSET
Step : 3 :  On resulting item key-down we need auto-complete list, So I have added      dynamic action on key-down of item,

Event                : Key Down
Selection Type : JQuery Selector
                             Value : [name = f05]   //Source Id
Action               : Javascript Code
Code                  :   var availableTags;
                               var temp = new Array();
                               var c = $("#P41_TAG_ASSET").val();
                               temp = c.split(",");
                               availableTags = temp; 
                               var id = this.triggeringElement.id;
                               $( "#"+id ).autocomplete({
                                 source: availableTags
                                          });
Event Scope    :   Dynamic
                  Static Container : #report_tab_form   
                                            // id of tabular form is tab_form
Step: 4        :   Jquery library has to be added in our header level , it is better to add      it in template level. 
               <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      

1 comment: