# Window Editor

The "Window Editor" button (form editor) in the development menu allows you to create your own windows and display them in both modal and non-modal modes, including asynchronously relative to the script flow.

[Working with the Window Editor is demonstrated here.](https://sherparpa.ru/ucontent/?0F)

A modal window does not allow the application to continue working until it is closed. A non-modal window allows the User to switch to other modes of application operation without closing it, but is always visually positioned above the application. Additionally, created windows can be bound to user elements in other applications.

The Window Editor allows for both fixed and adaptive layout of windows.

Adaptive layout changes the design of the page depending on the User's behavior, platform, screen size, and device orientation, and is an integral part of modern web development. It allows significant savings by not having to redraw a new design for each resolution, but rather changing the sizes and positions of individual elements.

Fixed layout is a type of layout where the width of the content is rigidly defined in pixels and does not change depending on the size of the browser window.

The user interface of the Window Editor consists of the following main areas:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcova0ENXTrsnqIUf_kwtKOpX4FyCEs1n3KtnuMQlchOh-p4HPkuQO3oS3WXOH4lzPBgd12UtkLAdCxyGEIHrCO2cWdjhFYUfrw-4aK3OtnfzTBBC08KUhi9qrTsxR759J9AZ7C?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""><figcaption></figcaption></figure>

1. Main menu (top panel);
2. Common elements and containers;
3. Central working area;
4. Properties panel of elements.

<table data-header-hidden><thead><tr><th width="59.75"></th><th width="224.3333740234375"></th><th width="367.5166015625"></th></tr></thead><tbody><tr><td><strong>No.</strong></td><td><strong>Interface Element</strong></td><td><strong>Description</strong></td></tr><tr><td>1.</td><td>“File” menu</td><td>Allows you to use basic functions for managing user forms in the window editor.</td></tr><tr><td>2.</td><td>“Edit” menu</td><td>Allows you to perform actions such as undo, redo, copy, etc.</td></tr><tr><td>3.</td><td>“New Window” button</td><td>Allows you to expand a new form for editing.</td></tr><tr><td>4.</td><td>“Preview” button</td><td>Allows you to see the version that will be available after layout. You can also use the F5 key.</td></tr><tr><td>5.</td><td>“Edit Window Properties” button</td><td>Allows you to adjust the form settings. You can also use the F8 key.</td></tr><tr><td>6.</td><td>“Edit Window Events” button</td><td>Allows you to adjust the form settings. You can also use the Ctrl+F8 key combination.</td></tr><tr><td>7.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdfM6jAUdmsmDoyM2XzZ4dIz1j0TgMRNQRsRQ7jnnx8g6ck6cQZas4GSWJ44kN8hSnOBnRWRY2HkwaAzztFl76KQxjNMv9epYW9eMN7vNhmF5AvaKxR2X3bF0cby2aU7FLljqVROg?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to undo an action.</td></tr><tr><td>8.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcmD0Sb9YzzVVOFTSO9s_mwf5LU1sDz-22GPgPPcgiJa0vtfgbRl8ThprmaKLeAIwdOfKYZybAmSjgVDUOWcpniVY6WAufZ4-3sre9yIAIymfbYfsQf0DcCTEhu_3jl57wFxwjDpg?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to redo an action.</td></tr><tr><td>9.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdqaWfuyvSmg9n7bnYREYIu-R69aA4kohn23N2fhAAxLu_ubh0VTs2tzGug58MhZ0ile07bI8Y2_nuo3MbJowaJR3yZVNDRHOiY9GkJUlksJbSM6gVSa5HybeBu6f2HS-RIRDCd9A?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to delete the selected element.</td></tr><tr><td>10.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXecYNrAgMcvPg-wwXqKGnVjbEGO27XPPWYLzH_-QvTMnMjZketidCAjUQF0DmboP8acB70ud5D-f3DeV30NjjCTuqF88Nf2cEf7KCvwUxtxXDeyw5sk13wBMIOFiip6kKtBUZ_hlg?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to align the selected element to the left.</td></tr><tr><td>11.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfu1vgnhMnpK7avvRinGSQOmCL3Fegs9ONv82wluXq3eK9yL_lBP0qIyWjsrgOzFuACvAkjQcsTVznEpS-MYkApfbuTN4QTgXzuVbkwZ8X3FTqhCDPUlLfcTJaIM2fWCngg6rOa?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to align the selected element to the center.</td></tr><tr><td>12.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc_oWbZgC8uH98PlyB0r7E4M8JSuzPcWTwN9N2_Qhg3vEVyhTic38GCvC8vDUQ713rzy4dJb6exAGpMoszDb5db2X4fpQuYPvAyP0f8nG3WOQcTqpxB1FVhFTeR2X2hoYHDqiC74Q?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to align the selected element to the right.</td></tr><tr><td>13.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdKzAPGKMw7pfkdNsQ_gPsG5HSsT-rviIZ2_TdUFM9kAtuaN7FlBQTsSbg6JfUpi2Ga-uvSz-iwymca-XxH9ZvtfJd4A8fdmyGG8k2pIAvCLbcNgDPt3DWhIRJ7LLErvKEFAI0Z?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to align the selected element to the top.</td></tr><tr><td>14.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe2qaZ3WQ-Np7GwP3ohhr3P076nIE43hmD-aGLRmcN9Yja6VItREoRAnyOvCGzjwPeXTifAcxwyJ9ajrdl1sEnOgB9kJlkvuxIqjfLgBFRSOlwEagZdGYMkQEiYJtV7tEBv4WWY?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to align the selected element to the middle.</td></tr><tr><td>15.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdFFmZ0tA7I811a5k1yShEiV3jD-Q2XL9JJLQMzgc_WOdOWYJ864nqBh3XipGA8oJ6nEbK0H_a-dTh9HSa5yEaKbFeDjxcEZi7UQBVj8ej92o8S4m9DvqVmNgwCuLnjiwd2Qfns?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to align the selected element to the bottom.</td></tr><tr><td>16.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXftE0gZNJ-bnNfqF12Q545VBrAsH_HjbV-rk5_MKSzI94MuiBANownacL_zin7Eh2RvZQstZQc1tgqJBdglCsJPlMmKw2I1MVMJyrDrJAj5k_UTlsLn2huvC1rEgxNMbHTv5Ed2sw?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to align the selected element width.</td></tr><tr><td>17.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXder6WJVGOhv-1jCnjWqoGLE2CiBaw1-l1gOeU8UHEXvwUPcz4IJdNBV8BTGXRr9JeDymNnWF6fY_fC21IZuQao8cbWElpJ8C8zHvSGWOAnM8kGdnFfCuiAESb7QXKVj1lqso9rgg?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to align the selected element height.</td></tr><tr><td>18.</td><td>button <img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeuDOpzAW6gw0ZqJMOauZeH4-hi33MvVS6NyyptTJIa9g2nBaUWGFbQPc2j0w0hhawqsQSicBvPGn0uisJ0CyqBqzULeZbCoqWqDjfgo6zfv3HAKYhEcBTMM46RqTP8_U_1dh9u?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""></td><td>Allows you to align the selected element sizes.</td></tr></tbody></table>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXda-Ft4qUmXhM9HSN7-GM2uIVWgVxH1U0cccx3KdBHeDh5aCyjnlkRt37Svher7unGZmJZDsf5YrWUi6GZuvid8hdA9V2bkhQcftkuBfAQF3gV4EfGaqgUTqCWGbY8_PleAzMw3bg?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""><figcaption></figcaption></figure>

The "File" menu of the Window Editor contains the following functions:

<table data-header-hidden><thead><tr><th width="58.63330078125"></th><th width="234.38330078125"></th><th width="358.5833740234375"></th></tr></thead><tbody><tr><td><strong>No.</strong></td><td><strong>Interface Element</strong></td><td><strong>Description</strong></td></tr><tr><td>1.</td><td>“New Window” item</td><td>Allows you to expand a new form for editing.</td></tr><tr><td>2.</td><td>“Export to File” item</td><td>Allows you to export the form to a JSON file. You can also use the Ctrl+E key combination.</td></tr><tr><td>3.</td><td>“Import from File” item</td><td>Allows you to import the form from a JSON file. You can also use the Ctrl+I key combination.</td></tr><tr><td>4.</td><td>“Preview Window” item</td><td>Allows you to see the version that will be available after layout. You can also use the F5 key.</td></tr><tr><td>5.</td><td>“Edit Window Properties” item</td><td>Allows you to adjust the form settings. You can also use the F8 key.</td></tr><tr><td>6.</td><td>“Edit Window Events” item</td><td>Allows you to adjust the form settings. You can also use the Ctrl+F8 key combination.</td></tr><tr><td>7.</td><td>“Close” item</td><td>Allows you to close the Window Editor.</td></tr></tbody></table>

The "Edit Form Settings" window can be opened in several ways:

* From the "File" menu using the "Edit Window Properties" or "Edit Window Events" items.
* From the main menu using the "Edit Window Properties" or "Edit Window Events" buttons.
* Using the keyboard keys "F8" and "Ctrl+F8" to open the Form Settings Editor on the "Properties" tab and the "Events" tab, respectively.

The "Properties" tab of the "Edit Form Settings" window contains the following functions:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcL7JDNVz-R2clebB04w1cF-vuj0rQ6UTQzLgeewNmJajRdaXrj5oXCs1Gydm4bS7kIFllvqqNPSJyICJ0X9arF821v9tGz00Zx10SniaOSSpKzFCaOhyFi_T3tNe7FKxPLN_3gvA?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="60.86669921875"></th><th width="241.20001220703125"></th><th width="383.03326416015625"></th></tr></thead><tbody><tr><td><strong>No.</strong></td><td><strong>Interface Element</strong></td><td><strong>Description</strong></td></tr><tr><td>1.</td><td>“Add Element” button</td><td>Allows you to add an element from the list of common elements by selecting from a dropdown list.</td></tr><tr><td>2.</td><td>“Move Up” button</td><td>Allows you to move the selected element up.</td></tr><tr><td>3.</td><td>“Move Down” button</td><td>Allows you to move the selected element down.</td></tr><tr><td>4.</td><td>“Binding Name” column</td><td>Allows you to select a variable to which another variable will be bound.</td></tr><tr><td>5.</td><td>“Binding Type” column</td><td>Type of binding, comparison or assignment.</td></tr><tr><td>6.</td><td>“Binding Value” column</td><td>Allows you to select a variable to which a value will be bound.</td></tr></tbody></table>

The "Events" tab of the "Edit Form Settings" window contains the following functions:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeqy7Bxe7Z8_nwYBpzz5ub7z5E1vnVF47VpbzhgNp-vKZ1OVtum-xNfe8jPHU8mNXNmtxZtTygGfekGWYBdRV5YKuaVtdSuWm7wyPZbHIFES4QE-pHwZc4Xq3ArXyjoO97gliIrAw?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="58.63336181640625"></th><th width="267.88330078125"></th><th width="356.35003662109375"></th></tr></thead><tbody><tr><td><strong>No.</strong></td><td><strong>Interface Element</strong></td><td><strong>Description</strong></td></tr><tr><td>1.</td><td>“Add Element” button</td><td>Allows you to add an element from the list of common elements that are already installed in the window (form) by selecting from a dropdown list.</td></tr><tr><td>2.</td><td>“Add Button Events” button</td><td>Allows you to add button events.</td></tr><tr><td>3.</td><td>“Name” column</td><td>Name of the added element.</td></tr><tr><td>4.</td><td>“Value” column</td><td>Value of the event.</td></tr></tbody></table>

The "Edit" menu of the Window Editor provides the following options:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfrX0lN60Sa2ZOvNBFyGURJblAUJtDkatGi4YPmCvI-MOqsWzj5IdBIk8_2btOAQIeknxqGAuU2-dxd-PiQ9EQDVFUSY0zWgmgj1_ocd2Jv_R8iUXZLGhTFKjnbUyFoWhbpWm8w?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="54.16668701171875"></th><th width="236.38330078125"></th><th width="349.88336181640625"></th></tr></thead><tbody><tr><td><strong>No.</strong></td><td><strong>Interface Element</strong></td><td><strong>Description</strong></td></tr><tr><td>1.</td><td>“Undo” item</td><td>Allows you to undo an action. You can also use the Ctrl+Z key combination.</td></tr><tr><td>2.</td><td>“Redo” item</td><td>Allows you to redo an action. You can also use the Ctrl+Y key combination.</td></tr><tr><td>3.</td><td>“Copy” item</td><td>Allows you to copy an element. You can also use the Ctrl+C key combination.</td></tr><tr><td>4.</td><td>“Paste” item</td><td>Allows you to paste an element. You can also use the Ctrl+V key combination.</td></tr><tr><td>5.</td><td>“Delete” item</td><td>Allows you to delete an element. You can also use the Delete key.</td></tr></tbody></table>

When using the Window Editor, a number of elements and tools are available:

* multi-level table layout;
* buttons, checkboxes, text fields;
* regular and dropdown lists, as well as checkbox lists;
* radio buttons and radio groups;
* calendars;
* password and other special types of fields;
* images;
* progress bars;
* text editor with formatting;
* splitters, tabs, scroll bars;
* editable data tables;
* other controls.

Each control has more than 50 customizable properties that determine their appearance and behavior. The values of each of them, as well as user actions in the window, can be bound to changes in the values of selected variables, and vice versa - changing the values of variables leads to changes in the values of corresponding controls. This functionality allows for the development of branched dialog and expert systems, robot settings windows, interactive hints and assistants, as well as entire multi-window applications within the robot's script.

Important! To demonstrate the functionality, a game "[Tic-Tac-Toe](https://docs.sherparpa.ru/sherpa-designer/primery-robotov/krestiki-noliki)" has been added to the Project folder - the world's first tic-tac-toe implemented using RPA platform tools.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdavxbln4skoIgI_7Ber26gphxsKJIFTn2eGEvQPtJV8Ih1T0OvBbh7RmARHYLf6vgUn0WJw6wvKeT_HdbQWm254WKcoAunrxb9Ez14tLSWc_OkUtQWfdHramvBC4ceSHdE9PssIw?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="58.63330078125"></th><th width="222.10003662109375"></th><th width="424.46649169921875"></th></tr></thead><tbody><tr><td><strong>No.</strong></td><td><strong>Interface Element</strong></td><td><strong>Description</strong></td></tr><tr><td>1.</td><td>Common Elements</td><td></td></tr><tr><td>1.1.</td><td>Cursor</td><td>Allows you to select an element on the form for its configuration/movement.</td></tr><tr><td>1.2.</td><td>Label</td><td>Allows you to set a text label in the editable window (form).</td></tr><tr><td>1.3.</td><td>Button</td><td>Allows you to set a button.</td></tr><tr><td>1.4.</td><td>CheckBox</td><td>Allows you to set a checkbox.</td></tr><tr><td>1.5.</td><td>TextBox</td><td>Allows you to set a text field.</td></tr><tr><td>1.6.</td><td>ComboBox</td><td>Allows you to select one item from a list of predefined options.</td></tr><tr><td>1.7.</td><td>CheckedListBox</td><td>Allows you to set a simple list with checkboxes.</td></tr><tr><td>1.8.</td><td>DateTimePicker</td><td>Allows you to set an element for selecting date and time.</td></tr><tr><td>1.9.</td><td>LinkLabel</td><td>Allows you to set an element with a hyperlink.</td></tr><tr><td>1.10.</td><td>ListBox</td><td>Allows you to set a simple list.</td></tr><tr><td>1.11.</td><td>MaskedTextBox</td><td>Allows you to set a text field with input control and automatic error checking.</td></tr><tr><td>1.12.</td><td>MonthCalendar</td><td>Allows you to set an element with a date that can be selected using a visual calendar for the month.</td></tr><tr><td>1.13.</td><td>NumericUpDown</td><td>Allows you to set a counter with a numeric input field.</td></tr><tr><td>1.14.</td><td>PictureBox</td><td>Allows you to set an element displaying graphic objects in the following formats: raster images, GIF, JPEG, metafile, or icon.</td></tr><tr><td>1.15.</td><td>ProgressBar</td><td>Allows you to set an indicator that displays the progress of a task.</td></tr><tr><td>1.16.</td><td>RadioButton</td><td>Allows you to set an element that provides the option to select one option from a predefined set.</td></tr><tr><td>1.17.</td><td>RichTextBox</td><td>Allows you to set a text field with the ability to input and format text.</td></tr><tr><td>1.18.</td><td>DataGridView</td><td>Allows you to set an element displaying data in a tabular format.</td></tr><tr><td>2.</td><td>Containers</td><td></td></tr><tr><td>2.1.</td><td>Cursor</td><td>Allows you to select an element on the form for its configuration/movement.</td></tr><tr><td>2.2.</td><td>GroupBox</td><td>Allows you to set a frame around a group of controls.</td></tr><tr><td>2.3.</td><td>Panel</td><td>Allows you to set a panel containing other controls.</td></tr><tr><td>2.4.</td><td>SplitContainer</td><td>Allows you to set two panels separated by a splitter. By changing the position of the splitter, you can change the sizes of these panels.</td></tr><tr><td>2.5.</td><td>TabControl</td><td>Allows you to set a control with multiple tabs. Each tab will hold some set of other controls such as buttons, text fields, etc.</td></tr><tr><td>2.6.</td><td>TableLayoutPanel</td><td>Allows you to set an element for organizing components in a grid or table format.</td></tr></tbody></table>

The central working area of the Window Editor is intended for working with the created window (form) and its design. It displays the results of all manipulations performed on the top panel of the main menu and on the side panels of the Window Editor.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfkzn5KjmgUTxhz5kOjVvThS2pdL2ZNcb_Vyi_nPUKz0ffLfsZbs8sxldIF7qy8NPkG21kGOp0Z_pIT0H8ivpi9h1v-HiSH_qg8sZ4MTdcK_glhhvVlATK47UO5fAx4Cuja2ZrdKg?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""><figcaption></figcaption></figure>

The properties panel of elements allows you to configure the window (form), change its name, and configure the properties of each of the installed elements and containers in the window (form) separately. To select the element that needs to be configured, it must be selected from the dropdown list at the top of the panel. The right panel contains tabs, the number and content of which change depending on the selected element. Each of the tabs can be expanded for configuring the window (form) element. For convenience, the contents of the tabs can be sorted not only by categories but also alphabetically.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdIWOftg5Q6-4Qm42jN_pmBofNTZc8S3xIxbshYOf8UJnWCD0ugxDfHiw3qatecVoQxGsiSYSIocjBphQ7btBrKb5NO8uprf87eAbkZ77GoRDZlFZ3keu4aVanCbxw0OpomR5UA5w?key=9HEOKB3zstPtO4F6ZGyDgg" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="58.63336181640625"></th><th width="232.1500244140625"></th><th width="413.29998779296875"></th></tr></thead><tbody><tr><td><strong>No.</strong></td><td><strong>Interface Element</strong></td><td><strong>Description</strong></td></tr><tr><td>1.</td><td>“Appearance” tab</td><td>Configuration of the appearance parameters of the selected element.</td></tr><tr><td>2.</td><td>“Data” tab</td><td>Configuration of the data binding of the selected element.</td></tr><tr><td>3.</td><td>“Layout” tab</td><td>Configuration of the layout of the selected element.</td></tr><tr><td>4.</td><td>“Behavior” tab</td><td>Configuration of the behavior of the selected element.</td></tr><tr><td>5.</td><td>“Other” tab</td><td>Configuration of other properties of the selected element.</td></tr><tr><td>6.</td><td>“Development” tab</td><td>Configuration of properties related to development.</td></tr><tr><td>7.</td><td>“Accessibility” tab</td><td>Configuration of properties related to accessibility.</td></tr><tr><td>8.</td><td>“Window Style” tab</td><td>Configuration of the window style.</td></tr><tr><td>9.</td><td>“Focus” tab</td><td>Configuration of properties related to the focus of the selected element.</td></tr></tbody></table>

A detailed description of the properties can be found on the [website](https://learn.microsoft.com/ru-ru/office/vba/language/reference/user-interface-help/properties-microsoft-forms).