Having trouble restoring the state of dynamic fields

[Roman]

Hello,

I am trying to make a dynamic block that allows for a gear icon to be clicked to open up a menu of checkboxes/inputs to configure. I need to save and restore the workspace for my application.

I am coming across this error when I try to load in a workspace with XML

I understand why the issue is occurring because by default the block doesn't have the fields the "more options" icon has to be clicked to make the fields.

Here is the code I have come up with so far:

Is this the correct approach to this? I don't think I understand mutators and how to save these fields across states correctly.

Thanks

[Neil Fraser]

Great question, and you are almost there.  The issue is that Blockly has two incompatible save formats, and each requires different hooks.  You are using XML, but your hooks (saveExtraState/loadExtraState) are for JSON.  So either use JSON as your save format, or use the XML hooks (mutationToDom/domToMutation).

If you want to use XML, then a good block to look at is math_number_property.  It is an interesting block because the second input appears or disappears depending on whether the dropdown is set to "divisible by" or not.  At least that's what the user sees.  In practice the existence of this input is due to a mutation.

If you load this XML:

<xml xmlns="https://developers.google.com/blockly/xml">
  <block type="math_number_property"></block>
</xml>

Then you get this block:

But if you load this XML:

<xml xmlns="https://developers.google.com/blockly/xml">
  <block type="math_number_property">
    <mutation divisor_input="true"></mutation>
    <field name="PROPERTY">DIVISIBLE_BY</field>
  </block>
</xml>

You get this block:

The code for this is here:

https://github.com/google/blockly/blob/master/blocks/math.js#L449

So what you need to do is add a pair of 'mutationToDom' and a 'domToMutation' functions to your block.  If it's just a binary flag that needs to be stored ("no options" vs "more options") then it's really simple:

  mutationToDom: function() {
    const container = xmlUtils.createElement('mutation');
    const moreOptions = YOUR CODE TO DETERMINE IF 'MORE OPTIONS' IS ENABLED;
    container.setAttribute('more_options', Boolean(moreOptions));
    return container;
  },

  domToMutation: function(xmlElement) {
    const moreOptions = (xmlElement.getAttribute('moreOptions') === 'true');
    YOUR CODE TO CREATE MORE OPTIONS IF moreOptions IS TRUE.
  },

Using mutationToDom, you can encode any data you want on the XML mutation container.  Any format, doesn't matter.  But then it's your responsibility to be able to parse and read your data back in domToMutation.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/7a11d91f-435d-4deb-938d-7b03c11040dfn%40googlegroups.com.

--

Neil Fraser
https://neil.fraser.name