Membuat Form Sederhana

Kali ini saya akan membahas mengenai cara membuat sebuah form sederhana. Form yang akan dibuat berkaitan dengan tutorial Membuat Report ALV Grid Sederhana yang telah diposting sebelumnya. Casenya adalah, pada saat report billing telah ditampilkan, jika user melakukan double click di salah satu row report tersebut, maka akan ditampilkan sebuah form yang memuat detail dan item dari Billing Number pada row tersebut.

Muncul form berikut.

Data yang diperlukan adalah image ZLOGO_BILLING untuk header report, No Billing, Tanggal Billing, dan item data billing.

Berikut Langkah-langkah yang perlu dilakukan.

• Masuk ke transaksi SMARTFORMS.Masukkan nama form, contohnya ZSF_BILLING, click Create

• Awalnya, hanya ditampilkan 1 window pada form painter, yaitu main window. Untuk form ZSF_BILLING, kita akan create 2 window baru yang menampung gambar dan header. Window disini berfungsi sebagai layer. Jadi sebaiknya pisahkan setiap window tergantung keperluannya, agar lebih mudah dimaintain jika terjadi perubahan layout. Caranya adalah klik kanan subtree %PAGE1 New Page , pilih Create-Window.

• Create 2 window, yaitu W_HEADER dan W_IMAGE, ubah layoutnya seperti berikut.

• Untuk format text, kita gunakan ZMY_STYLE. Klik Node Form Attributes, pada tab Output Options, masukkan nama style di field Style.

• Data yang akan ditampilkan di form diimport dari program ZRBILLING, jadi, diperlukan interface untuk mengakses (import,eksport, table, exception) data dari program tersebut. Klik node Form Interface, tambahkan variabel-variabel berikut. Pada tab Import :

Pada tab Tables :

Tables tersebut bertype structure ZSTR_BILLING.
• Klik node Global Definitions, tambahkan variabel WA_BILLING yang akan digunakan untuk output dari input interface IF_BILLING yang telah di-define sebelumnya di Form Interface, dan variabel V_FKIMG, yang akan digunakan sebagai variabel referensi yang menampung data bertipe QUANT. Dalam smartforms, biasanya data yang bertipe QUANT tidak dapat ditampilkan secara langsung seperti data tipe lainnya. Jadi, harus di-define sebuah variabel untuk menampung data tersebut.

• Klik Tab Initialization, masukkan IF_BILLING sebagai input parameter dan WA_BILLING sebagai output parameters, dan pindahkan nilainya di editor yang telah tersedia.

• Klik tab Currency/Quant. Fields, assign nilai data bertipe QUANT ke variabel penampung yang telah kita definisikan di Global Data.

• Gambar ZLOGO_BILLING yang telah kita upload sebelumnya pada tutorial Upload Gambar ke Sistem SAP akan diinsert pada window W_HEADER. Klik kanan W_HEADER, pilih Create-Graphic. Pada tab General Attributes, masukkan nama gambar yg akan ditampilkan, tekan F4 (untuk memastikan apakah gambar tersebut terdapat di dalam sistem), jika ada, tekan enter. (jangan lupa pilih Color Bitmap Image)
• Di window W_HEADER akan diinsert data Billing No dan Billing Date. Agar formatnya lebih rapi maka kita gunakan template. Template dapat digunakan sebagai ruler, user tinggal menentukan baris dan kolom tempat menginput data sesuai kebutuhan user. Sebagai contoh, kita gunakan template tanpa border yang terdiri dari 2 baris dan 2 kolom.

C(1,1) berisi text : 'Billing No'
C(2,1) berisi billing no hasil import dari program
C(1,2) berisi text : 'Billing Date'
C(2,2) berisi billing date hasil import dari program
• Klik kanan W_HEADER, Create-Template (TMP_HEADER), maka akan ditampilkan layout berikut.

• Awalnya hanya terdapat sebuah cell pada template tersebut. Klik kanan Cell %C1, pilih Insert-Empty Line Underneath untuk menginsert row baru.

• Klik icon pensil, kemudian bagi 2 cel tersebut.

• Klik kanan template, pilih Create-Text.

• Tentukan isi text di tab General Attibutes.

• Tentukan posisi text tersebut, di baris berapa dan kolom berapa di tab Output Option, Screen Output structure, misalnya Line 1, Column 1.

• Untuk text biasa, kita dapat mengetik langsung isi text, tapi untuk text yang mengandung nilai sebuah variabel, maka digunakan button insert field, dengan format text &[nama_variabel]&

Untuk template TMP_HEADER, create 4 text

• TXT_BLNO
  Text : Billing No.
  Line 1 Column
• TXT_BLDATE
  Text : Billing Date.
  Line 2 Column 1
• TXT_DBLNO
  Text : &P_VBELN&.
  Line 1 Column 2
• TXT_DBLDATE
  Text : &P_FKDAT&.
  Line 2 Column 2
• Data item untuk setiap billing di-define di window MAIN. Dynamic data ditampung dalam tabel. Klik kanan window main, pilih Create-Table. Misalnya tabelnya diberi nama T_BILLING. Di tab table, define line yang akan digunakan sebagai template line table yang telah dicreate. Untuk kondisi saat ini, kita hanya perlu sebuah line type yang terdiri dari 9 kolom, dan memiliki border.

• Klik kanan node Header, pilih Create-Table Line

• Sebuah line dengan sembilan cell akan muncul secara otomatis, yang dapat kita isi dengan text. Berbeda dengan template, pada table tidak perlu define line dan column, tinggal isi text sesuai urutan yang dibutuhkan. Isi setiap text sesuai dengan kebutuhan form (Lihat kembali hasil akhir form di awal tutorial).

• Lakukan hal yang sama di node Main Area, bedanya, setiap cell diisi dengan nilai variabel WA_BILLING yang telah diimport. Misalnya &WA_BILLING-VBELN& untuk cell pertama, dan varibael lain seterusnya. Khusus untuk Quantity, variabel yang digunakan adalah V_FKIMG bukan WA_BILLING-FKIMG.
• Save dan aktivasi form.
• Edit program ZRBILLING untuk memanggil smartforms yang telah dicreate. Edit ZRBILLING_TOP, tambahkan variabel berikut.

• Tambahkan FORM F_USER_COMMAND di ZRBILLING_F01.

• Tambahkan FORM F_CALL_FORM.

• Edit form F_LIST_DETAIL, tambahkan code berikut.

• Save program dan aktivasi kemudian eksekusi program.