Fluxo UIFluxo UIv0.4.1

Variables & Conditional Visibility

Variables are the in-report writable state. They answer the question "which row did the user just click?" — the viewer mutates them; expressions read them. Crucially, nothing inside the viewer mutates parameters. Drills, cell clicks, chart clicks all write to variables. Parameters only change via the parameter panel’s Apply button.

A variable has a scope: global variables live on the report and are writable from anywhere; component variables are declared on a specific component and are only writable from within that component’s subtree. Outside the subtree, reads fall through to the global bucket with the same name (or null).

1 · Global variable + drill-through → conditional visibility

The classic pattern. Clicking a row writes the row into a global variable; a downstream component reads it and toggles visibility.

Orders — click a row to reveal the detail panel

The table’s Drill-through Variable is set to `selectedOrder`. Clicking a row writes the full row object into the variable; the detail panel below checks `!IsEmpty(Variables.selectedOrder)` in styles.visible to appear once a selection exists. Parameters never change from this interaction.

Order
Region
Product
Revenue
ORD-1000EastWater Bottle$689
ORD-1001WestT-Shirt$70
ORD-1002EastT-Shirt$60
ORD-1003WestT-Shirt$357
ORD-1004WestWireless Buds$4,942
ORD-1005WestYoga Mat$470
ORD-1006EastSneakers$261
ORD-1007SouthSneakers$738
ORD-1008WestThrow Pillow$888
ORD-1009NorthSmart Watch$1,392
ORD-1010EastJacket$440
ORD-1011WestSmart Watch$5,073
ORD-1012NorthWater Bottle$492
ORD-1013SouthJeans$949
ORD-1014SouthSneakers$413
ORD-1015EastJeans$540
ORD-1016WestT-Shirt$584
ORD-1017WestDesk Lamp$812
ORD-1018EastWater Bottle$588
ORD-1019SouthWireless Buds$5,895
ORD-1020EastT-Shirt$936
ORD-1021NorthThrow Pillow$296
ORD-1022EastThrow Pillow$779
ORD-1023EastYoga Mat$432
ORD-1024EastCandle Set$71
ORD-1025EastWireless Buds$3,080
ORD-1026SouthRunning Shoes$315
ORD-1027EastCandle Set$728
ORD-1028WestDumbbells$689
ORD-1029SouthJeans$915
ORD-1030EastWireless Buds$3,078
ORD-1031NorthLaptop Pro$3,485
ORD-1032SouthCandle Set$585
ORD-1033SouthThrow Pillow$859
ORD-1034SouthUSB Hub$3,302
ORD-1035SouthWater Bottle$477
ORD-1036WestSmart Watch$1,350
ORD-1037EastWater Bottle$451
ORD-1038WestDumbbells$204
ORD-1039NorthRug 5x8$1,180
ORD-1040EastJeans$1,188
ORD-1041EastDesk Lamp$697
ORD-1042SouthJeans$72
ORD-1043WestCandle Set$500
ORD-1044NorthCandle Set$779
ORD-1045EastCandle Set$1,180
ORD-1046NorthYoga Mat$656
ORD-1047WestT-Shirt$186
ORD-1048EastJacket$1,134
ORD-1049SouthWater Bottle$760
ORD-1050EastSneakers$303
ORD-1051EastCandle Set$122
ORD-1052NorthDesk Lamp$228
ORD-1053EastWater Bottle$402
ORD-1054SouthDumbbells$1,060
ORD-1055WestYoga Mat$526
ORD-1056WestYoga Mat$256
ORD-1057SouthJeans$1,008
ORD-1058WestThrow Pillow$341
ORD-1059SouthSmart Watch$3,780
ORD-1060SouthJeans$122
ORD-1061WestT-Shirt$1,292
ORD-1062WestLaptop Pro$3,729
ORD-1063EastRunning Shoes$392
ORD-1064SouthSneakers$852
ORD-1065EastYoga Mat$37
ORD-1066EastJacket$960
ORD-1067NorthT-Shirt$684
ORD-1068NorthUSB Hub$2,056
ORD-1069SouthRunning Shoes$714
ORD-1070WestRug 5x8$1,037
ORD-1071NorthWater Bottle$600
ORD-1072EastWireless Buds$1,275
ORD-1073WestRunning Shoes$216
ORD-1074EastDesk Lamp$489
ORD-1075WestSmart Watch$2,718
ORD-1076NorthRug 5x8$688
ORD-1077SouthRunning Shoes$90
ORD-1078SouthSneakers$1,501
ORD-1079SouthT-Shirt$336

2 · Component-scoped variables

Two tables, same variable name, independent buckets. Click a row in one — the other is unaffected.

Component-scoped variables

Each table below declares its own `localSelection` variable (scope = component). Drills in one table do NOT leak into the other — the scope walker only writes to the nearest enclosing declaration that knows the name.

North / Order
Product
Revenue
ORD-1009Smart Watch$1,392
ORD-1012Water Bottle$492
ORD-1021Throw Pillow$296
ORD-1031Laptop Pro$3,485
ORD-1039Rug 5x8$1,180
ORD-1044Candle Set$779
ORD-1046Yoga Mat$656
ORD-1052Desk Lamp$228
ORD-1067T-Shirt$684
ORD-1068USB Hub$2,056
ORD-1071Water Bottle$600
ORD-1076Rug 5x8$688
South / Order
Product
Revenue
ORD-1007Sneakers$738
ORD-1013Jeans$949
ORD-1014Sneakers$413
ORD-1019Wireless Buds$5,895
ORD-1026Running Shoes$315
ORD-1029Jeans$915
ORD-1032Candle Set$585
ORD-1033Throw Pillow$859
ORD-1034USB Hub$3,302
ORD-1035Water Bottle$477
ORD-1042Jeans$72
ORD-1049Water Bottle$760
ORD-1054Dumbbells$1,060
ORD-1057Jeans$1,008
ORD-1059Smart Watch$3,780
ORD-1060Jeans$122
ORD-1064Sneakers$852
ORD-1069Running Shoes$714
ORD-1077Running Shoes$90
ORD-1078Sneakers$1,501
ORD-1079T-Shirt$336

3 · Set-variable cell action (buttons / pills)

Cell items can set a variable to an arbitrary expression value. Use this for view-mode toggles or anything that is not a row selection.

Buttons that write to variables

The three rows in the first table are backed by a tiny `modes` datasource. Each row's Label column uses a `set-variable` cell-item that writes the row's key into `viewMode`. The main orders table below has a footer expression that reads `Variables.viewMode` via Switch() and shows the matching aggregate.

Click a mode to switch the footer aggregate

Current mode: revenue

Order
Region
Product
Units
Revenue
Cost
ORD-1000EastWater Bottle13$689$344
ORD-1001WestT-Shirt1$70$32
ORD-1002EastT-Shirt1$60$33
ORD-1003WestT-Shirt5$357$213
ORD-1004WestWireless Buds14$4,942$2,311
ORD-1005WestYoga Mat10$470$219
ORD-1006EastSneakers3$261$165
ORD-1007SouthSneakers9$738$479
ORD-1008WestThrow Pillow16$888$546
ORD-1009NorthSmart Watch4$1,392$684
ORD-1010EastJacket8$440$254
ORD-1011WestSmart Watch15$5,073$2,624
ORD-1012NorthWater Bottle12$492$264
ORD-1013SouthJeans13$949$472
ORD-1014SouthSneakers7$413$189
ORD-1015EastJeans9$540$300
ORD-1016WestT-Shirt8$584$320
ORD-1017WestDesk Lamp14$812$498
ORD-1018EastWater Bottle14$588$338
ORD-1019SouthWireless Buds15$5,895$3,202
ORD-1020EastT-Shirt12$936$568
ORD-1021NorthThrow Pillow7$296$149
ORD-1022EastThrow Pillow19$779$418
ORD-1023EastYoga Mat12$432$259
ORD-1024EastCandle Set2$71$41
ORD-1025EastWireless Buds11$3,080$1,972
ORD-1026SouthRunning Shoes7$315$176
ORD-1027EastCandle Set13$728$384
ORD-1028WestDumbbells13$689$331
ORD-1029SouthJeans15$915$577
ORD-1030EastWireless Buds9$3,078$1,704
ORD-1031NorthLaptop Pro14$3,485$2,056
ORD-1032SouthCandle Set13$585$296
ORD-1033SouthThrow Pillow14$859$392
ORD-1034SouthUSB Hub13$3,302$2,013
ORD-1035SouthWater Bottle9$477$262
ORD-1036WestSmart Watch5$1,350$770
ORD-1037EastWater Bottle12$451$267
ORD-1038WestDumbbells4$204$132
ORD-1039NorthRug 5x820$1,180$579
ORD-1040EastJeans18$1,188$594
ORD-1041EastDesk Lamp17$697$390
ORD-1042SouthJeans1$72$43
ORD-1043WestCandle Set10$500$300
ORD-1044NorthCandle Set19$779$426
ORD-1045EastCandle Set20$1,180$722
ORD-1046NorthYoga Mat16$656$355
ORD-1047WestT-Shirt3$186$98
ORD-1048EastJacket18$1,134$714
ORD-1049SouthWater Bottle20$760$353
ORD-1050EastSneakers4$303$179
ORD-1051EastCandle Set2$122$68
ORD-1052NorthDesk Lamp4$228$105
ORD-1053EastWater Bottle12$402$240
ORD-1054SouthDumbbells20$1,060$550
ORD-1055WestYoga Mat11$526$300
ORD-1056WestYoga Mat8$256$147
ORD-1057SouthJeans14$1,008$572
ORD-1058WestThrow Pillow9$341$180
ORD-1059SouthSmart Watch14$3,780$1,864
ORD-1060SouthJeans2$122$76
ORD-1061WestT-Shirt19$1,292$623
ORD-1062WestLaptop Pro11$3,729$2,070
ORD-1063EastRunning Shoes8$392$211
ORD-1064SouthSneakers12$852$508
ORD-1065EastYoga Mat1$37$22
ORD-1066EastJacket15$960$483
ORD-1067NorthT-Shirt12$684$428
ORD-1068NorthUSB Hub8$2,056$1,123
ORD-1069SouthRunning Shoes14$714$443
ORD-1070WestRug 5x817$1,037$514
ORD-1071NorthWater Bottle14$600$297
ORD-1072EastWireless Buds5$1,275$584
ORD-1073WestRunning Shoes6$216$121
ORD-1074EastDesk Lamp9$489$230
ORD-1075WestSmart Watch9$2,718$1,617
ORD-1076NorthRug 5x816$688$399
ORD-1077SouthRunning Shoes2$90$45
ORD-1078SouthSneakers19$1,501$765
ORD-1079SouthT-Shirt6$336$157
Total (revenue)$83,831

Notes

  • Drill writes the whole row. If you only need one field, use a cell-item drill action with drillValueExpr, or just read the path (Variables.selectedOrder.id) downstream.
  • Scope resolution is bottom-up. A cell action writes to the nearest enclosing component that declares the variable name. If no component declares it, it falls back to the global bucket.
  • Default values are expressions. defaultValueExpression: "=Today()" seeds the variable on first render; explicit writes override it thereafter.
  • Host visibility. onDrillThrough(variableName, value) still fires as a pure notification — use it if the host app needs to react (analytics, navigation) in addition to the in-report variable write.