Text input field with a button

[Luke Fiorante]

Hi everyone,

I'm new to Blockly and I'm looking for a way to attach a button to a text input field. This button, when clicked, would auto-fill the text input with data from elsewhere in my application. I've seen other responses in this forum say that I can use an image field with a click handler on the image to implement a button-like interaction. But is there a way to merge this with a text input field so they're a singular "unit"?

Thanks!

Luke

[Aaron Dodson]

Hi,

By "merge this with a text input field", do you mean that you want the button inside the text input (like a search icon inside of a text field) or just adjacent to one another on the same block?

- Aaron

[Luke Fiorante]

Hi Aaron,

Thanks for clarifying. Ideally they'd be adjacent to one another on the same block. But a button inside the text input would be acceptable too.

Best,

Luke

[Aaron Dodson]

Sure, that's doable. If you go to the Blockly devtools, click Import Block Library and upload the following XML (you may also need to choose example_block from the Block Library button towards the top left), you can see how a block like that would appear. Basically you just want a block with two inline inputs, the first having a text field and the second an image field (or vice versa). Let me know if that's not quite what you're looking for or if you have any other questions!

<xml xmlns="https://developers.google.com/blockly/xml"><block type="factory_base" id="9(xB9VdumD0(Sbd:(NbY" deletable="false" movable="false" x="10" y="10">
    <mutation connections="BOTH"></mutation>
    <field name="NAME">example_block</field>
    <field name="INLINE">INT</field>
    <field name="CONNECTIONS">BOTH</field>
    <statement name="INPUTS">
      <block type="input_dummy" id="1z,=b,.=3gcJ]ij4$^((">
        <field name="ALIGN">LEFT</field>
        <statement name="FIELDS">
          <block type="field_input" id="tSePnTcJhu7-y1|UbwA(">
            <field name="TEXT">Your text goes here</field>
            <field name="FIELDNAME">TEXT</field>
          </block>
        </statement>
        <next>
          <block type="input_dummy" id="c?St6HYpzL!I0]0n?gbj">
            <field name="ALIGN">LEFT</field>
            <statement name="FIELDS">
              <block type="field_image" id="{|kmzZ=,`}-w!izaxabX">
                <field name="SRC">https://www.gstatic.com/codesite/ph/images/star_on.gif</field>
                <field name="WIDTH">15</field>
                <field name="HEIGHT">15</field>
                <field name="ALT">*</field>
                <field name="FLIP_RTL">FALSE</field>
              </block>
            </statement>
          </block>
        </next>
      </block>
    </statement>
    <value name="TOOLTIP">
      <block type="text" id="GHI$1:nX4DA9SOeb;CdS" deletable="false" movable="false">
        <field name="TEXT"></field>
      </block>
    </value>
    <value name="HELPURL">
      <block type="text" id="!xvbg)9xz3EZY`k)-1.A" deletable="false" movable="false">
        <field name="TEXT"></field>
      </block>
    </value>
    <value name="TOPTYPE">
      <shadow type="type_null" id="[$OMEw6BF1$Y:wXDR$Pi"></shadow>
    </value>
    <value name="BOTTOMTYPE">
      <shadow type="type_null" id="%)]lsx2]db!D_1?=zQHw"></shadow>
    </value>
    <value name="COLOUR">
      <block type="colour_hue" id="{hb.R~x~`Fodu*33Q-,l">
        <mutation colour="#5b67a5"></mutation>
        <field name="HUE">230</field>
      </block>
    </value>
  </block></xml>

[Christopher Allen]

Hi Aaron,

On Fri, 5 Aug 2022 at 17:40, 'Aaron Dodson' via Blockly <blo...@googlegroups.com> wrote:

Sure, that's doable. If you go to the Blockly devtools, click Import Block Library and upload the following XML (you may also need to choose example_block from the Block Library button towards the top left), you can see how a block like that would appear. Basically you just want a block with two inline inputs, the first having a text field and the second an image field (or vice versa). Let me know if that's not quite what you're looking for or if you have any other questions!

I note that Luke also asked:

This button, when clicked, would auto-fill the text input with data from elsewhere in my application.

…and that I don't think that the block definition alone is enough to cause that to happen.

Alas, after thinking about it for a bit I realise that I've not delved into this part of Blockly enough yet to be sure of the best approach.  My first thought was that it might be necessary (or at least useful) to create a new field type that subclasses FieldImage (or perhaps subclasses FieldText, adding a button), but perhaps a simpler approach is to use addChangeListener to add a listener that listens for Blockly.Event.CLICK events on the FieldImage, and performs the desired action?

Christopher

[Luke Fiorante]

Hi folks,

Aaron, thanks very much for the example! It helped fill the gaps in my knowledge. I also realized it's possible to add the ImageField to the same DummyInput as the FieldTextInput, in the case where the block has other inputs that I don't necessarily want to be inline.

this.appendDummyInput()
        .appendField(new Blockly.FieldTextInput("Your text goes here"), "TEXT")
        .appendField(new Blockly.FieldImage("https://www.gstatic.com/codesite/ph/images/star_on.gif", 15, 15, { alt: "*", flipRtl: "FALSE" }));

To Christopher's point, I've successfully attached a click listener to the FieldImage to trigger the auto-fill behavior I want. Thanks again for your help - this is everything I needed!

Luke