Konfigurera en popover med sidkontroller

Den här övningen fortsätter där du slutade – men flera filterkontroller har lagts till på sidan Review & Nominate i appen. Oakmarks chefer gillar kontrollerna men vill att du samlar dem för ett renare utseende.

Hjälp dem genom att dölja kontrollerna i en popover.

Den här övningen är en del av kursen

Introduktion till AI-appar i Sigma

Visa kurs

Interaktiv övning med praktiskt arbete

Gör teori till handling med en av våra interaktiva övningar

Starta övningen

Den här övningen är en del av kursen

Introduktion till AI-appar i Sigma

SkillTag.level.beginnerSkillTag.label

4.9+

145 reviews

Starta kursen gratis

Kapitel 1 introducerar de grundläggande koncepten bakom att bygga AI-appar i Sigma, med fokus på hur appar integrerar användarinmatning för att driva åtgärdsbaserade arbetsflöden. Stor vikt läggs vid länkade inmatningstabeller, som är ett av de viktigaste byggstenarna i Sigma-appar. Du utforskar hur du skapar länkade inmatningstabeller som visar lagerdata tillsammans med användarangivna värden, vilket möjliggör direkt interaktion med underliggande datamängder. Kapitlet tar också upp rekommendationer för att styra användarinmatning, inklusive hur du kontrollerar vilka datatyper som kan anges och när tabeller ska vara redigerbara. När kapitlet är klart har du en gedigen förståelse för hur du på ett säkert och effektivt sätt samlar in användarinmatning och bevarar dataintegritet i din app.

Exercise 1: Vad är AI-appar?Exercise 2: Utforska en färdig app för lånegodkännanden Exercise 3: En färdig app för befordran av lånehandläggare Exercise 4: Berika befintliga data med länkade inmatningstabeller Exercise 5: Förstå länkade inmatatabeller Exercise 6: Skapa en länkad inmatningstabell Exercise 7: Registrera nomineringar för befordran Exercise 8: Testa beteendet hos länkade indatatabeller Exercise 9: Styra datainmatning i länkade indatatabeller Exercise 10: Hantera redigeringar i lånehandläggarens inmatningstabell

I kapitel 2 lär du dig att göra dina AI-appar mer interaktiva och responsiva med hjälp av modaler och åtgärdssekvenser. Modaler låter dig visa fokuserade popup-fönster i din app, vilket ger användarna tillgång till ytterligare information eller ett utrymme för mer detaljerad inmatning utan att belasta huvudgränssnittet. Du ser hur modaler kan förbättra användbarheten och vägleda användare genom specifika uppgifter. Kapitlet introducerar också åtgärdssekvenser, som gör att appar kan svara dynamiskt på användaråtgärder som att klicka på en knapp eller välja en tabellrad. Du lär dig att utlösa flera effekter från en enda interaktion, vilket hjälper till att automatisera arbetsflöden och effektivisera användarupplevelsen. Tillsammans ger modaler och åtgärdssekvenser dig kraftfulla verktyg för att bygga appar som känns intuitiva, interaktiva och målinriktade.

Exercise 1: Använda modaler för att fånga beslut och användarinmatning Exercise 2: Skapa en modal för att registrera nomineringar till befordran Exercise 3: Använda åtgärdssekvenser för apparbetsflöden Exercise 4: Förstå grundläggande aktionssekvenser Exercise 5: Skapa en åtgärdssekvens för att öppna en modal Exercise 6: Utlösa att en modal öppnas och stängs Exercise 7: Fylla modaler med kontrollvärden Exercise 8: Fylla en modal med lånehandläggar-ID:n Exercise 9: Logga nomineringar med en åtgärdssekvens Exercise 10: Lägga till villkorliga åtgärdssekvenser Exercise 11: Förhindra dubbla nomineringar

Kapitel 3 fokuserar på att förfina användargränssnittet och den övergripande upplevelsen av dina AI-appar. Du börjar med att lära dig om popovers – ett mångsidigt UI-element som används för att dölja filtermenyer eller visa kontextuell information endast när det behövs. Det håller apparna rena och ger samtidigt användarna enkel tillgång till kontroller och detaljer. Kapitlet utforskar också en rad design- och organisationsfunktioner som förbättrar både användbarhet och visuell tilltalning. Du lär dig att använda navigeringsknappar, avdelare och flikcontainrar för att strukturera innehåll och guida användare genom appen på ett tydligare sätt. När kapitel 3 är klart förstår du hur genomtänkta layout- och designval kan göra dina AI-appar mer intuitiva, välpolerade och trevliga att använda.

Exercise 1: Använda popovers för att förenkla appens gränssnitt Exercise 2: Konfigurera en popover med sidkontroller

Aktuell övning

Exercise 3: Använda knappar för navigering och interaktion Exercise 4: Lägga till en knapp för att rensa filter i ett popover-fönster Exercise 5: Lägga till UI- och layoutelement för organisation Exercise 6: Städa upp appen för befordran av låneofficerare Exercise 7: Allt på plats Exercise 8: Avslutning