🎚
Deprecated: Guide to the Editor Sidebar

The Editor Sidebar is the original builder UI for editing all aspects of Flows. It lives on the right-hand side and can be found by clicking on the Edit button in the Right Top Navbar. It is gradually being replaced with other more intuitive (and fun!) UI such as action buttons and floating toolbars.
Edit Button
​
TAB: Options
This tab will be available in the Entire Flow, Pages, and Global Components options.  Here we will find the content that each component has.
Entire Flow:  the Options tab in the Entire Flow option will display general settings such as:
Managing type of Progress Bar
Logo Image of the Flow, and Logo placement
List of Global components
List of pages
​
​
​
​
​
​
Pages:  the Options tab in the Pages option will display general settings such as:
Page Tags
Show/Hide Conditions
More Options
List of components on the page
Create new component
​
Global components:  the Options tab in the Global Components option will display general settings such as:
Duplicate, Create, Erase or edit the Global Component as Raw JSON.
Change component type
List of child components
​
TAB: Design
This tab will be available in the Entire Flow, Pages, and Global Components options.  Here we will be able to style each component in the Flow pages.
Entire Flow:  the Design tab in the Entire Flow option will allow us to style a certain range of selectors. The most important are:
Entire Flow
Main Flow Container
Global Locations (where global components are located)
Once one of these is selected in the menu, a whole list of the most usual CSS styles will appear. If the style that we are trying to apply does not appear, we could just add it in the custom style input.
​
Pages:  the Design tab in the Pages option will allow us to target and style other ranges of selectors. The most important are:
Page components: Page Header, Page Footer, Page Logo, Progress Bar, Heading Label, Title, Subtitle, Prev and Next Buttons.
The components that are on the page. 
If the selected component is an Option Selector, a new dropdown SELECT LAYOUT will display, giving the option to select a certain layout for buttons.
If the selected component has Sub-elements, there is a  Choose an Element menu for targeting and styling each element individually. For example an option selector that usually has some Sub-elements such as Label, OptionButtonCard, OptionButtonCardText, OptionButtonCardDescription, etc.
​
If the selected component has a state, they will appear in the same Choose an Element menu, allowing option selector to have a certain style for selected or hover states.
In the Apply these styles to menu we will find different targeting options: we can select all the components that have the type of the component that we have chosen (in this case All OptionSelector Components) or what is considered a better practice to select a certain tag. (In the Logic Tab we will be learning how to add tags to components) Tags work as CSS classes with custom styles that we could apply to different types of elements. We can also target the elements with certain tags inside certain pages and so on. Take a look at this dropdown to take into account all the possibilities it gives.
​
Once one of these is selected in the menu, a whole list of the most usual CSS styles will appear. If the style that we are trying to apply does not appear, we could just add it in the custom style input.
​
Global components:  the Design tab in the Global components option will allow us to target and style all the global components elements and sub-elements
​
TAB: Logic
This tab will be available in all the options: Entire Flow, Pages,  Global Components, Computed Fields, and Data Output options.  Here we will be able to manage the logic and behavior of different features of the Flow.
Entire Flow:  the Logic tab in the Entire Flow option will allow us to manage some features. Some of the most important are
The behavior of the Next Button in case the page has incomplete fields: Hide Next Button, Show Next Button Disabled, and  Show Next Button disabled Except for single select Option Selectors.
Reset User Data: under the User Data tab, we will be able to find a way to reset all the questions that we have already filled in the flow.
Pages:  the Logic tab under the Pages option will allow us to manage some features. Some of the most important are
Add tags to pages
Add conditions to pages (in order to show/hide certain pages depending on the answers given in other pages)
Under the "Other Options" tab we will find more features like: Hide Page, Preload images (to avoid waiting for images to load), Auto-delay for jumping to next page in X seconds and manage behavior of next button individually in each page.
Global components:  the Logic tab under the Global components option will allow us to manage some features. Some of the most important are
Add tags to Global components
Add conditions to Global components (in order to show/hide  depending on the answers given in other pages)
Choose the Global component Location: 
​
​
​