How can I add elements to the flyout?

[권나연]

I hope this message finds you well. 

I am trying to implement a design similar to the one in the attached image. The key functionality within the flyout on the right-hand side toolbox is as follows:

1. The user enters a style name in an input tag.
2. When the "+" button is clicked, a block containing the entered style name is generated below the button.
3. This block can be moved to the workspace upon clicking, and the style class can be applied to it.
4. If the "x" button on the block is clicked, the block is deleted.

I’m attempting to add an input element to the flyout to achieve this, but it hasn’t been easy. Could you provide some guidance?

Thank you very much for your time and support. I look forward to your guidance.

[Aaron Dodson]

Hi,

You're right that this is currently challenging! Fortunately, I've made some changes to how flyouts work in the upcoming V12 release (likely out end of this year or early next) specifically to accomodate adding arbitrary elements to flyouts. In short, you'll want to:

Add a new entry to your flyout definition for the input:

{

     kind: "input", // This string is arbitrary, it just identifies flyout elements of this type

     // other fields/information you need to construct your input go here

}

And create a class that implements IFlyoutInflater which instantiates and returns your input element based on the flyout definition. That class will need to register itself as a flyout inflater under the same key/name that you used for `kind` in the flyout definition; then, when the flyout encounters that entry in its definition, it will automatically ask your inflater class to create an instance, and add it to the flyout. There are built-in inflaters for buttons and blocks (and several others; take a look at the rc/v12.0.0 branch of Blockly) that may be instructive/useful examples. If you have any feedback on this API we'd certainly appreciate it at as well! Feel free to let me know if you have questions or get stuck.

- Aaron