User Interface Guide

Understanding the Workspace

Learn about the Wayvo workspace and how to effectively use its features.


Workspace Overview

The Wayvo workspace is designed to provide a seamless environment for building and managing your applications. It consists of several key areas that work together to streamline your development process.

Key Areas of the Workspace

Canvas

The canvas is the central area where you design and build your application's user interface. It provides a visual representation of your application, allowing you to drag and drop components to create the desired layout.

  • Adding Components: Drag components from the component library onto the canvas.
  • Arranging Components: Move and resize components to fit your design.
  • Customizing Components: Click on a component to open the properties panel and adjust its settings.

Component Library

The component library contains a wide range of pre-built components that you can use to build your application. These components include forms, buttons, charts, tables, and more.

  • Search and Filter: Use the search bar to find specific components or filter by category.
  • Drag and Drop: Simply drag components from the library onto the canvas to add them to your application.

Properties Panel

The properties panel allows you to customize the components you add to the canvas. It provides a range of settings and options to adjust the appearance and behavior of each component.

  • General Settings: Configure basic properties such as size, position, and visibility.
  • Data Binding: Connect components to data sources to display dynamic data.
  • Event Handling: Define actions and behaviors in response to user interactions.

Data Panel

The data panel is where you manage the data sources and variables used in your application. You can define new data sources, create queries, and set up data bindings for your components.

  • Data Sources: Add and configure connections to databases, APIs, and other data sources.
  • Variables: Create and manage variables to store and manipulate data within your application.
  • Data Queries: Write and test queries to retrieve data from your data sources.

Workflow Designer

The workflow designer is a powerful tool for automating business processes within your application. It allows you to define workflows with triggers, actions, and conditions to streamline operations.

  • Creating Workflows: Drag and drop workflow elements to define the sequence of actions.
  • Configuring Triggers: Set up triggers to start workflows based on specific events or conditions.
  • Defining Actions: Specify the actions to be performed at each step of the workflow.

Debugging Tools

Wayvo provides a range of debugging tools to help you identify and resolve issues during development. These tools include state inspectors, log viewers, and error tracking.

  • Inspect State: View the current state of your application and monitor changes.
  • Logs: Access detailed logs to troubleshoot and debug your application.
  • Error Tracking: Identify and resolve errors with real-time error tracking and notifications.

Tips for Effective Use

  1. Organize Your Components: Group related components together to keep your canvas organized and easy to navigate.
  2. Leverage Data Binding: Use data binding to connect components to data sources and display dynamic content.
  3. Automate Processes: Take advantage of the workflow designer to automate repetitive tasks and streamline operations.
  4. Utilize Debugging Tools: Regularly use the debugging tools to monitor your application's performance and resolve issues quickly.

Tip!

Take the time to explore each area of the workspace and familiarize yourself with the available tools and features. This will help you maximize your productivity and build better applications.


Next Steps

Now that you understand the workspace, you can start designing and building your applications. Follow the guide on Building Applications to learn more about using the drag-and-drop interface and other features in Wayvo.

For more advanced customization options, check out our Advanced Features section.

Previous
Navigating the Platform