In Wized all dynamic fields are powered by functions. A dynamic field is any field that can change based on user input or other factors. For example, the following fields are dynamic:
The text of an element that is populated from an API response.
The visibility of an element that is based on a user's input.
The body of a request that is populated from the user's selections.
A function is a piece of code that takes some input and returns some output. For example, the following function takes a number parameter as input and returns the number multiplied by 2:
js
(number) => {\\nreturn number *2;\\n};
(number) => {\\nreturn number *2;\\n};
In the case of Wized all dynamic fields are powered by a function that takes predefined parameters and expects an output. For example, the following function is used to dynamically populate the user's name in a text element:
js
(c, f, i, n, r, v, e, t) => {\\nreturn r.load_user.data.name;\\n};
(c, f, i, n, r, v, e, t) => {\\nreturn r.load_user.data.name;\\n};
The Function Editor provides autocompletion for all parameters. This means that when you start typing a parameter, a list of available values will be shown. For example, when typing v. a list with all available variables will be shown:
If you want to manually open the autocompletion list, you can press Ctrl + Space on your keyboard.
The Function Editor uses VS Code's editor under the hood, which provides a lot of useful keyboard shortcuts. Here are some of the most useful ones:
Shortcut
Description
Ctrl + X
Cut line (empty selection)
Ctrl + C
Copy line (empty selection)
Alt + ↑ / ↓
Move line up/down
Shift + Alt + ↓ / ↑
Copy line up/down
Ctrl + Shift + K
Delete line
Ctrl + Enter
Insert line below
Ctrl + Shift + Enter
Insert line above
Ctrl + Shift + \\\\
Jump to matching bracket
Ctrl + ] / [
Indent/outdent line
Home / End
Go to beginning/end of line
Ctrl + Home
Go to beginning of file
Ctrl + End
Go to end of file
Ctrl + ↑ / ↓
Scroll line up/down
Alt + PgUp / PgDn
Scroll page up/down
Ctrl + G
Go to Line...
Ctrl + F
Find
Ctrl + H
Replace
Ctrl + D
Add selection to next find
Alt + Click
Insert additional cursor
Ctrl + U
Undo last cursor operation
F2
Rename variable
\\n \\n \\n \\n'"
+ ]
+ },
+ "execution_count": 4,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ "html_content"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 5,
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "from bs4 import BeautifulSoup\n",
+ "\n",
+ "soup = BeautifulSoup(html_content, 'html.parser')\n",
+ "main_soup = soup.find('main') if soup.find('main') else soup"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 6,
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/plain": [
+ "\"# Function Editor \\u200b\\n\\n## Introduction \\u200b\\n\\nIn Wized all dynamic fields are powered by functions. A dynamic field is any\\nfield that can change based on user input or other factors. For example, the\\nfollowing fields are dynamic:\\n\\n * The text of an element that is populated from an API response.\\n * The visibility of an element that is based on a user's input.\\n * The body of a request that is populated from the user's selections.\\n\\n## What's a Function? \\u200b\\n\\nA function is a piece of code that takes some input and returns some output.\\nFor example, the following function takes a `number` parameter as input and\\nreturns the number multiplied by 2:\\n\\njs\\n\\n \\n \\n (number) => {\\n return number * 2;\\n };\\n \\n \\n (number) => {\\n return number * 2;\\n };\\n\\nIn the case of Wized all dynamic fields are powered by a function that takes\\npredefined parameters and expects an output. For example, the following\\nfunction is used to dynamically populate the user's name in a text element:\\n\\njs\\n\\n \\n \\n (c, f, i, n, r, v, e, t) => {\\n return r.load_user.data.name;\\n };\\n \\n \\n (c, f, i, n, r, v, e, t) => {\\n return r.load_user.data.name;\\n };\\n\\n## The Function Field \\u200b\\n\\nFunction fields look like this in the configuration panels:\\n\\nWhen clicking on a function field box, the Function Editor panel will open\\nproviding you a full code editor experience: \\n\\n## Autocompletion \\u200b\\n\\nThe Function Editor provides autocompletion for all parameters. This means\\nthat when you start typing a parameter, a list of available values will be\\nshown. For example, when typing `v.` a list with all available variables will\\nbe shown:\\n\\n\\n\\nIf you want to manually open the autocompletion list, you can press `Ctrl +\\nSpace` on your keyboard.\\n\\n## Keyboard Shortcuts \\u200b\\n\\nThe Function Editor uses VS Code's editor under the hood, which provides a lot\\nof useful keyboard shortcuts. Here are some of the most useful ones:\\n\\nShortcut| Description \\n---|--- \\n`Ctrl` \\\\+ `X`| Cut line (empty selection) \\n`Ctrl` \\\\+ `C`| Copy line (empty selection) \\n`Alt` \\\\+ `↑ / ↓`| Move line up/down \\n`Shift` \\\\+ `Alt` \\\\+ `↓ / ↑`| Copy line up/down \\n`Ctrl` \\\\+ `Shift` \\\\+ `K`| Delete line \\n`Ctrl` \\\\+ `Enter`| Insert line below \\n`Ctrl` \\\\+ `Shift` \\\\+ `Enter`| Insert line above \\n`Ctrl` \\\\+ `Shift` \\\\+ `\\\\`| Jump to matching bracket \\n`Ctrl` \\\\+ `] / [`| Indent/outdent line \\n`Home / End`| Go to beginning/end of line \\n`Ctrl` \\\\+ `Home`| Go to beginning of file \\n`Ctrl` \\\\+ `End`| Go to end of file \\n`Ctrl` \\\\+ `↑ / ↓`| Scroll line up/down \\n`Alt` \\\\+ `PgUp / PgDn`| Scroll page up/down \\n`Ctrl` \\\\+ `G`| Go to Line... \\n`Ctrl` \\\\+ `F`| Find \\n`Ctrl` \\\\+ `H`| Replace \\n`Ctrl` \\\\+ `D`| Add selection to next find \\n`Alt` \\\\+ `Click`| Insert additional cursor \\n`Ctrl` \\\\+ `U`| Undo last cursor operation \\n`F2`| Rename variable\\n\\n\""
+ ]
+ },
+ "execution_count": 6,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ "markdown_content = Converter.html_to_markdown(\n",
+ " html=str(main_soup), \n",
+ " base_url=base_url,\n",
+ " parser_features='html.parser', \n",
+ " ignore_links=True\n",
+ ")\n",
+ "markdown_content"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 7,
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ "
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓\n",
+ "┃ Function Editor ┃\n",
+ "┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛\n",
+ "\n",
+ "\n",
+ " Introduction \n",
+ "\n",
+ "In Wized all dynamic fields are powered by functions. A dynamic field is any field that can change based on user \n",
+ "input or other factors. For example, the following fields are dynamic: \n",
+ "\n",
+ " • The text of an element that is populated from an API response. \n",
+ " • The visibility of an element that is based on a user's input. \n",
+ " • The body of a request that is populated from the user's selections. \n",
+ "\n",
+ "\n",
+ " What's a Function? \n",
+ "\n",
+ "A function is a piece of code that takes some input and returns some output. For example, the following function \n",
+ "takes a number parameter as input and returns the number multiplied by 2: \n",
+ "\n",
+ "js \n",
+ "\n",
+ " \n",
+ " (number) => {\n",
+ " return number * 2;\n",
+ "};\n",
+ "\n",
+ "\n",
+ "(number) => {\n",
+ " return number * 2;\n",
+ "};\n",
+ " \n",
+ "\n",
+ "In the case of Wized all dynamic fields are powered by a function that takes predefined parameters and expects an \n",
+ "output. For example, the following function is used to dynamically populate the user's name in a text element: \n",
+ "\n",
+ "js \n",
+ "\n",
+ " \n",
+ " (c, f, i, n, r, v, e, t) => {\n",
+ " return r.load_user.data.name;\n",
+ "};\n",
+ "\n",
+ "\n",
+ "(c, f, i, n, r, v, e, t) => {\n",
+ " return r.load_user.data.name;\n",
+ "};\n",
+ " \n",
+ "\n",
+ "\n",
+ " The Function Field \n",
+ "\n",
+ "Function fields look like this in the configuration panels: \n",
+ "\n",
+ "🌆 Image: Function\n",
+ "Editor When clicking on a function field box, the Function Editor panel will open providing you a full code editor \n",
+ "experience: \n",
+ "\n",
+ "\n",
+ " Autocompletion \n",
+ "\n",
+ "The Function Editor provides autocompletion for all parameters. This means that when you start typing a parameter, \n",
+ "a list of available values will be shown. For example, when typing v. a list with all available variables will be \n",
+ "shown: \n",
+ "\n",
+ "🌆 Video:\n",
+ "Autocompletion \n",
+ "\n",
+ "If you want to manually open the autocompletion list, you can press Ctrl + Space on your keyboard. \n",
+ "\n",
+ "\n",
+ " Keyboard Shortcuts \n",
+ "\n",
+ "The Function Editor uses VS Code's editor under the hood, which provides a lot of useful keyboard shortcuts. Here \n",
+ "are some of the most useful ones: \n",
+ "\n",
+ " \n",
+ " Shortcut Description \n",
+ " ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ \n",
+ " Ctrl + X Cut line (empty selection) \n",
+ " Ctrl + C Copy line (empty selection) \n",
+ " Alt + ↑ / ↓ Move line up/down \n",
+ " Shift + Alt + ↓ / ↑ Copy line up/down \n",
+ " Ctrl + Shift + K Delete line \n",
+ " Ctrl + Enter Insert line below \n",
+ " Ctrl + Shift + Enter Insert line above \n",
+ " Ctrl + Shift + \\ Jump to matching bracket \n",
+ " Ctrl + ] / [ Indent/outdent line \n",
+ " Home / End Go to beginning/end of line \n",
+ " Ctrl + Home Go to beginning of file \n",
+ " Ctrl + End Go to end of file \n",
+ " Ctrl + ↑ / ↓ Scroll line up/down \n",
+ " Alt + PgUp / PgDn Scroll page up/down \n",
+ " Ctrl + G Go to Line... \n",
+ " Ctrl + F Find \n",
+ " Ctrl + H Replace \n",
+ " Ctrl + D Add selection to next find \n",
+ " Alt + Click Insert additional cursor \n",
+ " Ctrl + U Undo last cursor operation \n",
+ " F2 Rename variable \n",
+ " \n",
+ "
\n"
+ ],
+ "text/plain": [
+ "┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓\n",
+ "┃ \u001b[1mFunction Editor \u001b[0m ┃\n",
+ "┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛\n",
+ "\n",
+ "\n",
+ " \u001b[1;4mIntroduction \u001b[0m \n",
+ "\n",
+ "In Wized all dynamic fields are powered by functions. A dynamic field is any field that can change based on user \n",
+ "input or other factors. For example, the following fields are dynamic: \n",
+ "\n",
+ "\u001b[1;33m • \u001b[0mThe text of an element that is populated from an API response. \n",
+ "\u001b[1;33m • \u001b[0mThe visibility of an element that is based on a user's input. \n",
+ "\u001b[1;33m • \u001b[0mThe body of a request that is populated from the user's selections. \n",
+ "\n",
+ "\n",
+ " \u001b[1;4mWhat's a Function? \u001b[0m \n",
+ "\n",
+ "A function is a piece of code that takes some input and returns some output. For example, the following function \n",
+ "takes a \u001b[1;36;40mnumber\u001b[0m parameter as input and returns the number multiplied by 2: \n",
+ "\n",
+ "js \n",
+ "\n",
+ "\u001b[48;2;39;40;34m \n",
+ "\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m(number) => {\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m return number * 2;\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m};\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m(number) => {\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m return number * 2;\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m};\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \n",
+ "\u001b[0m\n",
+ "In the case of Wized all dynamic fields are powered by a function that takes predefined parameters and expects an \n",
+ "output. For example, the following function is used to dynamically populate the user's name in a text element: \n",
+ "\n",
+ "js \n",
+ "\n",
+ "\u001b[48;2;39;40;34m \n",
+ "\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m(c, f, i, n, r, v, e, t) => {\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m return r.load_user.data.name;\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m};\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m(c, f, i, n, r, v, e, t) => {\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m return r.load_user.data.name;\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \u001b[0m\u001b[38;2;248;248;242;48;2;39;40;34m};\u001b[0m\u001b[48;2;39;40;34m \u001b[0m\u001b[48;2;39;40;34m \u001b[0m\n",
+ "\u001b[48;2;39;40;34m \n",
+ "\u001b[0m\n",
+ "\n",
+ " \u001b[1;4mThe Function Field \u001b[0m \n",
+ "\n",
+ "Function fields look like this in the configuration panels: \n",
+ "\n",
+ "🌆 \u001b]8;id=628172;https://docs.wized.com/assets/function-editor.bc8a5cd7.png\u001b\\Image: Function\u001b]8;;\u001b\\\n",
+ "\u001b]8;id=628172;https://docs.wized.com/assets/function-editor.bc8a5cd7.png\u001b\\Editor\u001b]8;;\u001b\\ When clicking on a function field box, the Function Editor panel will open providing you a full code editor \n",
+ "experience: \n",
+ "\n",
+ "\n",
+ " \u001b[1;4mAutocompletion \u001b[0m \n",
+ "\n",
+ "The Function Editor provides autocompletion for all parameters. This means that when you start typing a parameter, \n",
+ "a list of available values will be shown. For example, when typing \u001b[1;36;40mv.\u001b[0m a list with all available variables will be \n",
+ "shown: \n",
+ "\n",
+ "🌆 \u001b]8;id=931281;https://docs.wized.com/assets/autocompletion.7cf692b5.mp4\u001b\\Video:\u001b]8;;\u001b\\\n",
+ "\u001b]8;id=931281;https://docs.wized.com/assets/autocompletion.7cf692b5.mp4\u001b\\Autocompletion\u001b]8;;\u001b\\ \n",
+ "\n",
+ "If you want to manually open the autocompletion list, you can press \u001b[1;36;40mCtrl + Space\u001b[0m on your keyboard. \n",
+ "\n",
+ "\n",
+ " \u001b[1;4mKeyboard Shortcuts \u001b[0m \n",
+ "\n",
+ "The Function Editor uses VS Code's editor under the hood, which provides a lot of useful keyboard shortcuts. Here \n",
+ "are some of the most useful ones: \n",
+ "\n",
+ " \n",
+ " \u001b[1m \u001b[0m\u001b[1mShortcut\u001b[0m\u001b[1m \u001b[0m\u001b[1m \u001b[0m \u001b[1m \u001b[0m\u001b[1mDescription\u001b[0m\u001b[1m \u001b[0m\u001b[1m \u001b[0m \n",
+ " ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mX\u001b[0m Cut line (empty selection) \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mC\u001b[0m Copy line (empty selection) \n",
+ " \u001b[1;36;40mAlt\u001b[0m + \u001b[1;36;40m↑ / ↓\u001b[0m Move line up/down \n",
+ " \u001b[1;36;40mShift\u001b[0m + \u001b[1;36;40mAlt\u001b[0m + \u001b[1;36;40m↓ / ↑\u001b[0m Copy line up/down \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mShift\u001b[0m + \u001b[1;36;40mK\u001b[0m Delete line \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mEnter\u001b[0m Insert line below \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mShift\u001b[0m + \u001b[1;36;40mEnter\u001b[0m Insert line above \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mShift\u001b[0m + \u001b[1;36;40m\\\u001b[0m Jump to matching bracket \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40m] / [\u001b[0m Indent/outdent line \n",
+ " \u001b[1;36;40mHome / End\u001b[0m Go to beginning/end of line \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mHome\u001b[0m Go to beginning of file \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mEnd\u001b[0m Go to end of file \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40m↑ / ↓\u001b[0m Scroll line up/down \n",
+ " \u001b[1;36;40mAlt\u001b[0m + \u001b[1;36;40mPgUp / PgDn\u001b[0m Scroll page up/down \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mG\u001b[0m Go to Line... \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mF\u001b[0m Find \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mH\u001b[0m Replace \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mD\u001b[0m Add selection to next find \n",
+ " \u001b[1;36;40mAlt\u001b[0m + \u001b[1;36;40mClick\u001b[0m Insert additional cursor \n",
+ " \u001b[1;36;40mCtrl\u001b[0m + \u001b[1;36;40mU\u001b[0m Undo last cursor operation \n",
+ " \u001b[1;36;40mF2\u001b[0m Rename variable \n",
+ " \n"
+ ]
+ },
+ "execution_count": 7,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ "from rich.markdown import Markdown\n",
+ "\n",
+ "Markdown(markdown_content)"
+ ]
+ }
+ ],
+ "metadata": {
+ "kernelspec": {
+ "display_name": "Python 3",
+ "language": "python",
+ "name": "python3"
+ },
+ "language_info": {
+ "codemirror_mode": {
+ "name": "ipython",
+ "version": 3
+ },
+ "file_extension": ".py",
+ "mimetype": "text/x-python",
+ "name": "python",
+ "nbconvert_exporter": "python",
+ "pygments_lexer": "ipython3",
+ "version": "3.10.12"
+ }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}