Create custom list forms

Customize list forms with unique layouts for creating, editing, and viewing items using its form designer for a tailored UI experience.

Updated over a week ago

When you create a new data list, the default form layout will be used when creating new item, editing an existing item, or view each item's detail. You can create custom list forms to replace the default form layout as needed:

  • New Item - Add new item(s);

  • Edit Item - Edit existing item(s);

  • View Item -View page of each item.


Default form layout

After the fields have be set, you may add some data by clicking "+Add" button (at upper right).

Yeeflow has a defaulted layout which contains all fields to fulfil, check below is our demo view. You can keep it or you may custom it if any.

Click the more action button from the top-right of the data list, and from the pop-up menu, click the "List settings" item to open the sidebar pop-up window. Then, click "Forms" to open the list form settings window. and go to "Forms" settings page. You will see there is no customized form under "Forms" and generally you have three layouts/displays to be presented:

1, New Item, 2,Edit Item, 3, View Item.


1. Add a Form(s)

Firstly, you need go to "Forms" and click "+" to create your custom form. Define the form name, e.g. New Item Page.

Then "Edit" it to be directed to a new and blank page. You can then design the custom layout and logics with Yeeflow list form designer:

To learn more about how to design the custom list form, please refer: Understand the List Form Designer.


2. Copy to a new/existing form(if any)

After your custom the form of "NewPage" and you may copy this to a new form or replacement of existing form. You may take quick custom with the copied one.

As list form has 3 displays to show and you may custom 1-3 or more forms for different views.


3. Display settings

Upon your above completions, you can go to "Display Settings" to setup your custom list forms.

You can choose to set custom list form for New Item, Edit Item or View Item.

From the "Form" settings, click the drop-down list to select which form you want to use. The dropdown list will list the default layout and all the custom forms you created.

The Open in settings is used to control how would you like this form to be displayed. There are 3 options:

1. Pop-up window: Show the New, Edit or View item form as a pop-up window.

Data List_Edit item

There are 4 size you can choose form the second drop-down list:

Small: the pop-up window will be a small size with max-width: 500px.

Medium: the pop-up window will be a medium size with max-width: 800px.

Large: the pop-up window will be a medium size with max-width: 1174px.

Full screen: the pop-up window will show as a full screen of the current window.

Note:

If you choose the Default option, the size will be the same as Medium.

2. Full Page: The New, Edit or View item page will show as a new page with separate URL.

3. Slide in: The New, Edit or View item page will slide from right to middle of the page.

Did this answer your question?