Skapa ett nytt fabric-objekt

Den här omfattande guiden visar hur du skapar anpassade objekt i Microsoft Fabric med hjälp av Verktyget för utökningsbarhet. Du kan välja mellan två metoder baserat på din inställnings- och upplevelsenivå.

Förutsättningar

Kontrollera att du har följande innan du skapar ett anpassat objekt:

✅ Slutfört installationsguiden och har en fungerande utvecklingsmiljö
✅ Din arbetsbelastning körs lokalt och är tillgänglig i Fabric
✅ Kunskaper om TypeScript och React (för anpassning)

Välj din metod

🤖 AI-Assisterat angreppssätt (rekommenderas för nybörjarutvecklare)

Använd GitHub Copilot för att vägleda dig genom hela processen interaktivt. Perfekt för:

Utvecklare som är nya i Fabric Extensibility Toolkit
Lära dig plattformsmönster och metodtips
Få förklaringar och vägledning när du arbetar

🛠️ Manuell skriptmetod (rekommenderas för erfarna utvecklare)

Använd det automatiserade PowerShell-skriptet för snabb installation. Perfekt för:

Utvecklare som är bekanta med verktygslådans struktur
Skapa flera objekt effektivt
Produktionsarbetsflöden och automatisering

🤖 AI-assisterat föremålsskapande

Komma igång med GitHub Copilot

GitHub Copilot kan vägleda dig genom att skapa ett komplett anpassat Fabric-objekt enligt alla bästa praxis. AI:n förstår utökningsverktygets mönster och hjälper dig att implementera dem på rätt sätt.

Exempelfrågor som fungerar

Här är beprövade frågor som hjälper dig att komma igång med att skapa objekt:

Skapande av grundläggande objekt:

@fabric create a new item called MyDataReport that shows data analysis reports

Specifika krav:

@fabric create a custom item for managing data pipelines with these features:
- Pipeline configuration interface
- Status monitoring dashboard  
- Error handling and retry logic

Komplext objekt med OneLake-integrering:

@fabric create an item called DataExplorer that:
- Browses OneLake files in the left panel
- Shows file preview in the center
- Saves user preferences and settings

Typisk AI-assisterad process

Ai-assisterad metod följer det här iterativa mönstret:

1. Inledande planeringsfas

AI analyserar dina krav
Föreslår objektstruktur och komponenter
Skapar en utvecklingsplan med todos

2. Komponentgenerering

Skapar mönstret med 4 filer (Definition, Redigerare, Tom, Menyfliksområde)
Implementerar rätt TypeScript-gränssnitt
Konfigurerar Fluent UI-komponenter

3. Funktionsimplementering

Lägger till dina specifika funktioner
Integrerar med Fabric API:er
Implementerar korrekt felhantering

4. Testning och förfining

Testar objektet i utvecklingsmiljön
Åtgärdar eventuella problem som hittats
Optimerar prestanda och användarupplevelse

Arbeta med AI-assistenten

Börja med tydliga krav:

I want to create a [ItemType] item that [primary purpose]. 
The item should have [list key features].
Users should be able to [list main actions].

Iterera och förfina:

The item looks good, but I need to add [specific feature]

How can I integrate this with OneLake storage?

Can you add error handling for when the API is unavailable?

Be om förklaringar:

Explain why you chose this pattern for the ribbon actions

What's the difference between ItemEditor and ItemEditorDefaultView?

Metodtips för AI-samarbete

Var specifik: Ange tydliga krav och kontext
Granska varje steg: Förstå den genererade koden innan du fortsätter
Ställ frågor: Begär förklaringar för mönster som du inte förstår
Testa ofta: Kör och testa objektet efter varje större ändring
Uppföljning: Be om förfiningar och förbättringar

AI-utvecklingsverktyg och -miljö

Den här lagringsplatsen fungerar exceptionellt bra med AI-parprogrammeringsverktyg. Oavsett om du utvecklar lokalt eller i GitHub Codespaces kan du använda GitHub Copilot eller andra AI-assistenter för att påskynda uppgifter som att redigera React-komponenter, uppdatera vägar eller generera testställningar.

Tips/Råd

Den Starter-Kit lagringsplatsen är AI-aktiverad och innehåller GitHub Copilot-instruktioner som hjälper dig att anpassa Hello World-objektet efter dina behov. Andra AI-verktyg (till exempel Anthropic Claude) kan följa samma vägledning, men måste konfigureras för att läsa lagringsplatsens vägledningsfiler eller dokument.

Specifika AI-hjälpområden:

Använd AI för att utkasta objektredigerare/visa komponenter och sedan anpassa till de värd-API-mönster som används i Starter-Kit
Be AI sammanfatta arbetsbelastningsmanifestet och föreslå minimala behörighetsuppsättningar
I Codespaces är Copilot tillgängligt i webbläsaren eller VS Code-skrivbordet. hålla utvecklingsservern igång för att se ändringar direkt

Tips/Råd

Om du är intresserad av att se vad andra skapar öppnar du Extensibility Samples och distribuerar det till din miljö. Där hittar du omfattande objekttyper som hjälper dig att komma igång.

Snabb iteration och felsökning

Utökningsramverket är utformat för snabb utveckling när du använder AI-hjälp:

När utvecklingsservern och DevGateway körs reflekteras kodändringar i din app omedelbart när du öppnar objektet i Fabric
Du kan felsöka genom att använda webbläsarens utvecklingsverktyg medan arbetsbelastningen finns i Fabric iFrame.
Iterera snabbt på användargränssnitt, vägar och manifestkonfiguration och verifiera beteendet från slutpunkt till slutpunkt på din Infrastruktur-arbetsyta
AI-verktyg kan hjälpa dig att identifiera och åtgärda problem i realtid när du utvecklar

Förväntad tidslinje

Enkelt objekt: 30–60 minuter med AI-vägledning
Komplext objekt: 1–3 timmar med flera iterationer
Avancerat objekt: Halv dag med omfattande anpassning

🛠️ Manuellt skriptat tillvägagångssätt

Använda CreateNewItem.ps1-skriptet

Den manuella metoden använder ett automatiserat PowerShell-skript som kopierar HelloWorld-objektmallen och konfigurerar den för ditt nya objekt.

Snabbstart

Gå till skriptkatalogen:
```
cd scripts\Setup
```

Kör skriptet för att skapa:

.\CreateNewItem.ps1 -ItemName "MyCustomItem"

Vad skriptet gör

Automatisk skapande av fil:

✅ Kopierar alla 4 kärnkomponentfiler från HelloWorld-mallen
✅ Byter namn på filer så att de matchar objektnamnet
✅ Uppdaterar alla interna referenser och importer
✅ Skapar manifestfiler (XML- och JSON-konfigurationer)
✅ Kopierar och byter namn på ikontillgångar

Genererad filstruktur:

Workload/app/items/MyCustomItemItem/
├── MyCustomItemDefinition.ts         # Data model and interfaces
├── MyCustomItemEditor.tsx            # Main editor component
├── MyCustomItemEditorEmpty.tsx       # First-time user experience
├── MyCustomItemEditorRibbon.tsx      # Action buttons and toolbar
└── MyCustomItem.scss                 # Styling

Workload/Manifest/items/MyCustomItem/
├── MyCustomItemItem.xml              # Item type definition
└── MyCustomItemItem.json             # Item configuration

Workload/Manifest/assets/images/
└── MyCustomItemItem-icon.png         # Item icon

Nödvändiga manuella steg

När du har kört skriptet måste du utföra följande manuella konfigurationssteg:

1. Uppdatera miljöfiler 🚨 KRITISK

Lägg till det nya objektet i variabeln ITEM_NAMES i ALLA miljöfiler:

Filer som ska uppdateras:

Workload\.env.dev
Workload\.env.test
Workload\.env.prod

Ändra från:

ITEM_NAMES=HelloWorld

Ändra till:

ITEM_NAMES=HelloWorld,MyCustomItem

⚠️ Utan det här steget visas inte objektet i arbetsbelastningen!

2. Uppdatera konfigurationen av Product.json

Lägg till objektkonfigurationen i Workload\Manifest\Product.json:

{
  "items": [
    {
      "name": "HelloWorldItem",
      // ... existing config
    },
    {
      "name": "MyCustomItemItem",
      "displayName": "My Custom Item",
      "description": "Description of what your item does",
      "contentType": "MyCustomItem",
      "configurationSections": []
    }
  ]
}

3. Lägg till lokaliseringssträngar

Uppdatera översättningsfiler i Workload\Manifest\assets\locales\:

I en-US.json (och andra nationella filer):

{
  "MyCustomItemItem": {
    "displayName": "My Custom Item",
    "description": "Description of your custom item"
  }
}

4. Lägg till routningskonfiguration

Uppdatera Workload\app\App.tsx för att inkludera routning för det nya objektet:

// Add import
import { MyCustomItemEditor } from "./items/MyCustomItemItem/MyCustomItemEditor";

// Add route in the Routes section
<Route path="/MyCustomItemItem-editor" element={<MyCustomItemEditor {...props} />} />

Verifieringssteg

När du har slutfört alla manuella steg:

Skapa projektet:
```
npm run build
```
Starta om utvecklingsservern:
```
.\scripts\Run\StartDevServer.ps1
```
Test i nätverksstruktur:
- Navigera till din arbetsbelastning i Fabric
- Kontrollera att den nya objekttypen visas i dialogrutan för att skapa
- Skapa en instans och verifiera att den läses in korrekt

Metodtips och riktlinjer

Varför inte byta namn på HelloWorld?

HelloWorld-objektet fungerar som referensmallen som tar emot regelbundna uppdateringar från Microsoft. Viktiga orsaker till att den inte ändras:

Uppdateringar och förbättringar: Microsoft uppdaterar regelbundet HelloWorld med nya funktioner, felkorrigeringar och metodtips
Integreringstestning: HelloWorld ser till att din miljö fungerar korrekt
Referensdokumentation: Den fungerar som livedokumentation för implementeringsmönster
Bakåtkompatibilitet: Uppdateringar upprätthåller kompatibilitet med befintliga anpassningar

Rekommenderat arbetsflöde

Behåll HelloWorld Orörd: Använd den som referens och testobjekt
Skapa nya objekt: Använd skriptet eller AI-hjälpen för att skapa separata objekt
Regelbundna uppdateringar: Hämta regelbundet uppdateringar från baslagringsplatsen
Sammanslagningsmönster: Tillämpa nya mönster från uppdaterade HelloWorld på dina anpassade objekt

Metodtips för objektutveckling

Komponentarkitektur:

✅ Följ 4-komponentmönstret (Definition, Redigerare, Tom, Menyfliksområde)
✅ Använd ItemEditor-container för konsekvent layout och beteende
✅ Implementera rätt laddningstillstånd och felhantering
✅ Följ designmönster för Fluent-användargränssnittet

Datahantering:

✅ Använd saveWorkloadItem() för objekt med komplexa data
✅ Använd getWorkloadItem() för inläsning med standardinställningar för återställning
✅ Implementera rätt TypeScript-gränssnitt i definitionsfilen
✅ Hantera odefinierade/tomma tillstånd på ett smidigt sätt

Användarupplevelse:

✅ Ge tydliga tomma tillstånd för förstagångsanvändare
✅ Använd rätt inläsningsindikatorer
✅ Implementera användbara felmeddelanden
✅ Följ Fabric-designmönster och tillgänglighetsriktlinjer

Prestandaöverväganden

Fördröjd laddning: Läs bara in data när det behövs
Effektiva uppdateringar: Använd React-mönster för att minimera återgivningar
OneLake Integration: Använd createItemWrapper() för korrekt omfattning
Felgränser: Implementera korrekt felhantering i hela

Nästa steg

När objektet har skapats:

Anpassa datamodellen: Uppdatera definitionsfilen med dina specifika gränssnitt
Implementera kärnfunktioner: Skapa de viktigaste funktionerna i redigeringskomponenten
Designa tomt tillstånd: Skapa en engagerande förstagångsanvändarupplevelse
Konfigurera åtgärder: Konfigurera lämpliga menyfliksåtgärder för arbetsflödet
Testa noggrant: Kontrollera alla funktioner i utvecklingsmiljön
Förbered för produktion: Följ publiceringsguiden när du är klar

Felsökning

Objektet visas inte i arbetsbelastningen:

✅ Kontrollera ITEM_NAMES i alla .env-filer
✅ Verifiera Product.json-konfiguration
✅ Starta om utvecklingsservern

Byggfel:

✅ Kontrollera TypeScript-gränssnitt i definitionsfilen
✅ Kontrollera att alla importer är korrekta
✅ Kontrollera att routningen är korrekt konfigurerad

Körningsfel:

✅ Kontrollera webbläsarkonsolen för detaljerade felmeddelanden
✅ Verifiera API-integrering och autentisering
✅ Testa med förenklade data först

Ytterligare resurser

Glad kodning! 🚀

Feedback

Var den här sidan till hjälp?

Last updated on 2025-12-03

Dela via

Skapa ett nytt fabric-objekt

Förutsättningar

Välj din metod

🤖 AI-Assisterat angreppssätt (rekommenderas för nybörjarutvecklare)

🛠️ Manuell skriptmetod (rekommenderas för erfarna utvecklare)

🤖 AI-assisterat föremålsskapande

Komma igång med GitHub Copilot

Exempelfrågor som fungerar

Typisk AI-assisterad process

Arbeta med AI-assistenten

Metodtips för AI-samarbete

AI-utvecklingsverktyg och -miljö

Snabb iteration och felsökning

Förväntad tidslinje

🛠️ Manuellt skriptat tillvägagångssätt

Använda CreateNewItem.ps1-skriptet

Snabbstart

Vad skriptet gör

Nödvändiga manuella steg

1. Uppdatera miljöfiler 🚨 KRITISK

2. Uppdatera konfigurationen av Product.json

3. Lägg till lokaliseringssträngar

4. Lägg till routningskonfiguration

Verifieringssteg

Metodtips och riktlinjer

Varför inte byta namn på HelloWorld?

Rekommenderat arbetsflöde

Metodtips för objektutveckling

Prestandaöverväganden

Nästa steg

Felsökning

Ytterligare resurser

Feedback

Ytterligare resurser