Here is a quick introduction to ABCD builder and its components.
You can Create and Modify Visualforce pages with ABCD. No coding is involved, Just Drag & Drop to assemble smart pages easily. ABCD is very similar to Standard Page Layout Editor, there nothing new to learn, in fact you already know how to use ABCD.
Here are various components of the builder
1. Header Bar
Header Bar consist of three primary component
ABCD Logo
Page Name
Builder Actions
2. Builder Actions
There are 5 builder actions –
Home : Re initializes ABCD to default state. All unsaved changes will be lost.
Documentation : Open ABCD documentation page (new browser tab)
Page Properties : Opens properties panel for the page object
Preview : Open the Visualforce page in a separate tab
Save : Saves the changes to the system
3. Component Pallet
Available list of components in that release. We are adding more and more components to this pallet. Currently we are adding a new component a week.
This pallet consists of all available components that you can Drag & Drop to assemble smart pages, which includes both Visualforce and Lightning components
4. Component Drop Targets
Component Drop Targets is the list of the components the context component can be dropped into. Click on the Component Name to toggle the information box.
As shown in the sample, the Page Block component can be dropped into Form, Tab and Panel components.
When you start dragging a component from the component Pallet, all applicable Drop Targets on the canvas will light-up making it easy for you to identify and drop it accordingly
5. Search Box
Quickly search and locate the component that you are interested in.
6. Builder Canvas
Builder canvas is the place where you would drop and arrange components accordingly
7. Component
This identifies the components that were dropped onto the canvas. In this case, it is the Library component, which serves the basic building blocks for ABCD page framework.
8. Component Actions
Component actions allows for editing and deleting of the component.