Blockly Custom Dialog

244 views
Skip to first unread message

James Brown

unread,
Aug 31, 2022, 4:53:40 AM8/31/22
to Blockly
Hello everyone. I'm trying to replace the standard Alert, Confirm and Prompt with SweetAlert2. I relied on this guide: https://blockly-demo.appspot.com/static/demos/custom-dialogs/index.html 
https://blockly-demo.appspot.com/static/demos/custom-dialogs/custom-dialog.js
Here is my source code:
Blockly.dialog.setAlert(function(message, callback)
{
Swal.fire
({
position: 'top',
title: 'Alert!',
text: message,
width: 500,
confirmButtonColor: '#008cf0',
confirmButtonText: 'Close',
showClass:
{
backdrop: 'swal2-noanimation',
popup: '',
icon: ''
},
hideClass:
{
popup: '',
},
}).then((result) =>
{
if (result.isConfirmed)
{
callback;
}
else if (result.isDismissed)
{
callback;
}
});
});

Blockly.dialog.setConfirm(function(message, callback)
{
Swal.fire
({
position: 'top',
title: 'Confirm',
text: message,
width: 500,
confirmButtonColor: '#008cf0',
confirmButtonText: 'Close',
showClass:
{
backdrop: 'swal2-noanimation',
popup: '',
icon: ''
},
hideClass:
{
popup: '',
},
}).then((result) =>
{
if (result.isConfirmed)
{
callback(true);
}
else if (result.isDismissed)
{
callback(false);
}
});
});
Blockly.dialog.setPrompt(function(message, callback)
{
Swal.fire
({
position: 'top',
title: message,
input: 'text',
inputAttributes:
{
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonColor: '#008cf0',
confirmButtonText: 'Confirm',
cancelButtonColor: '#545454',
width: 500,
showClass:
{
backdrop: 'swal2-noanimation',
popup: '',
icon: ''
},
hideClass:
{
popup: '',
},
inputValidator: (value) =>
{
if (!value)
{
return 'You need to write something!'
}
}
}).then((result) =>
{
if (result.isConfirmed)
{
callback(result.value)
}
else if (result.isDismissed)
{
callback(null);
}
})
});
And my error:
custom_dialogs.js:104 Uncaught (in promise) TypeError: callback is not a function
    at custom_dialogs.js:104:7
I will be glad of any help!

Beka Westberg

unread,
Sep 2, 2022, 12:36:20 PM9/2/22
to Blockly
Hello! Thank you for your question =)

What are you passing in as your `callback`? Is it a function?

Best wishes,
--Beka

James Brown

unread,
Sep 5, 2022, 3:29:49 AM9/5/22
to Blockly
To be honest, I don't know. I just used the example from here: https://blockly-demo.appspot.com/static/demos/custom-dialogs/custom-dialog.js
The callback function is called there, which is not declared anywhere, but everything works fine.

пятница, 2 сентября 2022 г. в 19:36:20 UTC+3, bwes...@google.com:

Mark Friedman

unread,
Sep 5, 2022, 6:55:26 PM9/5/22
to blo...@googlegroups.com
Note that the function that is passed to Blockly.dialog.setPrompt is different than the function that you need to pass into setAlert and setConfirm.  For setPrompt the callback function is passed in the 3rd argument, rather than the second.  See here for the reference documentation.

-Mark


--
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/2d96500f-bdb8-40a9-8ac8-f07b3692a9ben%40googlegroups.com.

Beka Westberg

unread,
Sep 6, 2022, 4:17:02 PM9/6/22
to blo...@googlegroups.com
Thanks for the additional info!

I don't think the source of the error is with https://blockly-demo.appspot.com/static/demos/custom-dialogs/custom-dialog.js, or your own custom_dialogs.js. It seems problem is when the callback is actually being invoked. So likely (as Mark suggested) the callback is just being passed in as the wrong parameter.

If you can post the code where these methods are being invoked I can probably give you more specific advice. But hopefully that gets you unstuck!

Best wishes,
--Beka

You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/-EXcsIQrf7Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAOk7GcQg0bsO9mXMXv0GrnehDLh4qfSMaCpq4U76-x%3DSsQh6vA%40mail.gmail.com.

Mark Friedman

unread,
Sep 6, 2022, 7:29:18 PM9/6/22
to blo...@googlegroups.com
I should have provided a little more detail in my answer because I think that the problem IS with his custom_dialogs.js.  In particular, it has a line that reads:

Blockly.dialog.setPrompt(function(message, callback)

It should be something like:

Blockly.dialog.setPrompt(function(message, defaultValue, callback)

which should then cause the callback to have the proper function value when it is later referenced on line 104.

-Mark


James Brown

unread,
Sep 9, 2022, 4:55:24 AM9/9/22
to Blockly
Beka and Mark, thank you so much!!! I added defaultValue as a second argument and everything works fine! Thank you again
среда, 7 сентября 2022 г. в 02:29:18 UTC+3, mark.f...@gmail.com:

Mark Friedman

unread,
Sep 9, 2022, 10:47:39 AM9/9/22
to blo...@googlegroups.com
Glad it helped!

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/36d533a4-0460-4f11-8307-2da118e511bbn%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages