Right you can see what a blueprint looks like in the Rual Studio Editor
Here you will find all blueprints ever created within your Rual Cluster. You can make as many blueprints as you like. We don't limit your creativity in any way!
Click create blueprint
to open and create an empty blueprint.
ui: page
action. If for some reason the menu disappears before you select an action, or if you want to add another action in the same blueprint, you can open this menu anytime with a click of the right mouse button somewhere in the blueprint and then choose "selector".
Hello World Panel
ui: page
block by clicking on the pencil icon. A modal opens where you can type the URL. If you choose an URL that is already in use, you will get an error message here. Type tutorial-helloworld
. The full URL will be: {{ YOUR HOSTNAME }}/tutorial-helloworld.
UI: page
. That means your code will not work now. You can activate the blueprint by clicking "Activate" at the top right of the blueprint. You can deactivate the blueprint anytime.
ui: page
another action was created with it, the ui: render page
, and it is connected with a white line The Flow
. For this tutorial we are going to build a simple panel with Hello World.
By dragging out the ui component pin from the ui: render page
, a menu with all compatible ui component blocks will open. Copy all blocks as you see them in the image to the left. Click on the circle next to the ui component pin with the left mouse button, hold and drag out a line. Release the mouse button and the menu appears. Type card in the menu bar and select the cards: basic card
. Try using your right mouse button when you pull out the title pin. Drag out a line and release. Instead of opening a menu, you get the "most used" block if you use the right mouse button. Of course, this is different for each pin that you pull out.
view
button in the ui: page
block to see the result. It will open this page in staging mode, this means that the URL is followed by ?staging. The staging mode shows the changes you made before you save the blueprint. This way you can test your code and styling without saving all the time. Now that you finished the first steps, click save your changes in the right bottom corner to save the changes.
Congratulations! This is your first code in Rual Studio. Now continue building your page in the next tutorial: Button with modal
.