How to attach output from Button function to bottom of Tabview output

Question

My question is best explained with a simple example.

Lets suppose we have:

fruit = {"Apples", "Oranges", "Pears", "Bananas"};

and then a simple helper function:

ShowOrder[fruit_] := StringJoin["Your Order: ", fruit]

and a TabView constructor as follows:

SelectFruit[] := 
 Row[{CheckboxBar[Dynamic[selectedFruit], fruit, 
    Appearance -> "Vertical"], StringRepeat[" ", 10], 
   Button[Style["Buy Fruit", FontSize -> 14, Bold], 
    Print[ShowOrder[selectedFruit]]]}]

We then generate the TabView:

TabView[{"Fruit" -> SelectFruit[], "Vegetables" -> ""}]

which produces

We select Oranges and Pears and click the "Buy Fruit" button, which then prints the output to the cell below the tabview

Your Order: OrangesPears

Ok so far. However, what I want is to attach the output to the bottom of the TabView, rather than print it in the cell below, so that the following appears all in a single cell:

I can think of some possible options including perhaps merging cells, overwriting cells, or creating some kind of dynamic output variable.

What's the best way to proceed?

Answer 1

Use DynamicModule.

Clear["Global`*"];

fruit = {"Apples", "Oranges", "Pears", "Bananas"};
ShowOrder[{}] := "";
ShowOrder[fruit_] := "Your Order: " ~~ StringRiffle[fruit, ", "];

SetAttributes[SelectFruit, HoldAll];
SelectFruit[order_] := DynamicModule[{selectedFruit}, Row[{
     CheckboxBar[Dynamic[selectedFruit], fruit, 
      Appearance -> "Vertical"], StringRepeat[" ", 10], 
     Button[Style["Buy Fruit", FontSize -> 14, Bold], 
      order = selectedFruit]}]];

DynamicModule[{order = {}},
 Dynamic@TabView[{"Fruit" -> Column[{SelectFruit[order], ShowOrder[order]}], 
    "Vegetables" -> ""}]
 ]