Menambahkan pengaturan item kustom

Di Microsoft Fabric, pengaturan item adalah bagian dari informasi yang terkait dengan item tertentu. Mereka termasuk properti yang diperbarui secara berkala dan sumber daya yang terhubung ke objek. Pengaturan ini ditampilkan untuk memberikan informasi metadata item yang diperlukan, sehingga pengguna dapat dengan mudah membaca nilai pengaturan.

Mengubah daftar item

Untuk menambahkan pengaturan item kustom, Pertama-tama Anda harus menyertakan getItemSettings di bawah itemSettings dalam manifes item front-end:

    "itemSettings": {
      "getItemSettings": {
            "action": "getItemSettings"
        },
      "schedule": {
        "itemJobType": "ScheduledJob",
        "refreshType": "Refresh"
      },
      "recentRun": {
        "useRecentRunsComponent": true
      }
    },

Seperti yang ditunjukkan oleh kode sebelumnya, getItemSettings harus menyertakan action string. String ini adalah nama tindakan terkait yang mengembalikan daftar pengaturan item kustom.

Tambahkan tab item kustom

Cuplikan layar berikut menunjukkan contoh penambahan tab item kustom. Tab item kustom ditandai sebagai nomor 1. Iframe yang dimuat setelah pilihan tab ini ditandai sebagai angka 2.

Gambar sebelumnya menampilkan dua tab kustom, yang dapat Anda buat dengan menggunakan kode berikut dalam index.worker.ts file:

workloadClient.action.onAction(async function ({ action, data }) {
    switch (action) {
        case 'getItemSettings': {
            return [
                {
                    name: 'customItemSettings',
                    displayName: 'Custom item Settings',
                    workloadSettingLocation: {
                        workloadName: sampleWorkloadName,
                        route: 'custom-item-settings',
                    },
                    searchTokenMatchesBySection: {
                        'custom search': [
                            'key words for search',
                            'custom item'
                        ],
                    },
                },
                {
                    name: 'customItemSettings2',
                    displayName: 'Custom item Settings2',
                    workloadSettingLocation: {
                        workloadName: sampleWorkloadName,
                        route: 'custom-item-settings2',
                    },
                },
            ];
        }
        default:
            throw new Error('Unknown action received');
    }
});

Kode mengembalikan array item kustom yang ditentukan. Masing-masing meliputi:

• name (string): Pengidentifikasi unik untuk pengaturan.
• displayName (string): String yang ditampilkan, yang harus dilokalkan. (Nama item pertama yang ditampilkan ditandai sebagai nomor 1 di cuplikan layar sebelumnya.)
• workloadSettingLocation (objek):
  • workloadName (string): Nama beban kerja.
  • route (objek): Rute spesifik yang dimiliki oleh tugas. Saat tab pengaturan tertentu dipilih dari pengaturan item, iframe panel dimuat ke area konten sisi kanan untuk memuat rute. (Iframe ditandai sebagai nomor 2 di cuplikan layar sebelumnya.)
• searchTokenMatchesBySection (objek): Objek opsional yang menerima nama bagian sebagai kunci dan array kata kunci sebagai nilai. Kunci dipicu setiap ada kata dari array yang dicari.

Contoh berikut menunjukkan bahwa mulai mengetik salah satu nilai kata kunci (1) memicu nama bagian sebagai opsi hasil (2). Memilih opsi ini akan membuka tab kustom yang sesuai (3). Bidang ini selaras dengan, dan dapat digunakan untuk, pelokalan.

Menentukan rute iframe

Untuk memuat iframe, tentukan komponen lalu tambahkan ke rute aplikasi.

Definisi komponen

export function CustomItemSettings2() {
    return (
      <div>
        You can have additional tabs for item settings.
      </div>
    );
  }

Contoh router

export function App({ history, workloadClient }: AppProps) {
    return <Router history={history}>
        <Switch>
            ...
            <Route path="/custom-item-settings">
                <CustomItemSettings workloadClient={workloadClient}  />
            </Route>
            <Route path="/custom-item-settings2">
                <CustomItemSettings2 />
            </Route>
        </Switch>
    </Router>;
}

Mengkustomisasi halaman Tentang

Cuplikan layar berikut menunjukkan contoh pengaturan kustom untuk halaman Tentang . Tab yang saat ini dipilih di pengaturan adalah tab Tentang , yang ditandai dalam bingkai hitam. Tab yang dimuat muncul di sisi kanan. Pengaturan default (nama, deskripsi, lokasi, dan detail) muncul di bagian atas. Di bawah bagian default adalah iframe untuk bagian Tentang kustom, yang ditandai dalam bingkai merah.

Item halaman Tentang mendukung penambahan konten khusus beban kerja dengan menggunakan tampilan hibrid (pengaturan default About dan iframe kustom beban kerja). Untuk mencapainya, Anda harus menambahkan pengaturan item kustom lainnya:

workloadClient.action.onAction(async function ({ action, data }) {
    switch (action) {
        case 'getItemSettings': {
            return [
                {
                    name: 'about',
                    displayName: 'About',
                    workloadSettingLocation: {
                        workloadName: sampleWorkloadName,
                        route: 'custom-about',
                    },
                    workloadIframeHeight: '1000px'
                },
                ...
            ];
        }
        default:
            throw new Error('Unknown action received');
    }
});

Kode sebelumnya meliputi:

• name : Harus didefinisikan sebagai about.
• displayName : Harus didefinisikan sebagai About.
• route : Diperlukan untuk komponen Tentang kustom yang dimuat ke dalam iframe, seperti yang ditunjukkan pada gambar.
• workloadIframeHeight: Disediakan sebagai string, dalam piksel. Jika Anda tidak mengatur tinggi iframe, 102vh diatur sebagai nilai default.