> 
 > 
4. Blocks Coding with Web App
Input
Input

This documentation provides guidelines on input validation, and manages various input types such as colour input, buttons, checkboxes, text areas, option lists, file inputs, and numeric inputs.

Input Validation

Validate inputs in layout

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_validateInputs\"/></xml>"}

This is used for checking the input in layout is valid or not.

Parameters: Screen Item 
Output: Boolean (True/False)
Sample code:

Using one if-else condition to check inputs.

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"controls_if\"><mutation else=\"1\"/><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"Control_validateInputs\"><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><statement name=\"DO0\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">validation</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">The text is valid.</field></shadow></value></block></statement><statement name=\"ELSE\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">validation</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">The text is not valid.</field></shadow></value></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>resultButton</variable><variable>validation</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextInput\"><field name=\"type\">TextInputType.URL</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">resultButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Show Result</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">validation</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">validation</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><statement name=\"HANDLER\"><block type=\"controls_if\"><mutation else=\"1\"/><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"Control_validateInputs\"><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><statement name=\"DO0\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">validation</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">The text is valid.</field></shadow></value></block></statement><statement name=\"ELSE\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">validation</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">The text is not valid.</field></shadow></value></block></statement></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When the input is valid, the output:

Validate inputs in layout - Output 1

When the input is not valid, the output:

Validate inputs in layout - Output 2

Generate the Color Input

Create color input

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_createColorInput\"/></xml>"}

This is used for creating the color in the input. 

Parameters: N/A
Output: Screen Item
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>colorInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">colorInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createColorInput\"/></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">colorInput</field></block></value></block></next></block></next></block></next></block></statement></block></xml>"}

The input:

Create color input - Output 1

You can modify the color inside:

Create color input - Color 2

Button

Generate a Button

Create button

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\"/></shadow></value></block></xml>"}

This is used for creating a new button.

Parameters: Display string: String
Output: Button
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>btn1</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">btn1</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Button</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">btn1</field></block></value></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Create button - Output

Control Clicking

On control clicked

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value></block></xml>"}

This block is used for when clicking the button, it will do some action.

Parameters: Screen Item
Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value><statement name=\"HANDLER\"><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">text</field></block></value></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>button</variable><variable>text</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">button</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Button</field></shadow></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">text</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">Hello</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value><statement name=\"HANDLER\"><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">text</field></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When button is clicked, it will show the variable text.

The output:

On control clicked - Output 1

After clicking button:

On control clicked - Output 2

Setting Text on Button

Button set content

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_Button_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\"/></shadow></value></block></xml>"}

This block is used for setting text inside the button.

Parameters:

  • Screen Item (Input Control)
  • Display setting: String

Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>button</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">button</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Button</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value><statement name=\"HANDLER\"><block type=\"Control_Button_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">You clicked this button.</field></shadow></value></block></statement></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

Before clicking “Button”, the output:

Button set content - Output (Before Click)

After clicking “Button”, the output:

Button set content - Output (After Click)

CheckBox

Generate a checkbox

Create checkbox

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_createCheckbox\"/></xml>"}

This is used for creating a new checkbox.

Parameters: N/A
Output: Check Box
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>createCheckBox</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">createCheckBox</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createCheckbox\"/></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">createCheckBox</field></block></value></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Create Check Box - Output 1

After clicking the check box:

Create Check Box - Output 2

Default Setting on Checkbox

Checkbox check false

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_Checkbox_setChecked\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkbox</field></block></value><value name=\"isChecked\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></xml>"}

This block is used to set the default check box is tick or not.

Parameters:

  • Screen Item (Input Control)
  • Display setting: Boolean (True/False [Default])

Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>checkBox</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">checkBox</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createCheckbox\"/></value><next><block type=\"Control_Checkbox_setChecked\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkBox</field></block></value><value name=\"isChecked\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">checkBox</field></block></value></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When setting checkbox to false, the output:

Checkbox check false - Output 1

When setting checkbox to true, the output:

Checkbox check false - Output 2

Checking Checkbox is Checked or Not

Checkbox is checked

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_Checkbox_isChecked\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkbox</field></block></value></block></xml>"}

This block is used for checking the check box is clicked or not. 

Parameters: Screen Item (Input Control)
Output: Boolean (True/False)
Sample code:

You can show the result using while-loop combined with if-else condition.

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"controls_if\"><mutation else=\"1\"/><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"Control_Checkbox_isChecked\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkBox</field></block></value></block></value><statement name=\"DO0\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkChecked</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">It is clicked.</field></shadow></value></block></statement><statement name=\"ELSE\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkChecked</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">It isn't clicked.</field></shadow></value></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>checkBox</variable><variable>checkChecked</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">checkBox</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createCheckbox\"/></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">checkBox</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">checkChecked</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">checkChecked</field></block></value><next><block type=\"device_while\"><value name=\"COND\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><statement name=\"DO\"><block type=\"controls_if\"><mutation else=\"1\"/><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"Control_Checkbox_isChecked\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkBox</field></block></value></block></value><statement name=\"DO0\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkChecked</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">It is clicked.</field></shadow></value></block></statement><statement name=\"ELSE\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkChecked</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">It isn't clicked.</field></shadow></value></block></statement><next><block type=\"Task_sleep\"><value name=\"ms\"><shadow type=\"math_number\"><field name=\"NUM\">500</field></shadow></value></block></next></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

Be careful: You must use “pause ms” block inside while (true) loop. Otherwise, it will have infinite loop and this Web App will be crashed.

When checkbox is not clicked, the output:

Checkbox is checked - Output 1

When checkbox is clicked, the output:

Checkbox is checked - Output 2

Text Area

Generate a Text Area

Create text area

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_createTextArea\"/></xml>"}

This is used for creating a new text area. 

Parameters: Display setting: String
Output: Screen Item
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>textArea</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">textArea</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextArea\"/></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">textArea</field></block></value></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Create text area - Output 1

You can type something inside the text area:

Create text area - Output 2

Inputting Text with Correct Type

Create text input with the type of

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_createTextInput\"><field name=\"type\">TextInputType.Text</field></block></xml>"}

This block is used for telling user to input the correct type.

Parameters: Display setting: text (Default)/email/URL
Output: Screen Item
Sample code:

When setting the type to text, the output:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>createInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">createInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextInput\"><field name=\"type\">TextInputType.Text</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">createInput</field></block></value></block></next></block></next></block></next></block></statement></block></xml>"}

When setting the type to email, the output:

Create text input with type of - Output 2

When setting the type to URL, the output:

Create text input with type of - Output 3

Input Control Validation

Input Control validate input

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_ChangeableInputControl_validateInput\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></xml>"}

This block is used to check whether the input type is correct or not.

Parameters: Screen Item (Input Control)
Output: Boolean (True/False).
Sample code:

Using these blocks to check user is typing or not.

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"controls_if\"><mutation else=\"1\"/><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"Control_ChangeableInputControl_validateInput\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></value><statement name=\"DO0\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkInput</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Typing something</field></shadow></value></block></statement><statement name=\"ELSE\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkInput</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Please input correct type</field></shadow></value></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>inputControl</variable><variable>checkInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">inputControl</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextInput\"><field name=\"type\">TextInputType.Email</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">checkInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">checkInput</field></block></value><next><block type=\"device_while\"><value name=\"COND\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><statement name=\"DO\"><block type=\"controls_if\"><mutation else=\"1\"/><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"Control_ChangeableInputControl_validateInput\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></value><statement name=\"DO0\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkInput</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Typing something</field></shadow></value></block></statement><statement name=\"ELSE\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkInput</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Please input correct type</field></shadow></value></block></statement><next><block type=\"Task_sleep\"><value name=\"ms\"><shadow type=\"math_number\"><field name=\"NUM\">500</field></shadow></value></block></next></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Input Control validate input - Output 1

After typing some incorrect format, the output:

Input Control validate input - Output 2

Input Control Restriction

Input Control required false

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_ChangeableInputControl_setInputRequired\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><value name=\"isRequired\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></xml>"}

This block restricts user to input the value if it sets to true.

Parameters:

  • Screen Item (Input Control)
  • Display setting: Boolean (True/False [Default])

Output: Boolean (True/False).
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>inputControl</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">inputControl</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextInput\"><field name=\"type\">TextInputType.Email</field></block></value><next><block type=\"Control_ChangeableInputControl_setInputRequired\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><value name=\"isRequired\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When the variable requirement sets to false, the output:

Input Control required false - Output 1

When the variable requirement sets to true, the output:

Input Control required false - Output 2

Having Events When Input is Changed

On input control changed

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_ChangeableInputControl_onInputChanged\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></xml>"}

This block is used for when user clicks enter key in keyboard after typing something in the text box, it will do some actions. 

Parameters: Screen Item (Input Control)
Output: N/A
Sample code:

When user inputs something in the text box and clicks the enter key, it will show the text that you type.

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_ChangeableInputControl_onInputChanged\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><statement name=\"HANDLER\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">createOutput</field></block></value><value name=\"content\"><block type=\"Control_ChangeableInputControl_getInputValue\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></value></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>inputControl</variable><variable>createOutput</variable><variable>youWrote</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">inputControl</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextInput\"><field name=\"type\">TextInputType.Text</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">createOutput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"variables_set\"><field name=\"VAR\">youWrote</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">You wrote:</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">youWrote</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">createOutput</field></block></value><next><block type=\"Control_ChangeableInputControl_onInputChanged\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><statement name=\"HANDLER\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">createOutput</field></block></value><value name=\"content\"><block type=\"Control_ChangeableInputControl_getInputValue\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When nothings are inputted, the output:

On input control changed - Output 1

When somethings are inputted and user clicks enter key, the output:

On input control changed - Output 2

Setting the Initial Value

Input Control set value

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_ChangeableInputControl_setInputValue\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><value name=\"v\"><shadow type=\"text\"><field name=\"TEXT\"/></shadow></value></block></xml>"}

This block is used for setting some text in the variable for displaying.

Parameters:

  • Screen Item (Input Control)
  • Display setting: String

Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>inputControl</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">inputControl</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextArea\"/></value><next><block type=\"Control_ChangeableInputControl_setInputValue\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><value name=\"v\"><shadow type=\"text\"><field name=\"TEXT\">Here is setting value</field></shadow></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Input Control set value - Output

Displaying Text Area Value

Input Control get value

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_ChangeableInputControl_getInputValue\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></xml>"}

This block is used to getting the value from the text area for displaying. 

Parameters: Screen Item (Input Control)
Output: Screen Item
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>inputControl</variable><variable>valueInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">inputControl</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextArea\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">valueInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextInput\"><field name=\"type\">TextInputType.Text</field></block></value><next><block type=\"Control_ChangeableInputControl_setInputValue\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><value name=\"v\"><shadow type=\"text\"><field name=\"TEXT\">Typing something~</field></shadow></value><next><block type=\"Control_ChangeableInputControl_setInputValue\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">valueInput</field></block></value><value name=\"v\"><block type=\"Control_ChangeableInputControl_getInputValue\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">valueInput</field></block></value></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Input control get value - Output

Setting Focus on the Element

Input Control focus

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_InputControl_focus\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></xml>"}

This block sets focus on text area. If it is focused, you can type something in the text area.

Parameters: Screen Item (Input Control)
Output: N/A
Sample code:

Here sets the button to check whether the variable is focused.

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">createButton</field></block></value><statement name=\"HANDLER\"><block type=\"Control_InputControl_focus\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>inputControl</variable><variable>createButton</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">inputControl</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextArea\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">createButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Click me to see focus</field></shadow></value></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">createButton</field></block></value><statement name=\"HANDLER\"><block type=\"Control_InputControl_focus\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value></block></statement><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">createButton</field></block></value></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When it is not focused, the output:

Input Control focus - Output 1

When clicks the button to see focus, the output:

Input Control focus - Output 2

Typing Restriction

Input Control enable false

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_InputControl_setInputEnabled\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><value name=\"isEnabled\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></xml>"}

The block restricts user to type in text area.

Parameters:

  • Screen Item (Input Control)
  • Display setting: Boolean (True/False [Default])

Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>inputControl</variable><variable>disableButton</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">inputControl</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextArea\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">disableButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Click me to see enable is true.</field></shadow></value></block></value><next><block type=\"Control_InputControl_setInputEnabled\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><value name=\"isEnabled\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">disableButton</field></block></value><statement name=\"HANDLER\"><block type=\"Control_InputControl_setInputEnabled\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><value name=\"isEnabled\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></statement><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">inputControl</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">disableButton</field></block></value></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When setting the enable setting to become true first, the output:

Input Control enable false - Output 1

After clicking the button, it will block the text area and not allow you to type, the output:

Input Control enable false - Output 2

Option List

Generate a Option List

Create option list

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></xml>"}

This block is used to set a new option list using array.

Parameters: Display setting: 

  • Boolean (True/False [Default])
  • Array

Output: Screen Item
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></next></block></next></block></next></block></statement></block></xml>"}

The input without options:

Create option list - Output without options

The output with options:

Create option list - Output with options

Deselecting All Options

Option List deselect all options

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_OptionList_deselectAll\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></xml>"}

This is used for deselecting all options in the option list. 

Parameters: Screen Item (Option List)
Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable><variable>resultButton</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"2\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">resultButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Show Result</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><statement name=\"HANDLER\"><block type=\"Control_OptionList_deselectAll\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

Before clicking the “Show Result” button, the output:

Option list deselect all options - Output 1

After clicking the button, the output:

Option list deselect all options - Output 2

Choosing All Options

Option List select all options

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_OptionList_selectAll\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></xml>"}

This is used for deselecting all options in the option list. 

Parameters: Screen Item (Option List)
Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable><variable>resultButton</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"2\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">resultButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Show Result</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><statement name=\"HANDLER\"><block type=\"Control_OptionList_selectAll\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Option list select all options - Output 1

After clicking “Show Result” Button:

Option list select all options - Output 2

Deselect Some Options

Option List deselect options array of

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_OptionList_deselectOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></xml>"}

This is used for deselect the related options.

Parameters:

  • Screen Item (Option List)
  • Array

Output: N/A

Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable><variable>resultButton</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"2\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">resultButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Show Result</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><statement name=\"HANDLER\"><block type=\"Control_OptionList_deselectOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"2\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Option list deselect options array of a b c - Output 1

After clicking “Show Result” Button:

Option list deselect options array of a b c - Output 2

Select Some Options

Option List select options array of

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_OptionList_selectOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"2\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value></block></value></block></xml>"}

This is used for selecting the related options.

Parameters: 

  • Screen Item (Option List)
  • Array

Output: N/A

Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable><variable>resultButton</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"2\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">resultButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Show Result</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><statement name=\"HANDLER\"><block type=\"Control_OptionList_selectOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"2\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Option List select option array of a b c - Output 1

After clicking “Show Result” Button:

Option List select option array of a b c - Output 2

Getting Options that are Selected

Option List get selected options

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_OptionList_getSelectedOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></xml>"}

This is used for getting the options that are selected.

Parameters: Screen Item (Option List)
Output: N/A
Sample code:

Using a for loop to get all the selected options.

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">options</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_OptionList_getSelectedOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></value><next><block type=\"pxt_controls_for\"><value name=\"VAR\"><shadow type=\"variables_get_reporter\"><field name=\"VAR\">index</field></shadow></value><value name=\"TO\"><shadow type=\"math_whole_number\"><field name=\"NUM\">0</field></shadow><block type=\"math_arithmetic\"><field name=\"OP\">MINUS</field><value name=\"A\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"lists_length\"><value name=\"VALUE\"><block type=\"variables_get\"><field name=\"VAR\">options</field></block></value></block></value><value name=\"B\"><shadow type=\"math_number\"><field name=\"NUM\">1</field></shadow></value></block></value><statement name=\"DO\"><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><block type=\"lists_index_get\"><value name=\"LIST\"><block type=\"variables_get\"><field name=\"VAR\">options</field></block></value><value name=\"INDEX\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"variables_get\"><field name=\"VAR\">index</field></block></value></block></value></block></value></block></statement></block></next></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable><variable>resultButton</variable><variable>options</variable><variable>index</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"2\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">resultButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Show Result</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">resultButton</field></block></value><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">options</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_OptionList_getSelectedOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></value><next><block type=\"pxt_controls_for\"><value name=\"VAR\"><shadow type=\"variables_get_reporter\"><field name=\"VAR\">index</field></shadow></value><value name=\"TO\"><shadow type=\"math_whole_number\"><field name=\"NUM\">0</field></shadow><block type=\"math_arithmetic\"><field name=\"OP\">MINUS</field><value name=\"A\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"lists_length\"><value name=\"VALUE\"><block type=\"variables_get\"><field name=\"VAR\">options</field></block></value></block></value><value name=\"B\"><shadow type=\"math_number\"><field name=\"NUM\">1</field></shadow></value></block></value><statement name=\"DO\"><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><block type=\"lists_index_get\"><value name=\"LIST\"><block type=\"variables_get\"><field name=\"VAR\">options</field></block></value><value name=\"INDEX\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"variables_get\"><field name=\"VAR\">index</field></block></value></block></value></block></value></block></statement></block></next></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output when selecting b, c and clicking the “Show Result” button:

Option List get selected option - Output

Changing the Option List Size

Option List set size

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></xml>"}

This is used to set the displaying size of the option list.

Parameters: 

  • Screen Item (Option List)
  • Condition: Number (Default: 0)

Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"2\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></value><next><block type=\"Control_OptionList_setSize\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><value name=\"size\"><shadow type=\"math_number\"><field name=\"NUM\">2</field></shadow></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Option List set size - Output

Drop Down List With Multiple Selections

Option List allow multiple selections

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_OptionList_setMultiple\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></xml>"}

This is used to allow whether it can select more than one options.

Parameters: 

  • Screen Item (Option List)
  • Condition: Boolean (True/False [Default])

Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"2\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></value><next><block type=\"Control_OptionList_setMultiple\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output when it is set to false:

Option List allow multiple selection - Output 1

The output when it is set to true:

Option List allow multiple selection - Output 2

Checking Option List is Multiple or Not

Option List is multiple

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_OptionList_isMultiple\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></xml>"}

It is used for checking it is multiple or not.

Parameters: Screen Item (Option List)
Output: Boolean (True/False)
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable><variable>checkMultiple</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"2\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">checkMultiple</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">checkMultiple</field></block></value><next><block type=\"controls_if\"><mutation else=\"1\"/><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"Control_OptionList_isMultiple\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></value><statement name=\"DO0\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkMultiple</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">It is multiple.</field></shadow></value></block></statement><statement name=\"ELSE\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">checkMultiple</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">It is not multiple.</field></shadow></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When it sets to false, the output:

Option List is multiple - Output 1

When it sets to true, the output:

Option List is multiple - Output 2

Setting Multiple Choices in Option List

Option List set options array of

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_OptionList_setOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></xml>"}

This is used for setting the options in the option list. 

Parameters: Screen Item (Option List)
Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"Control_OptionList_setOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Option List set options array of - Output

Getting All Options

Option List get options

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_OptionList_getOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></xml>"}

This is used for getting all options in the option list.

Parameters: Screen Item (Option List)
Output: Screen Item
Sample code:

Using a for loop to get all options.

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"pxt_controls_for\"><value name=\"VAR\"><shadow type=\"variables_get_reporter\"><field name=\"VAR\">index</field></shadow></value><value name=\"TO\"><shadow type=\"math_whole_number\"><field name=\"NUM\">0</field></shadow><block type=\"math_arithmetic\"><field name=\"OP\">MINUS</field><value name=\"A\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"lists_length\"><value name=\"VALUE\"><block type=\"variables_get\"><field name=\"VAR\">options</field></block></value></block></value><value name=\"B\"><shadow type=\"math_number\"><field name=\"NUM\">1</field></shadow></value></block></value><statement name=\"DO\"><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><block type=\"lists_index_get\"><value name=\"LIST\"><block type=\"variables_get\"><field name=\"VAR\">options</field></block></value><value name=\"INDEX\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"variables_get\"><field name=\"VAR\">index</field></block></value></block></value></block></value></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>optionList</variable><variable>options</variable><variable>index</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">optionList</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createOptionList\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"2\" _input_init=\"true\"></mutation><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value><value name=\"options\"><block type=\"lists_create_with\"><mutation items=\"3\" horizontalafter=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">a</field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\">b</field></shadow></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\">c</field></shadow></value></block></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">options</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_OptionList_getOptions\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">optionList</field></block></value></block></value><next><block type=\"pxt_controls_for\"><value name=\"VAR\"><shadow type=\"variables_get_reporter\"><field name=\"VAR\">index</field></shadow></value><value name=\"TO\"><shadow type=\"math_whole_number\"><field name=\"NUM\">0</field></shadow><block type=\"math_arithmetic\"><field name=\"OP\">MINUS</field><value name=\"A\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"lists_length\"><value name=\"VALUE\"><block type=\"variables_get\"><field name=\"VAR\">options</field></block></value></block></value><value name=\"B\"><shadow type=\"math_number\"><field name=\"NUM\">1</field></shadow></value></block></value><statement name=\"DO\"><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><block type=\"lists_index_get\"><value name=\"LIST\"><block type=\"variables_get\"><field name=\"VAR\">options</field></block></value><value name=\"INDEX\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"variables_get\"><field name=\"VAR\">index</field></block></value></block></value></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output:

Option List get options - Output

File Input

Generate a File Input

Create file input

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_createFileInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"true\"></mutation><field name=\"fileTypeFilter\">FileInputTypeFilter.None</field><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value></block></xml>"}

This block allows you to upload the file with the variable.

Parameters: Display setting: none (Default)/Boolean (True/False[Default])
Output: Screen Item
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>createFileInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">createFileInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createFileInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"true\"></mutation><field name=\"fileTypeFilter\">FileInputTypeFilter.None</field><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">createFileInput</field></block></value></block></next></block></next></block></next></block></statement></block></xml>"}

You can set whether user can choose multiple files or not.

Create file input - Output 1

When no file is chosen, the output:

Create file input - Output 1

When setting multiple selections to false, the output:

Create file input - Output 2

When setting multiple selections to true, the output:

Create file input - Output 3

Getting Previous Files

File Input get files

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_FileInput_getFiles\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value></block></xml>"}

This block gets the file from the previous file(s) that are selected. 

Parameters: Screen Item (Input Control: File Input)
Output: Screen Item
Sample code:

To check this, it can be combined with the file’s and array’s blocks. It sets a button to check whether it can get the file.

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">createButton</field></block></value><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">gettingFile</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_FileInput_getFiles\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value></block></value><next><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">result</field></block></value><value name=\"content\"><block type=\"File_FileContainer_getName\"><value name=\"this\"><block type=\"lists_index_get\"><value name=\"LIST\"><block type=\"variables_get\"><field name=\"VAR\">gettingFile</field></block></value><value name=\"INDEX\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow></value></block></value></block></value></block></next></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>fileInput</variable><variable>createButton</variable><variable>result</variable><variable>gettingFile</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">fileInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createFileInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"Control_FileInput_setMultiple\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">createButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Getting files</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">createButton</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">result</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">result</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">createButton</field></block></value><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">gettingFile</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_FileInput_getFiles\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value></block></value><next><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">result</field></block></value><value name=\"content\"><block type=\"File_FileContainer_getName\"><value name=\"this\"><block type=\"lists_index_get\"><value name=\"LIST\"><block type=\"variables_get\"><field name=\"VAR\">gettingFile</field></block></value><value name=\"INDEX\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow></value></block></value></block></value></block></next></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When choosing the PNG file and clicking “Getting files”, the output:

File Input get files - Output 1

When getting the file name and clicking “Getting files”, the output:

File Input get files - Output 2

When getting image inside the file and clicking “Getting files”, the output:

File Input get files - Output 3

When getting video inside the file and clicking “Getting files”, the output:

File Input get files - Output 5

When getting text inside the file (Accepted file type: txt) and clicking “Getting files”, the output:

File Input get files - Output 6

File Format Restriction

File Input filter file type

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_FileInput_setFileTypeFilter\"><field name=\"filter\">FileInputTypeFilter.None</field><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value></block></xml>"}

This block restricts user to select the file with their file type.

Parameters:

  • Screen Item (Input Control: File Input)
  • Display setting: none (Default)/image/video/audio

Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>fileInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">fileInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createFileInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"Control_FileInput_setFileTypeFilter\"><field name=\"filter\">FileInputTypeFilter.Audio</field><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

The output after choosing a file with no restriction:

File Input filter file type - Output 1

The output after choosing a file with only allow image input (Accepted file type: JPEG, PNG, etc):

File Input filter file type - Output 2

The output after choosing a file with only allow video input (Accepted file type: MP4, M4A, etc):

File Input filter file type - Output 3

The output after choosing a file with only allow audio input (Accepted file type: MP3, WAV, etc):

File Input filter file type - Output 4

File Input With Multiple Selections

File Input allow multiple selections

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_FileInput_setMultiple\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></xml>"}

This block is used to set whether user can select one file or more than one file.

Parameters:

  • Screen Item (Input Control: File Input)
  • Display setting: Boolean (True/False [Default])

Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>createFileInput</variable><variable>createButton</variable><variable>count</variable><variable>gettingFile</variable><variable>fileInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">createFileInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createFileInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"true\"></mutation><field name=\"fileTypeFilter\">FileInputTypeFilter.None</field><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></value><next><block type=\"Control_FileInput_setMultiple\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">createFileInput</field></block></value><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">createFileInput</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">createButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Getting the total number of files</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">createButton</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">count</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">count</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">createButton</field></block></value><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">gettingFile</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_FileInput_getFiles\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">createFileInput</field></block></value></block></value><next><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">count</field></block></value><value name=\"content\"><block type=\"text_join\"><mutation items=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">There are </field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\"/></shadow><block type=\"lists_length\"><value name=\"VALUE\"><block type=\"variables_get\"><field name=\"VAR\">gettingFile</field></block></value></block></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\"> file(s).</field></shadow></value></block></value></block></next></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

After clicking the button, it will show the result of the total amount of file(s), when setting it to false, the output:

File Input allow multiple selections - Output 1

When sets it to true, the output:

File Input allow multiple selections - Output 2

Checking File Input is Multiple or Not

File Input is Multiple

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_FileInput_isMultiple\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value></block></xml>"}

This block checks the number of files is only one or more than one. 

Parameters: Screen Item (Input Control: File Input)
Output: Screen Item
Sample code:

It will be combined with different logic block such as if-else condition block.

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"controls_if\"><mutation else=\"1\"/><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"Control_FileInput_isMultiple\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value></block></value><statement name=\"DO0\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">count</field></block></value><value name=\"content\"><block type=\"text_join\"><mutation items=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">There are </field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\"/></shadow><block type=\"lists_length\"><value name=\"VALUE\"><block type=\"variables_get\"><field name=\"VAR\">gettingFile</field></block></value></block></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\"> file(s).</field></shadow></value></block></value></block></statement><statement name=\"ELSE\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">count</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Only one file is selected.</field></shadow></value></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>fileInput</variable><variable>createButton</variable><variable>count</variable><variable>gettingFile</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">fileInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createFileInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><field name=\"fileTypeFilter\">FileInputTypeFilter.None</field><value name=\"isMultiple\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">FALSE</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">createButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Check multiple files</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">createButton</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">count</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">count</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">createButton</field></block></value><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">gettingFile</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_FileInput_getFiles\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value></block></value><next><block type=\"controls_if\"><mutation else=\"1\"/><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"Control_FileInput_isMultiple\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">fileInput</field></block></value></block></value><statement name=\"DO0\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">count</field></block></value><value name=\"content\"><block type=\"text_join\"><mutation items=\"3\"/><value name=\"ADD0\"><shadow type=\"text\"><field name=\"TEXT\">There are </field></shadow></value><value name=\"ADD1\"><shadow type=\"text\"><field name=\"TEXT\"/></shadow><block type=\"lists_length\"><value name=\"VALUE\"><block type=\"variables_get\"><field name=\"VAR\">gettingFile</field></block></value></block></value><value name=\"ADD2\"><shadow type=\"text\"><field name=\"TEXT\"> file(s).</field></shadow></value></block></value></block></statement><statement name=\"ELSE\"><block type=\"Control_TextBlock_setContent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">count</field></block></value><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Only one file is selected.</field></shadow></value></block></statement></block></next></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When there exists more than one file, the output:

File input is multiple - Output 1

When there only contains one file, the output:

File input is multiple - Output 2

Numeric Input

Generate the Numeric Input

Create numeric input

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_createNumericInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></xml>"}

This block is used for creating the numeric (1,2,3…) input.

Parameters: Display setting:

  • Minimum: op (Default: 0)
  • Maximum: Number (Default: 0)
  • Step: Number (Default: 0)

Output: Screen Item
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>numInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">numInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createNumericInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"3\" _input_init=\"true\"></mutation><value name=\"min\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow></value><value name=\"max\"><shadow type=\"math_number\"><field name=\"NUM\">100</field></shadow></value><value name=\"step\"><shadow type=\"math_number\"><field name=\"NUM\">3</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">numInput</field></block></value></block></next></block></next></block></next></block></statement></block></xml>"}

The input:

Create numeric input - Output 1

You can input the value using typing or scrolling:

Create numeric input - Output 2

You can set the minimum and maximum value and the step. The step means if you set the step is 3, you can only input multiples of 3 such as 3, 6, 9.

Create numeric input - Ouput 3

Step Attribute in Numeric Input

Numeric Input set step

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_NumericInput_setStep\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">numericInput</field></block></value><value name=\"step\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow></value></block></xml>"}

This block is used for setting the step for the numeric input. 

Parameters: Display setting: Number (Default: 0)
Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>numericInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">numericInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createNumericInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"Control_NumericInput_setStep\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">numericInput</field></block></value><value name=\"step\"><shadow type=\"math_number\"><field name=\"NUM\">2</field></shadow></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">numericInput</field></block></value></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When step sets to 2, the output:

Numeric Input set step - Output

Maximum Value Restriction in Numeric Input

Numeric Input set max

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_NumericInput_setMax\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">numericInput</field></block></value><value name=\"max\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow></value></block></xml>"}

This block is used for setting the maximum value for the numeric input.

Parameters: Display setting: Number (Default: 0)
Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>numericInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">numericInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createNumericInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"Control_NumericInput_setMax\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">numericInput</field></block></value><value name=\"max\"><shadow type=\"math_number\"><field name=\"NUM\">5</field></shadow></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">numericInput</field></block></value></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When it sets to 5, it cannot choose the value that larger than 5, the output:

Numeric Input set max - Output

Minimum Value Restriction in Numeric

Numeric Input set min

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"Control_NumericInput_setMin\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">numericInput</field></block></value><value name=\"min\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow></value></block></xml>"}

This block is used for setting the minimum value for the numeric input.

Parameters: Display setting: Number (Default: 0)
Output: N/A
Sample code:

{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>numericInput</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">numericInput</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createNumericInput\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation></block></value><next><block type=\"Control_NumericInput_setMin\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">numericInput</field></block></value><value name=\"min\"><shadow type=\"math_number\"><field name=\"NUM\">-1</field></shadow></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">numericInput</field></block></value></block></next></block></next></block></next></block></next></block></statement></block></xml>"}

When it sets to -1, it cannot choose the value that smaller than -1, the output:

Numeric Input set min - Output

Table of Content