The List form designer is used to customized forms for data lists, which can be used when create new item, edit existing items or view the details of items.
The Yeeflow form designer allows you to build your form structure, design the look and feel, add controls, interactions, animations, and custom code to create fully functioning list forms.
Pro Tip
You can create different forms to use separately as new item, edit item or view item purpose.
In the Designer you can visually manipulate form content, set CSS properties, and create interactions without writing code.
Accessing the Designer
To create a new list form, or edit an existing list form, firstly go access one of the existing data list, and click more operations button from the top-right title bar, and select forms from the dropdown menu.
From the list forms settings window, select the form which you'd like to design, and click "Edit" button to open in designer.
Add controls panel
This opens the Add panel from where you can add controls from the Controls panel
There are different type of controls in the controls panel, which are grouped by categories:
Custom List Fields: Here list or the custom fields you created for this content list. Like the employee list includes fields like Employee name, Contract info, Job title, Location etc.
Default List Fields: The system generated fields of a data list, which includes item ID, created by/time, modified by/time..
General: Includes general form layout related controls, which can be used to create well-designed form styles.
Advanced: Includes advanced controls which gives you more powerfully layouts and elements, and presenting data from data list with data table, gallery and Gantt chats etc.
Data Analytics: Includes the data analytics controls like Pie Chart, Column Chart, Pivot Table etc., to build visual charts.
Page settings
Click Page from the add controls panel to switch to the Page settings tab.
Background & Content Area
Set the background color of this form, and the content area style here. Please refer Page Background and Content Area Styles to learn more details.
Appearance
Size: Select the size of the form which could be Large, Standard Small. This size is available when the form is set to display as pop-up window only.
Default title-field alignment:
Horizontal: Set the title display on the left of the field control by default.
Vertical: Set the title display on the top of the field control by default.
Pro Tip
You can change the title-field alignment for each different field control from the control's properties settings panel.
Action
Bind pre-defined actions when form on load, on save, or on delete:
How to define and use actions
Custom CSS
Add custom CSS which will be used on this form. Learn more about custom CSS, please refer: Custom CSS
The bottom navigation bar
The bottom navigation bar shows you the options to open navigator, or preview your design.
Navigator
Shows the hierarchy of every element on the page you are currently on. Here, you can visually interact with these elements. Learn more about the Navigator.
Preview
Toggles between the preview and design mode of the Designer, allowing you to see how your form will look when published.
Show / Hide the Controls Panel
When using the editor, the default view pins the controls panel to the left side of the screen. It’s useful for when you’re designing, but not so much when you want to preview how everything looks on the page.
One way to collapse the panel is to click the arrow along the right edge of it:
The Canvas
The major area in the Designer is the Canvas. It's where you can interact with the form in real-time. You can select elements, move them around, and edit content right on the page. Learn more about the Canvas.
The top bar
The top bar provides another set of view settings as well as some useful tools to edit temporary variables, actions, save changes and close this designer.
Page indicator
Shows which page you are currently on.
Breakpoints buttons
Located in the middle of the top bar, these icons allow you to switch between different breakpoints to see and edit the design of your form on these breakpoints.
Operations
Temp Variables: Manage the temporary variables of this list form.
Actions: Define and manage actions
Save: Click to save changes of this from.
Close: Click the close button to exit from the designer model.
