Is it possible to display prompts inside layout components?

[RonSijm]

Hey there,

I was wondering if it was possible to give prompts a target of where to appear.

For example, let's say I'm using the example layout: https://spectreconsole.net/widgets/layout
And also a default selection: https://spectreconsole.net/prompts/selection

Would it somehow be possible to do something like:

var fruit = new SelectionPrompt<string>()
        .Title("What's your [green]favorite fruit[/]?")
        .PageSize(10)
        .MoreChoicesText("[grey](Move up and down to reveal more fruits)[/]")
        .AddChoices(new[] {
            "Apple", "Apricot", "Avocado",
            "Banana", "Blackcurrant", "Blueberry",
            "Cherry", "Cloudberry", "Cocunut",
        });

layout["Left"].Update(new Panel(fruit));

The code above doesn't work because SelectionPrompt is not IRenderable, but I was wonder if it's possible - if I can wrap the SelectionPrompt into something else, and make it renderable inside a layout or a panel?

[patriksvensson]

Hello @RonSijm,

No, this is not supported, and that is by design.

[RonSijm]

Ok thanks for the quick response. What about the live components such as a Progress or Status? Can they be rendered inside a panel / layout?

[patriksvensson]

No problem. No, this is also not supported, and is stated in the documentation: https://spectreconsole.net/live/status

[RonSijm]

The documentation doesn't really seem to state they can't be rendered inside a layout, the examples just show invocations though a AnsiConsole.Progress() kind of way.

Too bad it isn't really supported, because I can seem to be able to render individual components, such as:

var console = AnsiConsole.Console;
var renderContext = RenderOptions.Create(console, console.Profile.Capabilities);

var description = new TaskDescriptionColumn().Render(renderContext, progressBarTask, TimeSpan.FromSeconds(1));
var progressBar = new ProgressBarColumn().Render(renderContext, progressBarTask, TimeSpan.FromSeconds(1));
var transferBar = new SpinnerColumn().Render(renderContext, progressBarTask, TimeSpan.FromSeconds(1));
layout["Bottom"].Update(new Panel(new Rows(
    Align.Left(description, VerticalAlignment.Middle),
    Align.Left(progressBar, VerticalAlignment.Middle),
    Align.Left(transferBar, VerticalAlignment.Middle)).Expand()));

and then I basically have makeshift progress bars already, inside my panel.

And I can also render a ListPrompt through reflection by calling the BuildRenderable and putting it inside a layout

Would be easier if this was more supported, I can probably get this to work myself, but it's going to take some work

[RonSijm]

Here, this is what I was trying to do, I made a short video (34 sec) example : https://youtu.be/rydg8uTvnkI

• Uses a reactive layout with a dynamic header that resizes if your window is big enough
• Uses a MultiSelectionPrompt inside a layout
• Broadcasts key inputs to multiple components, in this case the MultiSelectionPrompt (left) and my logging component (Right)
• Supports resizing and remembers state of MultiSelectionPrompt and LoggingComponent
• LoggingComponent renders log elements depending on Layout size

Doesn't use reflection anymore, but an interlop library that pretends to be Spectre.Console.Tests, so that Spectre.Console internals are visible...

I could clean it up a bit and send a PR, but I was wondering if this was desired, as you mentioned "not supported [...] by design."

[patriksvensson]

Appreciate you asking, but doing things like this is nothing we want to support OOTB. For more interactive scenarios, we usually refer people to projects like Gui.cs.

We do however encourage people to create their own Spectre.Console extensions for non-supported scenarios like this.