วิธีการ: เพิ่มการตั้งค่าแบบกําหนดเองให้กับรายการ

การตั้งค่าแบบกําหนดเองถูกเปิดใช้งานแล้วในชุดเครื่องมือการขยายแฟบริค ผู้ปฏิบัติงานจะลงทะเบียนแท็บการตั้งค่าแบบกําหนดเองสําหรับแต่ละประเภทรายการโดยอัตโนมัติด้วยรูปแบบ /{ItemType}Item-settings/{itemId}เส้นทาง

ขั้นตอนการใช้งาน

1. สร้างคอมโพเนนต์การตั้งค่าของคุณ

สร้างคอมโพเนนต์ React สําหรับอินเทอร์เฟซการตั้งค่าของคุณ:

แฟ้ม: Workload/app/items/[YourItem]Item/[YourItem]ItemSettings.tsx

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { Field, Input, Button } from '@fluentui/react-components';
import { getWorkloadItem, saveWorkloadItem } from '../../../controller/ItemCRUDController';

export function YourItemSettings(props) {
    const { workloadClient } = props;
    const { itemObjectId } = useParams();
    const [item, setItem] = useState();
    const [settings, setSettings] = useState({ apiEndpoint: '', maxRetries: 3 });

    // Load item and initialize settings
    useEffect(() => {
        // Load item data and populate form
    }, [itemObjectId]);

    const handleSave = async () => {
        // Update item definition with new settings
        const updatedItem = { ...item, definition: { ...item.definition, settings } };
        await saveWorkloadItem(workloadClient, updatedItem);
    };

    return (
        <div className="item-settings">
            <Field label="API Endpoint">
                <Input value={settings.apiEndpoint} onChange={(e, data) => 
                    setSettings(prev => ({ ...prev, apiEndpoint: data.value }))} />
            </Field>
            <Button appearance="primary" onClick={handleSave}>Save Settings</Button>
        </div>
    );
}

2. เพิ่มการกําหนดเส้นทาง

เพิ่มเส้นทางการตั้งค่าในแอปของคุณ:

แฟ้ม: Workload/app/App.tsx

import { YourItemSettings } from './items/YourItemItem/YourItemSettings';

// Add route
<Route path="/YourItemItem-settings/:itemObjectId" element={<YourItemSettings {...props} />} />

3. อัปเดตโมเดลข้อมูลของคุณ

ขยายคําจํากัดความของรายการของคุณเพื่อรวมการตั้งค่า:

แฟ้ม: Workload/app/items/[YourItem]Item/[YourItem]ItemDefinition.ts

export interface YourItemDefinition {
    message?: string;
    settings?: {
        apiEndpoint: string;
        maxRetries: number;
    };
}

4. ต่อสายปุ่มการตั้งค่า

ตรวจสอบให้แน่ใจว่า Ribbon ของคุณเปิดกล่องโต้ตอบการตั้งค่า:

import { createSettingsAction } from '../../controls/ItemEditor';
import { callOpenSettings } from '../../controller/SettingsController';

const handleSettings = () => callOpenSettings(workloadClient, item, 'customItemSettings');
const actions = [createSettingsAction(handleSettings, 'Settings')];

ประเด็นสําคัญ

• การกําหนดค่าผู้ปฏิบัติงาน: การตั้งค่าแบบกําหนดเองจะเปิดใช้งานตามค่าเริ่มต้น
• รูปแบบเส้นทาง: ทําตาม /{ItemType}Item-settings/{itemId} รูปแบบ
• การคงอยู่ของข้อมูล: ใช้เพื่อ saveWorkloadItem() บันทึกการตั้งค่า
• ความสอดคล้องของ UI: ใช้ส่วนประกอบ Fluent UI เพื่อการจัดรูปแบบที่สอดคล้องกัน

คู่มือที่เกี่ยวข้อง

• สร้างรายการผ้า
• สร้างเพจเกี่ยวกับแบบกําหนดเอง
• คําจํากัดความของรายการร้านค้า