How can i generate custom blocks in angular 4 application using blockly

[Khushbu Yeole]

Hi, 

I have integrated blockly in angular 4 application with default blocks in that.

Now i want to add custom blocks in workspace.

How i can do that ?

Help me..

[Erik Pasternak]

Hi Khushbu,

Check out the developer docs on creating and adding custom blocks and then let us know if you run into specific issues.

Cheers,

Erik

[Khushbu Yeole]

Hi Erik,

I went throght creating custom blocks and i created my custom block and i can't see my custom block in toolbox PFA.

I have below code in js file:

Blockly.Blocks['set_led'] = {
    init: function() {
        this.appendDummyInput()
            .appendField("set led")
            .appendField(new Blockly.FieldDropdown([["true","true"], ["false","false"]]), "SET_LED");
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
        this.setColour(230);
        this.setTooltip("");
        this.setHelpUrl("");
    }
};

Blockly.JavaScript['set_led'] = function(block) {
    var dropdown_set_led = block.getFieldValue('SET_LED');
    console.log(dropdown_set_led);
    // TODO: Assemble JavaScript into code variable.
    var code = '...;\n';
    return code;
};

also added file path in script tag in html.

Please help me, i am doing right?

or anything i have to wrote more for that.

[Erik Pasternak]

Hi Khushbu,

You still need to add the block to your toolbox.

We should probably add a section to the custom blocks overview reminding people they need to add the block to their toolbox after creating it.

Cheers,

Erik

[Khushbu Yeole]

HI Erik,

I have added block in my toolbox

<category name="Actions">
    <block type="set_led">
        <field name="SET_LED">true</field>
    </block>
</category>

anything i am missing other than this.

[Khushbu Yeole]

Issue is resolved its my mistake in code. Got it.

Thanks Erik for your help.

[Rachel Fenichel]

How did you fix it?  Other people may run into the same problem and be helped by seeing your fix.

[Khushbu Yeole]

I have given my BlockDefination.js file path in  angular-cli.json and it works.

Its actually an angular mistake i did.

Thanks.