HTML_FRAGMENT 를 이용한 JavaScript 넣기 꼼수

웹딘프로 layout에 HTML_FRAGMENT를 하나 그려줍니다.

WDDOMODIFYVIEW 메소드에서

IF first_time EQ abap_true. 으로 한번만 실행되도록 하고

HTML_FRAGMENT 엘리먼트의 html 속성에 HTML tag를 하나 넣겠습니다.

<img src="/sap/public/bc/ur/nw5/1x1.gif" style="display: none;" onload="alert('script test');" />

ABAP 코드는 이렇습니다.

CAST cl_wd_html_fragment( io_view->get_element( 'HTML_FRAGMENT' ) )->set_html(
  `<img src="/sap/public/bc/ur/nw5/1x1.gif" style="display: none;" onload="alert('script test');" />`
).

내용을 설명드리겠습니다.

IMG tag를 이용해서 onload 시점에 실행할 JavaScript를 넣으면 됩니다. 예를 들어 아래 테스트 코드를 넣어 봤습니다.

alert('script test');

IMG의 onload가 실행되는 시점은 웹브라우저가 화면을 그리고 src 속성의 파일을 읽어와서야 실행됩니다. 매우 나중에 실행되는 타이밍입니다.

 

 

좀 더 복잡한 스크립트가 들어간 예제를 보여드리겠습니다.

파일 업로드 팝업인데 팝업이 뜨면 웹딘프로의 파일업로드 엘리먼트를 클릭하지 않아도 자동으로 클릭해서 파일 선택 창이 나오고 파일을 선택하면 자동으로 팝업의 OK 버튼을 눌러 닫힙니다.

CAST cl_wd_html_fragment( io_view->get_element( 'HTML_FRAGMENT' ) )->set_html(
  `<img src="/sap/public/bc/ur/nw5/1x1.gif" style="display: none;" ` &&
  `onload="` &&
  `var el = this;` &&
  `while( !el.classList.contains('lsPopupWindow') ) {` &&                 " popup div
  `  el = el.parentElement;` &&
  `}` &&
  `var file = el.querySelector('input[type=file]');` &&                   " file input box
  `var ok = el.querySelector('.urPWFooterBottomLine .lsButton');` &&      " ok button
  `file.oninput = function() { UCF_JsUtil.delayedCall( 200, ok, 'click' ); };` &&
  `file.click();` &&
  `" />`
).

IMG tag를 이용한 onload에 스크립트 넣기 방식은 동일합니다. JavaScript만 가져와서 보겠습니다.

var el = this;
while( !el.classList.contains('lsPopupWindow') ) {
  el = el.parentElement;
}
var file = el.querySelector('input[type=file]');
var ok = el.querySelector('.urPWFooterBottomLine .lsButton');
file.oninput = function() { UCF_JsUtil.delayedCall( 200, ok, 'click' ); };
file.click();

처음 4줄은 el 변수에 lsPopupWindow 이라는 class 속성을 가진 엘리먼트를 찾습니다. (웹딘프로 팝업의 태두리입니다)

5번째줄은 file 변수에 input tag의 type 속성이 file인 엘리먼트를 찾습니다. (웹딘프로 FILE_UPLOAD 엘리먼트에 해당합니다)

6번째줄은 ok 변수에 urPWFooterBottomLine 이라는 class 속성을 가진 엘리먼트 아래에 lsButton 이라는 class 속성을 가진 엘리먼트를 찾습니다. (웹딘프로 팝업의 아래쪽 OK 버튼에 해당합니다)

7번째줄은 파일 업로드 엘리먼트에 oninput 시점에 200ms 딜레이를 주고나서 OK 버튼을 click 하라는 뜻입니다. (이것은 파일 선택후 자동으로 팝업을 닫기 위한 코드 입니다)

8번째줄은 파일 업로드 엘리먼트를 click 하라는 뜻입니다. (파일 선택 창이 열립니다)

 

이 코드는 아래 프로젝트에 포함되어 있습니다.

https://github.com/boy0korea/ABAP2XLSX_HELPER

GitHub - boy0korea/ABAP2XLSX_HELPER: abap2xlsx helper