Main interface sections

The Application Editor is structured around 6 different tabs that you can access on the far left of the screen.

The Design Tab

This tab is where you design your application's interface. The main area is the page you are currently editing, and the New Element palette on the left contains the different elements you can add to your page. To add an element, click on the icon of the element you want to add and draw the element on the page.

Double clicking on an element will reveal the Property Editor, which lets you customize how the element looks and what it displays. This will be covered in the Building a User Interface chapter.

The Workflow Tab

The Workflow Tab is where you define the workflows that program your page. The different workflows are displayed as boxes, which represent the event. Clicking a box reveals the different actions that are triggered by this event.

Clicking on an event or an action will reveal a panel similar to the Property Editor. That's where you can define the different fields that need to be set for the action. For instance, a 'Send email' action will open a panel with a field named 'To', where you will define the address to which the email should be sent. If this information is dynamic, you can add it using the Composer, which lets you build dynamic expressions without code. This will be covered in the Working with Data Section.

The Data Tab

The Data Tab is where you can view your data structure and modify it. You can see the different data types that are used in your application, as well as the fields for each of them. The 'App Data' section shows you actual data. An Excel-type view will show the entries that have been created, and you can query, export, modify and delete entries. Lastly, the Privacy section is where you define privacy rules to ensure that your application's data is seen by the right users. This is an advanced feature, but something you will have to set up as soon as you are using your application in production. As the other two sections of the data tab, this is covered in The Data Tab section of the user manual.

The Styles Tab

The Styles Tab is where you define the different styles that elements can have in your interface. A Style is a shared set of properties (e.g. background colors, font size, etc.) that can be applied to elements of a similar type (e.g. Text elements). Using styles will help you have a more consistent interface, and it will enable you to quickly change your User Interface theme. It is highly recommended to use Styles whenever you can. This is covered in the Using Styles section.

The Plugins Tab

Plugins are a way to extend Bubble's core functionality. For instance, you will have to install plugins in your application if you want to use an element that has been built by the Community, charge a credit card with Stripe, or offer your users the ability to sign up with Facebook. You can install plugins in the Plugins Tab. Once a plugin is installed, it will appear on the list, and you will be able to enter parameters for each plugin if needed. For instance, if you want to use the Stripe plugin, you will need to enter the API key that you will get from your Stripe dashboard.

The Plugins Tab is also where you can review templates and rate them. Since most plugins are built by the Community, ratings and reviews are very important to keep the Bubble ecosystem healthy and help plugin builders refine their plugins.

The Settings Tab

This tab lets you control your application subscription and paid add-ons. Please head to the Account, Plans and Billing chapter for more information regarding plans.

In the Settings tab, you will also find some application-wide settings that you will have to define before launching your application. Those settings range from defining a color palette and adding custom fonts to setting a password policy, making your app private, etc. The key settings will be covered in the Application Settings chapter.

The Logs Tab

This tab is useful once your app is live, or when you are testing it in run-mode. You can use the server logs to help diagnose past events and workflow issues, as well as to check scheduled actions and your app usage in terms of workflows runs and upload storage. This will be covered in the Maintaining an Application chapter.