Tutorial - Using the Visual Builder

What is the Visual Builder?

The Visual Builder is a feature that can be used to create a user interface directly from your VIKTOR environment. It allows you to quickly put together your desired UI without writing a single line of code.

You can find the Visual Builder under VIKTOR Labs in the main menu of your VIKTOR environment.

In this short guide you will learn how to transfer a blueprint created with the Visual Builder to your Development Workspace. By doing so you will be able to develop your app further. Please make sure that you have activated your account before starting this guide.

Local development

1. Create a new folder for your app

   Add a new folder in your filesystem (e.g. C:\Users\<username>\viktor-apps\my-app) and open it in your code editor

   VS Code

   

   PyCharm

   

GitHub Codespaces

1. Open your codespace (see setup instructions)

2. Create app template files

   In the terminal, type the command shown below and hit enter

   viktor-cli create-app --app-type editor

3. Install and start the app

   We'll do a clean installation of the app's dependencies by running the following command in the terminal. Just be patient, this could take a few minutes.

   viktor-cli clean-start

   If all went well, your app is installed and running in your development workspace:

   INFO    :  __      __ __  __  __
   INFO    :  \ \    / / | | | |/ /
   INFO    :   \ \  / /  | | | ' /
   INFO    :    \ \/ /   | | |  <
   INFO    :     \  /    | | | . \
   INFO    :      \/     |_| |_|\_\
   INFO    :   _______   ____    _____
   INFO    :  |__   __| / __ \  |  __ \
   INFO    :     | |   | |  | | | |__) |
   INFO    :     | |   | |  | | |  _  /
   INFO    :     | |   | |__| | | | \ \
   INFO    :     |_|    \____/  |_|  \_\
   INFO    : VIKTOR connector vX.Y.Z
   INFO    : VIKTOR SDK vX.Y.Z
   INFO    : Connecting to platform...
   INFO    : Connection is established: <URL>  <---- here you can see your app
   INFO    : The connection can be closed using Ctrl+C
   INFO    : App is ready

   Do not close the terminal as this will break the connection with your app.

4. Click 'Copy Blueprint' in the Visual Builder, replace the content of the app.py file with the generated Blueprint and save your file.

5. Go to your your development workspace to inspect the app you just created with the Visual Builder! Go to the the main menu, select 'Workspaces' and open your Development workspace by clicking the button.