Skip to main content

Create a Studio App

Goal​

Create a Studio app — an application you draw, rather than one built from a table's fields.

Doing it end to end

If this is your first one, Build your first Studio app walks the whole way through — a table, a screen, a list that came from it, a toolbar and a drawer that writes a record back — in about forty minutes.

What a Studio app is​

The platform has three things you draw, and they are not the same thing.

  • A report is paper. It has pages, it prints the same way every time, and what it produces is a picture of a document.
  • A dashboard is numbers. You draw the panels and mark where each widget goes, and the platform fills those spaces with its own live charts and grids.
  • A screen is the application itself. Everything you draw becomes a real part of the page — its text can be selected, its boxes are real boxes, and later its inputs will take a caret and its buttons will do something.

So you reach for a screen when what you want is not a form over one table and not a page of numbers, but a piece of the application laid out the way you want it.

An app runs — two ways

What you draw runs for real, and there are two ways to reach it. It appears on its own in the Shell's app list, beside your model-driven apps, with nothing around it but the platform's own top bar — see Run a Studio app on its own. And it can be placed inside a model-driven app's navigation, which is how a designed landing page sits above a list of records — see Open a Studio app from a model-driven app.

Prerequisites​

  • You are signed in as a maker, with an environment and a solution selected.

Steps​

  1. Open your solution and choose Screens.
  2. Press New.
  3. Type a display name — what you will see in this list. The logical name fills itself in as you type; it is prefixed with your publisher's prefix.
  4. Optionally, describe what the screen is for. This is what somebody else reads when they are deciding whether this is the screen they want.
  5. Choose what this app is — see the three kinds below. Leave it on Application unless you are drawing a page of a model-driven app or a portal.
  6. Optionally, pick an icon. It is the picture on this app's tile in the app list, from the same set every icon in the platform comes from. Leave it and the tile shows a window, which is what a drawn app looks like everywhere else — but a row of tiles that are all the same window is a row in which nothing is findable, so it is worth ten seconds.
  7. Press Save.
  8. With the screen selected, press Design to open the canvas — see Draw a Studio app.

The three kinds of app​

Every app says what it is for, and that decides where it can be used. It is the first thing to get right, because the other two settings depend on it.

What it isWhere it appears
ApplicationSomething people open. The default.The app list — and it can also be a page inside a model-driven app
Page of an appA screen that belongs inside a model-driven appThat app's navigation, and nowhere else. It gets no tile of its own
PortalA screen published to a web address for people who have not signed inIts portal's address, and nowhere else

A portal is the one that genuinely cannot run anywhere else, and that is why the choice is refused rather than merely discouraged. A portal screen reads its data through Custom APIs (api:…), which is how a portal reads and which the Platform Shell deliberately does not allow — so a portal drawing placed in a model-driven app would be a page that failed every time somebody opened it. Pick Portal and the app stops being offered to model-driven apps and starts being offered on the Portals page; pick anything else and a portal will not publish it.

Changing an app's kind later is allowed, and it is checked against what already points at it: you cannot turn a portal's own drawing into an ordinary app while that portal is publishing it.

The two tick boxes​

The New dialog (and Edit) has two boxes, and their defaults point in opposite directions on purpose. They are shown only for an Application: a page lives inside a model-driven app and a portal answers at its own address, so neither has a tile in the app list or a platform bar to hide.

StartsWhat it does
Share this app’s componentsoffEvery other app in this environment can place the components drawn here — see Use a component in another app
Show in the app listonPeople using this environment see this app in the Platform Shell’s app list

Most apps want neither changed: an app is a thing somebody opens, and it keeps its components to itself.

Sharing components is not one of the kinds, deliberately: an ordinary app can lend its parts to another one without being a library — the Studio — Shared Components sample is two apps doing exactly that.

Turn both around and you have a component library — an app whose job is to hold the parts your other apps are built from, and which nobody using the product should be handed a tile for. The Studio — Component Library sample is exactly that.

Unticking Show in the app list hides the tile, not the app. It is still here in the maker portal — that is where you go to un-hide it — and anything that links to one of its screens still opens it: a model-driven app’s navigation, a link on another screen, an address somebody kept. What a person is allowed to open is a permission question, and this is not it.

What you cannot change afterwards​

The logical name. Everything that reaches a screen names it, so renaming one would break each of those references at once and without saying so. The display name and the description can be changed whenever you like.

Where a screen lives​

A screen is a component of your solution, like a form or a view. That means it is versioned, it travels when you export the solution and import it into another environment, and it is removed again if the managed solution that brought it is uninstalled.

There is no export-to-file for a single screen, deliberately: a screen that could be carried around outside a solution is a screen whose environment nobody can reproduce.

Troubleshooting​

  • "…must be lower snake-case and start with the publisher prefix." — the logical name has to begin with your publisher's prefix and use lower-case letters, digits and underscores. Type the display name first and let the logical name fill itself in.
  • "A screen named … already exists in this environment." — that name is taken. Screens are reached by name, so two of them cannot share one.
  • Every screen says "Drawing only". — that is expected in this release. See the note above.