Approval form designer

Yeeflow team
Yeeflow team
  • Updated

The Approval form designer is used to create different type of approval forms with drag-N-drop controls. 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 approval forms. 

 

form_designer_overview.jpg

 

In the Designer you can visually manipulate form content, set CSS properties, and create interactions without writing code.

 

Accessing the Designer

To open the approval form designer, firstly access one of the existing approval form, and click the "Edit in designer" button from the right of the form title bar.

form_designer_open.jpg

 

Add controls panel

This opens the Add panel from where you can add controls from the Controls panel 

Add_controls_panel.jpg

 

There are different type of controls in the controls panel, which are grouped based on categories:

  1. Basic fields: Here includes all the basic field controls, lick text box, number, dropdown etc. Which basic field controls, you can design most of the forms.
  2. Advanced fields: Includes field controls for special business needs, like Lookup, organization, signature etc.
  3. General: Includes general form layout related controls, which can be used to create well-designed form styles.
  4. 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. 

Add_controls_panel_Categories.jpg

 

Page settings

Click Page from the add controls panel to switch to the Page settings tab.

Page_Settings.jpg

 

Background & Container

Set the background color of this form, and the content container style here. Please refer Page Background and Container Styles to learn more details.

 

Appearance

Set the 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.

approval_form_appearance.jpg

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 submit (submission form), Approval/Complete (Task form), or on reject (Task form). Learn more about how to create actions, please refer:

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

 

Validation

A quick one step settings to make all the field controls on the form to be editable or read only.

Page_Validation.jpg

 

The bottom navigation bar

The bottom navigation bar shows you the options to open navigator, or preview your design.

Page_Bottom.jpg

 

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: 

 

Hide_the_Controls_Panel.gif

 

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 the form properties, variables, actions etc. Starting from the left-hand side, right next to the "Add controls" button, and moving to the right, you have the following set of tools:

 

Page indicator

Shows which page you are currently on. Click the "Rename" button to change the page's name, click the "Copy" button to make a new copy of the current page.

Page_top_bar_left.jpg

Pro Tip: Select the down icon after the page's name to switch to another form from the dropdown list.

 

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.

 

Device_Preview.gif

 

Operations

  • Variables: Manage all variables of this approval form.
  • Actions: Define and manage actions 
  • Save: Click to save changes of this form.

Page_option_buttons.jpg

 

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.