SAP : Add your own button on alv toolbar

Question:

อยากจะเพิ่มปุ่มของเราเอง เข้าไปเพิ่มใน Toolbar ที่เป็นของ ALV ในโปรแกรมที่เราเขียน

Solution:

1. เข้า TCode SE80 เปิด function group SAPLKKBL ไปที่ GUI Status แตกรายการ เลือกที่ STANDARD_FULLSCREEN คลิกขวาเลือก copy ตามภาพข้างล่าง
   



2. หลังจากกดเลือก copy แล้วจะมี dialog windows ขึ้นมาถามว่าจะให้ copy ไปที่ program ไหนชื่อ status ว่าอะไร ซึ่งเราควรสร้าง program ไว้ก่อนแล้ว หลังจากใส่ข้อมูลก็กด copy



3. หลังจากนั้นก็ใส่ข้อมูลเกี่ยวกับ ชื่อ status, menu bar และ menu ปล่อยไว้ตามนั้น กด copy ต่อไปได้เลย



4. เป็นอันว่า copy เสร็จเรียบร้อย มี message แจ้งตามภาพ



5. หลังจากนั้น ไปที่ program ของเรา เพื่อลงทะเบียนใช้ GUI Interface ที่ได้ copy ไว้ โดยไปที่ Editor เขียนคำสั่ง SET PF-STATUS 'ZTESTALVTB_STANDARD' ('ZTESTALVTB_STANDARD' เป็นชื่อที่ตั้งไว้ตอน copy) จากนั้นให้ดับเบิ้ลคลิกที่คำว่า 'ZTESTALVTB_STANDARD' ถ้ามี dialog windows ขึ้นมาให้ถาม save program ก็กด save หลังจากนั้นก็จะเข้าสู่หน้าจอในการปรับเปลี่ยน GUI Interface ดังรูป


6. จากนั้นก็เพิ่ม ส่วนที่เป็นของเราเพิ่มเข้าไป กด Save พร้อม Active แล้วลอง Run รายงาน ก็จะได้ GUI Interface ที่เป็นของเดิมของ alv กับส่วนที่เราเพิ่มเข้าไป ดังรูป

---

สามารถดูตัวอย่างเำพิ่มเติมได้ตามรายชื่อ program ต่อไปนี้



ค่าที่เราสร้างขึ้นใน GUI Interface ต้องมีการดักจับ Event ซึ่งถ้าเราเรียก function เพื่อใช้ ALV เราก็ต้องเพิ่ม


CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY'
EXPORTING
I_CALLBACK_PROGRAM = SY-REPID
IS_LAYOUT = xxxx
IT_FIELDCAT = xxxx
I_CALLBACK_PF_STATUS_SET = 'SET_PF_STATUS'
I_CALLBACK_USER_COMMAND = 'USER_COMMAND'
I_SAVE = xxx
TABLES
T_OUTTAB = ITAB_ALV
EXCEPTIONS
PROGRAM_ERROR = 1
OTHERS = 2.



*&------------------------------------*
*& Form USER_COMMAND
*&------------------------------------*
FORM USER_COMMAND USING r_ucomm TYPE sy-ucomm
rs_selfield TYPE slis_selfield.
CASE r_ucomm.
WHEN 'xxxx'.

ENDCASE.
ENDFORM.

*&------------------------------------*
*& Form SET_PF_STATUS
*&------------------------------------*
FORM SET_PF_STATUSs USING rt_extab TYPE slis_t_extab.
SET PF-STATUS 'ZTESTALVTB_STANDARD'.
ENDFORM.


Google Maps V3 : Controls

Google Maps เมื่อแสดงออกมาจะมีตัวควบคุมแผนที่ ซึ่งถูกแบ่งได้ตามนี้

• Navigation control ใช้สำหรับ แพนและซูมแผนที่ โดยเริ่มต้นอยู่ในตำแหน่งข้างบนสุดทางซ้ายมือ
• Scale control บอกถึงมาตราส่วนของแผนที่ ค่าเริ่มต้นถูกตั้งค่าไว้ไม่ให้แสดงผลออกมา
• MapType control บ่งบอกถึงลักษณะของแผนที่ ไม่ว่าจะเป็น แผนที่แบบภาพถ่ายดาวเทียม(SATELLITE), แผนที่แบบแสดงเส้นทางการเดินทาง(ROADMAP) โดยเริ่มต้นอยู่ในตำแหน่งมุมขวามือข้างบนสุด

คำสั่งแรกที่จะนำเสนอเกี่ยวกับ Controls คือ คำสั่งที่ไม่ให้เห็น Controls ใดๆเลยบนแผนที่ของ Google Maps เราจะใช้คำสั่ง disableDefaultUI โดยให้มีค่าเป็น true ในตอนสร้าง MapOptions เพื่อใช้ส่งค่าเข้าไปตอนสร้าง Maps

var myOptions = {
  zoom: 12,
  center: latlng,
  disableDefaultUI: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP    
}

ส่วนการที่จะเพิ่ม Controls ที่ได้กล่าวถึงข้างบนลงไปบน Google Maps เราใช้ชื่อ property ตามนี้

{
navigationControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean
}

ถ้าจะเปลียนรูปแบบหรือสไตล์การแสดงของในแต่ละ Controls มีตัวเลือกให้เปลี่ยนได้ตามนี้
Navigation control มีสไตล์การแสดงที่เปลี่ยนได้คือ

• google.maps.NavigationControlStyle.SMALL
• google.maps.NavigationControlStyle.ZOOM_PAN
• google.maps.NavigationControlStyle.ANDROID
• google.maps.NavigationControlStyle.DEFAULT จะเปลี่ยนไปตามขนาดของ Maps และอุปกรณ์ที่ใช้รัน Maps

MapType control มีสไตล์การแสดงที่เปลี่ยนได้คือ

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR
• google.maps.MapTypeControlStyle.DROPDOWN_MENU
• google.maps.MapTypeControlStyle.DEFAULT จะเปลี่ยนไปตามขนาดของจอภาพที่แสดง Maps

Scale control มีสไตล์การแสดงแค่ค่าเดียวคือ

• google.maps.ScaleControlStyle.DEFAULT

ส่วนต่อมาเรามากล่าวถึงตำแหน่งที่จะให้ Controls เหล่านี้แสดงอยู่ในตำแหน่งต่างๆ บน Google Maps ซึ่ง Google Maps มีตำแหน่งให้ตั้งค่าตามภาพข้างล่าง



เราจะลองเปลี่ยนตำแหน่งและสไตล์การแสดงผลของ Controls ทั้งสามตามค่าที่ได้กล่าวถึง

  var myOptions = { 
    zoom: 12, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: google.maps.ControlPosition.TOP
    },
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.ZOOM_PAN,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT  
    }
  }

---

<html>      
<head>      
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />      
<script type="text/javascript"     
src="http://maps.google.com/maps/api/js?sensor=false"></script>      
<script type="text/javascript">    
 function initialize() {      
   var latlng = new google.maps.LatLng(13.742762, 100.535631);      
   var myOptions = {  
     zoom: 12,  
     center: latlng,  
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     mapTypeControl: true,
     mapTypeControlOptions: {
         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
         position: google.maps.ControlPosition.TOP
     },
     navigationControl: true,
     navigationControlOptions: {
         style: google.maps.NavigationControlStyle.ZOOM_PAN,
         position: google.maps.ControlPosition.TOP_RIGHT
     },
     scaleControl: true,
     scaleControlOptions: {
         position: google.maps.ControlPosition.BOTTOM_LEFT   
     }
   }    
   var map = new google.maps.Map    
             (document.getElementById("map_canvas"), myOptions);      
   var marker = new google.maps.Marker({      
    position: latlng,       
    map: map      
   });       
   marker.setIcon('http://google-maps-icons.googlecode.com/files/restaurant.png');     
   
   marker.draggable = true;   
       
   google.maps.event.addListener(marker, 'click', function() {    
      // alert(' Marker was clicked.');  
      var infowindow2 = new google.maps.InfoWindow(  
           {content: 'Marker was clicked.'}  
   );  
      infowindow2.open(map, marker);  
   });    
  
   google.maps.event.addListener(map, 'click', function(e) {    
      var newnew_marker = new google.maps.Marker({  
         position: e.latLng,      
         map: map,  
   title: e.latLng.toString()  
      });  
   });      
     
   google.maps.event.addListener(map, 'rightclick', function(e) {    
      var infowindow = new google.maps.InfoWindow(  
         { content: e.latLng.toString(),  
           size: new google.maps.Size(50,50),  
           position:e.latLng       
         });  
      infowindow.open(map);  
   });     
 }          
</script>      
</head>      
<body onload="initialize()">      
 <div id="map_canvas" style="width:100%; height:100%"></div>      
</body>      
</html>   

---