Community
Select to view content in your preferred language

Membuat Custom Widget Pada ArcGIS Web AppBuilder

722
0
06-26-2018 05:12 AM
Spatial_Heroes2018
by
Emerging Contributor
0 0 722
‎06-26-2018 05:12 AM

Tutorial berikut akan memberitahu anda bagaimana cara membuat custom widget pada ArcGIS Web AppBuilder. Sebagai pendahuluan, sebelum melakukan langkah-langkah yang ada pada tutorial ini, pastikan IIS (Internet Information Service) anda telah terinstall. Pastikan juga anda sudah mendownload Web AppBuilder for ArcGIS (Developer Edition). Jika belum, file tersebut dapat di download di link berikut: Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers. Setelah mendownlad Web AppBuilder for ArcGIS (Developer Edition), extract folder tersebut pada salah satu folder anda. Setelah syarat-syarat tersebut diatas terpenuhi, maka anda bisa melanjutkan ke langkah-langkah berikut:

  1. Buka folder WebAppBuilderForArcGIS/client/stemapp/widgets/samplewidgets, di dalam folder tersebut anda akan menemukan folder "CustomWidgetTemplate."
  2. Copy folder "CustomWidgetTemplate", ganti nama folder baru tersebut menjadi "WidgetSaya."
  3. Edit file widget.js yang ada di dalam folder (semua proses editing pada tutorial ini dapat dilakukan dengan menggunakan Notepad, atau Notepad ++ untuk tampilan yang lebih mudah dilihat). Ganti nama baseClass menjadi 'jimu-widget-widgetsaya':

    define(['dojo/_base/declare', 'jimu/BaseWidget'],

    function(declare, BaseWidget) {

    //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget], {

    // Custom widget code goes here

    baseClass: 'jimu-widget-widgetsaya'

    });

    });

    Simpan file tersebut.
  4. Ubah tampilan dari widget.
    1. Edit file widget.html, masukkan baris berikut ke dalam widget.html:
      <div>
      <div>Ini Widget Saya.</div>
      </div> 
    2. Simpan file tersebut
  5. Tambah widget ke  file app configuration:
    1. Buka file config-demo.json di folder stemapp/sample-configs

    2. Temukan baris widgetPool> widgets, tambahkan widget anda dengan cara menambahkan baris berikut:

      {
                 "label": "WidgetSaya",
                 "uri": "widgets/samplewidgets/WidgetSaya/Widget"
      }
    3. Simpan file tersebut.
  6. Untuk mencoba apakah widget anda bisa dijalankan atau tidak, anda dapat membuka http://[hostname komputer anda:3344]/webappviewer/?config=sample-configs/config-demo.json dan klik ikon "WidgetSaya" (sebelumnya,pastikan Web AppBuilder anda telah berjalan).Screenshot Widget
  7. Konfigurasi widget anda:
    1. Edit file config.json pada folder WidgetSaya
    2. Tambahkan berikut ke dalam file config.json:
      { "configText":"abcdefg" }
    3. Edit file Widget.html. Ganti semua baris di dalam file dengan baris berikut:

      <div>
      <div>Ini WidgetSaya.</div>
      <div>Ini dapat dikonfigurasi.[${config.configText}]</div>
      </div>

    4. Save kedua file diatas. Buka http://[hostname komputer anda:3344]/webappviewer/?config=sample-configs/config-demo.json untuk melihat hasilnya.
  8. Ubah style widget. Pada file HTML, pengubahan style widget dapat dilakukan dengan cara mengedit file CSS (Cascading Style Sheet).
    1. Buka folder css yang ada dalam folder WidgetSaya. Setelah itu, edit file style.css. Masukkan baris berikut ke dalamnya:
      .jimu-widget-widgetsaya div:first-child{ color: blue; }
    2. Save file style.css. Buka http://[hostname komputer anda:3344]/webappviewer/?config=sample-configs/config-demo.json untuk melihat hasilnya.
  9. Atur agar widget dapat digunakan di Web AppBuilder:
    1. Edit file manifest.json di dalam folder WidgetSaya. Ganti properti widget (seperti widget type, name, locals, dan sebagainya) sesuai dengan kebutuhan.
    2. Copy folder WidgetSaya ke folder stemapp/widgets
    3. Tutup dan jalankan ulang Web AppBuilder, dan setelah itu buka http://[hostname komputer anda:3344]/webappbuilder

Sekian tutorial yang dapat saya sampaikan untuk saat ini. Sampai jumpa di artikel berikutnya!

Muhammad Naufal Ihsan

Spatial Heroes 3.0, Esri Indonesia

0 Kudos