Introduction to blueprinting

Blueprinting is a collaborative process where multiple users can design and modify workflows on a shared canvas. It allows for the creation and organization of various elements like pages, modals, and APIs, streamlining development and team coordination.

About Blueprinting

A blueprint serves as an expansive canvas for designing workflows, where various blocks can be arranged to create distinct flows. Each blueprint is typically dedicated to a specific component, such as a page, modal, API, or a set of (public) functions, mirroring the practice of assigning a single class to a file in traditional coding. These blueprints can encapsulate diverse elements, from state pages to scheduled events invoking functions from other blueprints.

Blueprinting supports collaborative development, allowing multiple users to work on the same blueprint simultaneously. Team members can enhance clarity by adding comments, grouping blocks with custom titles, and copying blocks between blueprints as needed. Furthermore, RUAL ensures comprehensive audit logging of all activities, including blueprint modifications and block interactions, providing an automatic and continuous record of changes, like git commits, but with real-time collaboration.

Creating a Blueprint

When you create a new blueprint, RUAL first asks what type of blueprint you would like. Picking a type pre-arranges the canvas with the right starting blocks for that purpose, so you don't have to wire everything up from scratch. The available types are:

The chosen type only seeds the canvas; a blueprint remains a free-form canvas, so you can always add, remove, or combine blocks of any kind afterwards. Not sure which architecture fits? See Choosing Your Approach.

Connecting Blocks

Blocks connect through pins: flow pins decide what runs after what, value/object/array pins pass data, and special pins (storage, httpconnection, state) carry their resource. Drag from an out-pin to a matching in-pin: or drag onto empty canvas and pick from the search results to create the target block with the connection already made. Every pin type and its colors is documented in Core Concepts, and the connection shortcuts (smart pins, distant connections, auto-created blocks) in Tips & Tricks.

blueprint type select

Navigational Techniques

To streamline navigation within blueprints, you can employ the following methods:

• Utilize your mouse scroll wheel to zoom in and out of the current location.
• Use your trackpad, if available, to pinch and zoom within the blueprint, which is particularly efficient on devices like a Macbook Pro.

These techniques facilitate smooth navigation and exploration of your blueprint.

Context Menu

The default context-menu in RUAL Studio, accessible via right-click within a blueprint, offers several options for enhancing your workflow:

• Add new block: This option allows you to quickly create any block at any location, regardless of the pin type. Simply type the name of the block you need after selecting this option.
• Add function: This adds a new, blank function block, enabling the easy creation of functions anywhere in the blueprint. Functions are private by default.
• User guid: This generates a unique identifier (GUID) for the current user, allowing it to be used elsewhere in the blueprint.
• Go to center: This centers your view on the blueprint. You might need to zoom out if the view is still zoomed in.
• Add marker: This places a marker at your current position, useful for collaborative work in the same blueprint. A sound plays upon adding a marker.
• Add warning: This allows you to add a warning sign to prevent unintended changes when collaborating on a blueprint.
• Add comment: This allows you to add a comment at your current position. You can type your comment directly into the newly added block.
• Reload: This refreshes the current blueprint view, useful for resolving display issues that sometimes occur due to browser behaviors like auto-input focus.

context menu

Top bar: options

At the top right side of your blueprint, you'll find some options to make your life easier:

• Explorer: This button simplifies finding different types of blocks within your blueprint. For instance, it groups all API blocks for easy navigation.
• Tags: Manage and create new tags with this button, allowing you to quickly understand a blueprint's purpose from the overview.
• Feedback: Share suggestions or report issues about the blueprint directly with the team.
• Activate: When visible, this button activates the APIs, modals, and pages within the blueprint. By default, these elements are inactive until you hit activate.
• Deactivate: When visible, this button deactivates the APIs, modals, and pages within the blueprint. Confirmation is required, and the action is audit-logged.

blueprint top options

Bottom bar

The bottom bar gathers everything related to your unsaved changes into a single unified bar at the bottom of your blueprint. Its buttons become active as you make changes:

• undo: Steps back through your unsaved edits one change at a time.
• redo: Re-applies a change you just undid.
• console: Opens the console for the current blueprint.
• changes: Shows how many unsaved changes are open. Expand it to sequentially review all open unsaved blocks and their respective changes.
• Reset: Discards all unsaved modifications, restoring the blueprint to its most recent saved state, including changes made by other collaborators.
• Save: Saves your current modifications. You could also use Cmd/Ctrl + s to save.

Saving renders the undo option unavailable, generates a new precompiled version of the blueprint, and initiates deployment if the blueprint includes State UI pages, APIs, time-based events, or database events.

bottom bar changes

Was this page helpful? Tell us what to improve · RUAL Docs is an integral component of the RUAL ecosystem