What we will learn
Start with a small order containing Price and Quantity. Give the section a data context, compare relative and symbolic paths, then calculate and display a total with dataFormula.
The video uses the same animated editor, scrolling terminal and live browser as the earlier lessons. Source edits are typed, saved and followed by automatic server reload and an explicit browser refresh. Live input changes update the page immediately.
Follow the recorded example
Use the downloadable orientation project, starting from stages/04_absolute.py. Run uvicorn app:application --reload, then open the printed local address. The teaching host and Pages use released Gramlot 0.3.8 with Python adapter 0.2.12.
The successive files are 04_absolute.py, 04_relative.py, 04_named.py, 04_paths.py and 04_formula.py. They contain exactly the literal declarations executed in the video. Labels contain their inputs; nodeId appears only when we introduce a named symbolic origin.
Resolve a path from its data context
Initially the fields bind to ^order.price and ^order.quantity. Set datapath="order" on their section, then change the local initializers to .price and .quantity and the inputs to ^.price and ^.quantity.
The caret makes the pointer reactive; the leading dot makes the path relative to the enclosing data context. Here .price resolves to order.price. Change Price to 15: both the relative row inside the section and the absolute row outside it show 15. A context controls address resolution; it does not copy values.
Choose a named, form or anchor origin
Add nodeId="orderForm" to the section and put a display outside it using ^#orderForm.price. The symbol finds the named Source node, then resolves price from that node’s order data context. Change Price to 18 and compare the named, relative and absolute displays.
Next establish formId="orderForm" and _anchor=True on the same section. Inside it, ^#FORM.price starts at the nearest form ancestor and ^#ANCHOR.price starts at the nearest marked anchor. FORM and ANCHOR are symbolic origins, not Data keys.
In this example all five displayed paths resolve to order.price. After saving and refreshing, change Price again: the relative, form, anchor, named and absolute rows update together. Nested contexts and changes of origin belong to the full course.
Declare a calculated value
Add order.dataFormula(".total", "price * quantity", price="^.price", quantity="^.quantity", _init=True). The first two positional arguments are the destination and expression. The named arguments connect the expression’s inputs to reactive pointers, and _init requests the first calculation.
The formula writes order.total into Data. A separate heading bound to ^.total displays it. After saving, waiting for automatic reload and refreshing, the initial values 12 and 3 produce 36.
This downloaded teaching host permits inline JavaScript expressions. The generated strict-CSP scaffold uses named Logic instead. Use the appropriate authoring form for your host; the full course explains that execution boundary.
Watch the dependencies update the result
Change Price to 20: the total becomes 60. Change Quantity to 4: it becomes 80. Change Quantity to 5: it becomes 100. Each change updates a Data dependency, the formula writes the new result, and the heading follows its pointer.
These live input edits do not save the Python file, restart the server or refresh the browser. Keep the destination separate from its input values so the formula does not depend on itself.
What we have learned
A data context resolves relative paths. A symbolic path selects an established origin. A dataFormula derives a separate Data value from named reactive inputs. A bound display reads that result without repeating the calculation. The next lesson introduces dataRpc and remote Source.
Your turn
Try it yourself
- Explain why ^.price inside datapath="order" and ^order.price outside it read the same value.
- Establish a named origin with nodeId and read its price from outside the section.
- Compare #FORM and #ANCHOR after establishing both contexts; identify the common Data path in this example.
- Add the positional dataFormula, predict the total, then change Price and Quantity independently.
Check your understanding
Does a relative path identify the same Data value in every container?
Show the answer and expected result
No. It is resolved against the enclosing data context. A symbolic path chooses an origin explicitly. After paths resolve, a formula reacts to changes in its reactive inputs and writes its result at the configured destination.