Skip to main content

Use a Component in Another App

Goal​

You drew a card in the Products app. You want the same card in Orders — the same one, so that fixing it once fixes both.

One thing to set up, once per app: tick "Share this app's components" on the app that draws them. Everything it draws is then offered to every other app in the environment, in their Components panel under From other apps.

The box is off by default, and that is deliberate — most apps are not component libraries, and an app that published by accident would put its half-drawn shapes in everybody else's palette. You find it in Studio apps → New, or by selecting an app and pressing Edit; the list has a column showing which apps share.

This used to take an extra step, and does not any more

There was a separate Studio components list in the maker portal, and a Move to shared button that lifted a component out of the app you drew it in and into a record of its own. Both are gone. A component lives where it was drawn; if you are looking for the page, you want the app's canvas.

Make one​

In the app that will hold your components, tick Share this app's components — in the New dialog or in Edit. Then draw the part on its canvas — beside the screen, or on it — exactly as you would draw anything else. Then the step that matters:

Select what you drew and choose Make component.

The component takes the name of the object you made it from, and that name is what other apps see. Rename the layer and the component is renamed with it. Save.

That is the whole of making one. It is now in every other app's palette.

Place it in another app​

Open the other app's designer and look at the Components panel. Under From other apps you will find every component the solution's other apps have drawn, each with the app it came from beside its name — because two apps may both have a "Card", and a list that showed one name twice would be a list you could not choose from.

Drag one onto the canvas, or select the row and press Enter. What lands is an instance: an ordinary component instance, which you can position, resize and override exactly like one you drew yourself.

Save.

Change it once​

Open the app that drew the component, change it, and save.

Now open the app that placed it. It tells you the copy has been brought up to date, and the change is there. Save that app to keep it. That second save is deliberate: writing to somebody's drawing because they opened it is not something a designer gets to do.

Why your app keeps a copy​

Open the placing app's document and you will find the component's nodes in it, under ids beginning sc_, plus a definition carrying which app it came from, what it is called there, and a revision.

That copy is not a mistake, and you never maintain it. It buys two things:

  • Your app is self-contained. It validates, packages, imports and compiles on its own. A component that failed to travel leaves an app that is behind, not one that does not render.
  • What shipped is what renders. An app that fetched its components when somebody opened it could not promise that.

The copy of the original sits off to the left of your drawing, on a "shelf", and never appears on a screen: it is a definition, not content. Only the instances you placed are rendered.

Turning sharing off​

Untick the box and the app's components stop being offered. Apps that had already placed one keep it: their linked copy stays exactly as it was, frozen at the revision they copied. That is the same thing that happens when an app is uninstalled, and for the same reason — an app must not lose part of its screen because somebody else changed a setting.

What those apps lose is updates: nothing brings their copy forward any more, because the palette no longer has anything to compare it against.

The one component you cannot use elsewhere​

A component that reads its own app's screen state. The row is listed in the other app's panel, greyed, naming the expression — for example state.showCard.

It is not an arbitrary rule. Your component would land on screens that have no such state field, so the expression would be a dependency on something that may not exist, failing on whichever screen lacks it. Expose what it needs as a property instead, and the app placing it fills that in — see Reuse a design with components.

Inside the app that drew it, the same component works exactly as it always did. The restriction is about crossing the boundary, and it is felt exactly once, where it can be explained.

Deleting one​

Delete the component on the canvas of the app that drew it, and press Save.

If other apps place it, you are asked first, and the question names them. Deleting it takes it off those apps too — the alternative is leaving them drawing a card nobody can open, since the palette will not offer it again and no designer can reach it.

Cancel writes nothing, on either side. Your canvas is left exactly as it is, deletion included, so the way back is Undo.

Try it​

Import the studio-shared-components sample. It ships two apps: Products, which draws a Stat card, and Orders, which places it. Change the card in Products, save, and open Orders.