What we will learn
Request a value with dataRpc, store the response in Data and display it through a pointer. Then request Source with .remote to populate a detail panel. Compare a button click with a reactive product selection.
The video keeps the animated editor, scrolling terminal and live browser used in the previous lessons. Source changes are typed and saved, followed by automatic Uvicorn reload and an explicit browser refresh. The terminal shows the real requests during browser interactions.
Follow the recorded example
Use the orientation examples download and start from stages/05_initial.py. Run uvicorn app:application --reload and open the local address in your browser. The recording uses released Gramlot 0.3.8 and Python adapter 0.2.12.
The successive stages are 05_initial.py, 05_rpc.py and 05_server.py. They contain the exact declarations executed in the video. The initial Page sets demo.price to 100 and binds a Price input to it.
Receive a value with dataRpc
Import endpoint and expose with_tax with @endpoint. This demonstration method multiplies its price argument by 1.22 and returns a rounded number. It accepts the declared keyword argument and **kwargs for additional declaration arguments.
Attach dataRpc("with_tax", result_path=".gross", price="=.price") to the calculation button. The equals pointer samples the price when the call runs. The response is written to demo.gross, and a heading bound to ^.gross displays it.
Initialize .gross to “Not requested yet” so the initial waiting state is visible. After saving and refreshing, click the button: 100 produces 122. Change Price to 200: the existing result remains 122 and no calculation request is sent. Click again to receive 244. The Python file and browser page are unchanged by these live interactions.
Load interface elements with .remote
Import source, initialize .product to lamp and add a selection bound to ^.product. Create a details section and declare details.remote("product_details", product="^.product").
The @source method receives a root argument for building the fragment. Its lamp branch declares a heading and a stock paragraph; the other branch declares the notebook details. This response is Source for the container, rather than a value written to a result_path.
Save, wait for automatic reload and refresh the browser. The initial lamp selection requests and displays the Desk lamp panel. The refresh also restores the initial Price and waiting result because the Page is built again.
Replace the detail panel, preserve the rest
Click Calculate on the server to show 122 again, then select Notebook. The caret pointer makes the product parameter reactive: a new request loads Notebook and “Twelve notebooks in stock.” Select Desk lamp again to load its heading and “Three lamps in stock.”
The Price input, calculation button and returned Data remain in place while the remote container changes. Neither selection edits the Python file or refreshes the whole browser page.
Change one parameter at a time in this demonstration. The documented request rule permits one request in flight per declaration and one waiting trigger; it is not a guarantee that a later change cancels an earlier response.
What we have learned
Choose dataRpc for a value returned into Data. Choose .remote for Source that populates a container. Sampled arguments are read when a call is triggered; reactive arguments can trigger another call. The explicit declarations determine the trigger and where the response goes.
These Python methods require a running server and do not execute in standalone HTML. They are explicitly exposed methods; application authentication, authorization, errors and request timing are covered in the full course. Continue there after these five orientation lessons.
Your turn
Try it yourself
- Start with the Price input, add the endpoint and dataRpc, and verify 100 → 122.
- Change Price to 200 without clicking; explain why the result remains 122, then click to obtain 244.
- Add the remote product panel and switch between Notebook and Desk lamp while keeping a calculation result visible.
- Identify which response enters Data and which supplies Source, then continue with the full course.
Check your understanding
Which operation should you choose for a calculated number, and which for a server-built detail panel?
Show the answer and expected result
Use dataRpc when the server returns a value to put in Data. Use .remote when the server builds Source for a container. Existing bindings can then use the returned value or the declarations in the mounted fragment.