MallaDocs
HomeQuickstartOpen Malla

Write expressions in the Studio

Open the Expression Studio, check the result for every item, apply it and ask the AI to write or fix an expression.

User guideNew
Intermediate15 min

You will build: A product card that shows "Sold out" when the stock is 0 and the price in euros otherwise, written and checked in the Expression Studio

Read first: Start a blogBindings and expressions

In this tutorial you write an expression in the Expression Studio, a full editor for one expression. You see the data the expression can read, the result for every item of a list, and each step of the calculation. You can also ask the AI to write, fix or explain an expression. The example is a product list that shows "Sold out" or a price in euros.

Write expressions in the StudioVideo coming soon. The written steps below cover everything.
Write expressions in the Studio· 6 min

What the Studio is

Every field that takes an expression has a small inline editor. That is enough for item.name. For longer expressions, open the Studio. It docks under the canvas, so the page stays visible while you work.

The Studio has four zones:

ZoneWhereWhat it does
ScopeLeftThe data the expression can read, such as item, vars and queries. Click a name to insert it.
EditorCenterThe expression, with autocomplete, help for function parameters and hover docs.
ReferenceRightEvery function and method, your formulas and examples. Click one to insert it.
ResultBottomThe value, the steps of the calculation, and one result per sample.

Your changes stay a draft until you press Apply. Nothing changes on the page before that.

Prepare a product list

  1. Create a Products collection

    Open the CMS workspace and create a collection named Products with three fields: Name (text), Price (number) and Stock (number). Add a few items, and give at least one of them a stock of 0.

  2. List the products

    On the canvas, insert a Collection list from the CMS group and set Collection to Products. Add two texts to the Item frame. Bind the first one to Name. Leave the second one for the price.

Open the Studio

There are three ways to open the Studio:

  • In the inspector, press Open in Studio (the expand icon) next to a binding.
  • Press the expand icon at the end of any expression input. It is there in queries, workflow steps and formulas too.
  • Put the cursor in an expression input and press ⌘⇧E.

  1. Bind the price text

    Select the second text. In Typography, press on the Content row and pick Price. The text now shows item.price.

  2. Open it in the Studio

    In the Expression popover, press Open in Studio. The Studio opens under the canvas with item.price in the editor. The inline input shows Editing in Studio and is read-only until you close the Studio.

Write the expression

  1. Look at the scope

    In Scope, open item. You see the fields of the current product, with their values and types. The paths the expression reads are listed under Reads.

  2. Start the condition

    Clear the editor. In Scope, click stock under item to insert item.stock. Then type === 0 ? 'Sold out' :.

  3. Insert a function from the reference

    In Reference, open the Functions tab, search for currency and click formatCurrency. The Studio inserts the call with a place for each parameter. Press ⇥ to move from one parameter to the next, and fill them in:

    js
    item.stock === 0 ? 'Sold out' : fn.formatCurrency(item.price, 'EUR', 'de-DE')

  4. Format it

    Press Format, or ⇧⌥F. The Studio spreads the expression over several lines when it is long. It never changes what the expression does.

Check the result

The Result zone has three tabs.

  • Result shows the value for the current sample, its type and the type the field expects. An error shows its position, and the editor underlines the same place.
  • Explain shows each part of the expression and its value, step by step. Hover a row to highlight that part in the editor. Parts that did not run are dimmed, like the other side of ? :.
  • All rows shows one row per sample, with its value and type. Rows with an error or the wrong type are marked. Click a row to switch to that sample.

Samples

A sample is example data for the expression. The Studio finds samples for you:

  • Collection rows. Inside a collection list, each item is a sample, up to 50. The switcher next to item in Scope shows, for example, 2/9. Use the arrows to go to the next or previous item.
  • Workflow runs. In a workflow step, the last runs from Run in preview are the samples, named Last run, Run −1 and so on. Each one has the steps and input of that run. Run the workflow once before you open the Studio.

Without samples, the Studio uses the data of the page as it is now.

  1. Step through the products

    Press the right arrow next to item until you reach the product with a stock of 0. Result shows "Sold out". For the other products it shows a price such as 12,50 €.

  2. Compare all products

    Open All rows. You see every product with its value. Every row should be a string.

  3. See how it works

    Open Explain. The condition item.stock === 0 shows true or false, and the branch that did not run is dimmed.

Checkpoint

All rows shows "Sold out" for the product with no stock and a euro price for every other product, with no row marked.

Apply or close

  1. Apply

    Press Apply or ⌘↵. The binding is saved and the canvas shows the new text on every card. You can undo it like any other change, with ⌘Z.

  2. Close

    Press ✕ or Esc to close the Studio. If you have changes that are not applied, the Studio asks first: Apply saves them, Discard drops them and Keep editing goes back to the Studio. It asks the same question when you open the Studio from another field.

Ask AI

Press Ask AI in the Studio header, or ⌘K in the editor. You can:

  • Write: describe the value in plain words, for example "show 'Sold out' when stock is 0, else the price in euros", and press Write or ⌘↵.
  • Fix error: shown only when the draft has an error. The AI proposes an expression that works.
  • Explain: the AI explains the draft in plain words. The answer shows in the Explain tab.

A proposal shows the changes compared with your draft, and its value for the current sample. Accept puts it in the editor. It is still a draft: check it, then press Apply to save it. Discard drops the proposal.

Keyboard shortcuts

Open and close

Open the Studio from an expression input⌘⇧E
Apply⌘↵
CloseEsc

In the Studio

Next zoneF6
Previous zone⇧F6
Format (in the editor)⇧⌥F
Ask AI (in the editor)⌘K
Next parameter of an inserted function⇥
Done

Your product cards show "Sold out" when a product has no stock and a euro price otherwise. You checked the result for every product before you applied it.

What you learned

  • The Studio opens from Open in Studio, the expand icon on any expression input, or ⌘⇧E.
  • Scope and Reference insert names and functions at the cursor, so you type less.
  • Result, Explain and All rows show what the expression returns for every sample before you apply it.
  • Changes stay a draft until Apply. Ask AI sees field names and types only, never your data.

Read the guides behind this tutorial:

Bindings and expressionsBind any text, attribute, style or visibility to an expression that reads live data.Expression referenceOperators, scope variables, built-in fn functions and methods available in expressions.Collection listsRepeat a template once per item of a query or array, with an empty state and pagination.Client workflowsVisual logic that runs in the browser on clicks, submits, page load and variable changes.