|
| 1 | +from starlette.requests import Request |
| 2 | + |
| 3 | +from shiny import App, Inputs, Outputs, Session, reactive, render, ui |
| 4 | +from shiny.bookmark import BookmarkState |
| 5 | + |
| 6 | + |
| 7 | +# App UI **must** be a function to ensure that each user restores their own UI values. |
| 8 | +def app_ui(request: Request): |
| 9 | + return ui.page_fluid( |
| 10 | + ui.markdown( |
| 11 | + "Directions: " |
| 12 | + "\n1. Change the radio buttons below" |
| 13 | + "\n2. Refresh your browser." |
| 14 | + "\n3. Only the first radio button will be restored." |
| 15 | + "\n4. Check the console messages for bookmarking events." |
| 16 | + ), |
| 17 | + ui.hr(), |
| 18 | + ui.input_radio_buttons( |
| 19 | + "letter", |
| 20 | + "Choose a letter (Store in Bookmark 'input')", |
| 21 | + choices=["A", "B", "C"], |
| 22 | + ), |
| 23 | + ui.input_radio_buttons( |
| 24 | + "letter_values", |
| 25 | + "Choose a letter (Stored in Bookmark 'values' as lowercase)", |
| 26 | + choices=["A", "B", "C"], |
| 27 | + ), |
| 28 | + "Selection:", |
| 29 | + ui.output_code("letters"), |
| 30 | + ) |
| 31 | + |
| 32 | + |
| 33 | +def server(input: Inputs, output: Outputs, session: Session): |
| 34 | + |
| 35 | + # Exclude `"letter_values"` from being saved in the bookmark as we'll store it manually for example's sake |
| 36 | + # Append or adjust this list as needed. |
| 37 | + session.bookmark.exclude.append("letter_values") |
| 38 | + |
| 39 | + lowercase_letter = reactive.value() |
| 40 | + |
| 41 | + @reactive.effect |
| 42 | + @reactive.event(input.letter_values) |
| 43 | + async def _(): |
| 44 | + lowercase_letter.set(input.letter_values().lower()) |
| 45 | + |
| 46 | + @render.code |
| 47 | + def letters(): |
| 48 | + return str( |
| 49 | + [ |
| 50 | + input.letter(), |
| 51 | + lowercase_letter(), |
| 52 | + ] |
| 53 | + ) |
| 54 | + |
| 55 | + # When the user interacts with the input, we will bookmark the state. |
| 56 | + @reactive.effect |
| 57 | + @reactive.event(input.letter, lowercase_letter, ignore_init=True) |
| 58 | + async def _(): |
| 59 | + await session.bookmark() |
| 60 | + |
| 61 | + # Before saving state, we can adjust the bookmark state values object |
| 62 | + @session.bookmark.on_bookmark |
| 63 | + async def _(state: BookmarkState): |
| 64 | + print("Bookmark state:", state.input, state.values, state.dir) |
| 65 | + with reactive.isolate(): |
| 66 | + state.values["lowercase"] = lowercase_letter() |
| 67 | + |
| 68 | + # After saving state, we will update the query string with the bookmark URL. |
| 69 | + @session.bookmark.on_bookmarked |
| 70 | + async def _(url: str): |
| 71 | + print("Bookmarked url:", url) |
| 72 | + await session.bookmark.update_query_string(url) |
| 73 | + |
| 74 | + @session.bookmark.on_restore |
| 75 | + def _(state: BookmarkState): |
| 76 | + print("Restore state:", state.input, state.values, state.dir) |
| 77 | + |
| 78 | + # Update the radio button selection based on the restored state. |
| 79 | + if "lowercase" in state.values: |
| 80 | + uppercase = state.values["lowercase"].upper() |
| 81 | + # This may produce a small blip in the UI as the original value was restored on the client's HTML request, _then_ a message is received by the client to update the value. |
| 82 | + ui.update_radio_buttons("letter_values", selected=uppercase) |
| 83 | + |
| 84 | + @session.bookmark.on_restored |
| 85 | + def _(state: BookmarkState): |
| 86 | + # For rare cases, you can update the UI after the session has been fully restored. |
| 87 | + print("Restored state:", state.input, state.values, state.dir) |
| 88 | + |
| 89 | + |
| 90 | +# Make sure to set the bookmark_store to `"url"` (or `"server"`) |
| 91 | +# to store the bookmark information/key in the URL query string. |
| 92 | +app = App(app_ui, server, bookmark_store="url") |
0 commit comments