Naar hoofdinhoud gaan

Een component in een andere app gebruiken

Doel​

Je hebt een kaart getekend in de app Products. Je wilt dezelfde kaart in Orders — precies dezelfde, zodat je hem één keer herstelt en beide hersteld zijn.

Eén ding om in te stellen, één keer per app: vink "De componenten van deze app delen" aan op de app die ze tekent. Alles wat die app tekent, wordt dan aangeboden aan elke andere app in de omgeving, in hun paneel Componenten onder Uit andere apps.

Het vakje staat standaard uit, en dat is bewust — de meeste apps zijn geen componentbibliotheken, en een app die per ongeluk publiceert, zou haar half getekende vormen in het palet van iedereen zetten. Je vindt het in Studio-apps → Nieuw, of door een app te selecteren en op Bewerken te drukken; de lijst heeft een kolom die laat zien welke apps delen.

Dit kostte vroeger een extra stap, en nu niet meer

Er was een aparte lijst Studio-componenten in de makerportal, en een knop Naar gedeeld verplaatsen die een component uit de app waarin je het tekende haalde en in een eigen record zette. Beide zijn weg. Een component woont waar het is getekend; als je die pagina zoekt, wil je het canvas van de app.

Er een maken​

Vink in de app die je componenten zal bevatten De componenten van deze app delen aan — in het dialoogvenster Nieuw of in Bewerken. Teken dan het onderdeel op haar canvas — naast het scherm, of erop — precies zoals je al het andere tekent. Dan de stap die ertoe doet:

Selecteer wat je hebt getekend en kies Component maken.

Het component krijgt de naam van het object waarvan je het hebt gemaakt, en die naam zien andere apps. Hernoem de laag en het component wordt mee hernoemd. Sla op.

Meer is er niet aan om er een te maken. Het staat nu in het palet van elke andere app.

Het in een andere app plaatsen​

Open de designer van de andere app en kijk naar het paneel Componenten. Onder Uit andere apps vind je elk component dat de andere apps van de oplossing hebben getekend, elk met de app waar het vandaan komt naast de naam — want twee apps kunnen allebei een "Card" hebben, en een lijst die één naam twee keer toont, is een lijst waaruit je niet kunt kiezen.

Sleep er een naar het canvas, of selecteer de rij en druk op Enter. Wat er landt, is een exemplaar: een gewoon exemplaar van een component, dat je precies zo kunt plaatsen, van grootte kunt veranderen en kunt overschrijven als een component dat je zelf hebt getekend.

Sla op.

Het één keer wijzigen​

Open de app die het component heeft getekend, wijzig het en sla op.

Open nu de app die het heeft geplaatst. Die meldt dat de kopie is bijgewerkt, en de wijziging is er. Sla die app op om haar te behouden. Die tweede keer opslaan is bewust: naar iemands tekening schrijven omdat die haar opende, is niet iets wat een designer mag doen.

Waarom je app een kopie bewaart​

Open het document van de plaatsende app en je vindt er de knooppunten van het component in, onder id's die beginnen met sc_, plus een definitie die vermeldt uit welke app het komt, hoe het daar heet en een revisie.

Die kopie is geen vergissing, en je onderhoudt haar nooit. Ze levert twee dingen op:

  • Je app is op zichzelf compleet. Ze valideert, wordt verpakt, geïmporteerd en gecompileerd op eigen kracht. Een component dat niet meereisde, laat een app achter die achterloopt, niet een die niet rendert.
  • Wat is geleverd, is wat wordt gerenderd. Een app die haar componenten ophaalde wanneer iemand haar opende, zou dat niet kunnen beloven.

De kopie van het origineel staat links van je tekening, op een "plank", en verschijnt nooit op een scherm: het is een definitie, geen inhoud. Alleen de exemplaren die je hebt geplaatst, worden gerenderd.

Delen uitzetten​

Vink het vakje uit en de componenten van de app worden niet meer aangeboden. Apps die er al een hadden geplaatst, houden het: hun gekoppelde kopie blijft precies zoals ze was, bevroren op de revisie die ze kopieerden. Dat is hetzelfde wat er gebeurt wanneer een app wordt verwijderd, en om dezelfde reden — een app mag geen deel van haar scherm verliezen omdat iemand anders een instelling wijzigde.

Wat die apps verliezen, zijn updates: niets brengt hun kopie meer bij, omdat het palet niets meer heeft om haar mee te vergelijken.

Het ene component dat je niet elders kunt gebruiken​

Een component dat de schermtoestand van zijn eigen app leest. De rij staat in het paneel van de andere app, grijs, met de expressie erbij — bijvoorbeeld state.showCard.

Het is geen willekeurige regel. Je component zou terechtkomen op schermen die zo'n toestandsveld niet hebben, dus de expressie zou een afhankelijkheid zijn van iets wat misschien niet bestaat, en mislukken op elk scherm waar het ontbreekt. Bied wat het nodig heeft aan als eigenschap, en de app die het plaatst, vult die in — zie Een ontwerp hergebruiken met componenten.

Binnen de app die het heeft getekend, werkt hetzelfde component precies zoals altijd. De beperking gaat over het oversteken van de grens, en je merkt haar precies één keer, op de plek waar ze kan worden uitgelegd.

Er een verwijderen​

Verwijder het component op het canvas van de app die het heeft getekend, en druk op Opslaan.

Als andere apps het plaatsen, wordt het je eerst gevraagd, en de vraag noemt ze. Het verwijderen haalt het ook uit die apps — het alternatief is ze een kaart laten tekenen die niemand kan openen, omdat het palet haar niet meer aanbiedt en geen designer erbij kan.

Annuleren schrijft niets, aan geen van beide kanten. Je canvas blijft precies zoals het is, inclusief de verwijdering, dus de weg terug is Ongedaan maken.

Probeer het​

Importeer het voorbeeld studio-shared-components. Het bevat twee apps: Products, dat een Stat card tekent, en Orders, dat die plaatst. Wijzig de kaart in Products, sla op en open Orders.

Gerelateerd​