LCS - Best Practices for Create Forms and Update Forms
Create Form
The Create form is a page component with input fields and a submit button. The main purpose of the create form component is to gather the input of the user so that this can be submitted to the actions. Then it can go through the action’s configured flow and the user will receive either success or error messages.
Using the create form component, you can create web pages that are connected to your data model. When adding the form component to the canvas, one can first follow the configure form to select what model and properties the form is going to be based on. Depending on what kind of properties are selected, input components will be created within the form to match them.
When a user wants to create, update, or delete any record, the forms can be used to achieve these purposes. Below are best practices to adhere to when creating forms:
Placeholders
Use placeholders in all input fields to make sure that an input field is never empty. This also makes it more intuitive for a visitor to use the form.
Loading state when submitting
Toggle the submit button to a loading state when the visitor submits the form. This prevents visitors from submitting the form multiple times.
Hide all alerts when submitting
It can be very confusing if an old success/error message is still visible when the visitor is submitting the form.
Show the response
Show an alert or snack bar at a success or error response. The success message can be fixed, the error message can be dynamically from the server.
Clear all input fields
When the form responds in success, all inputs in the form can be cleared or set to default. This step is irrelevant when a redirect will be done after a successful response.
Refetch the data table
When a table is present and a new record is created, the data table can be refetched so that the new record is immediately visible as a table row.
NOTE: Deleting a form means automatically that the generated action will also be deleted. Keep this in mind.
If you use custom styling on a button, before you delete your component, you can add it as a custom style so that you can reuse it.
Steps to use the Create form:
- Select the Create form component.
- Select model as shown in the screenshot below.
The 'project' model is selected in this example. - Select properties that you want users to fill on the form by clicking on the
' icon.
- Click the Save button
- Set permission on the create form by highlighting the whole form and clicking on the parent component icon shown below on the screenshot.
- Click on the pencil to edit action
Click Setting on the Action screen
- Properly name action and click Save. Please refer to the Naming conventions KB located here to correctly name components and actions.
- Click on Permissions tab
- Set logged in user or admin to "Allowed"
- Click Save
You are ready to begin using the form. - Click the return to form arrow icon
Steps to add extra fields to the create form
- Click on the 'Components' icon on the top left hand corner of the application
- Either search for the specific component you need or scroll down to locate the component you want.
- Drag the component you need to the location on the form where you desire. This example shows the 'price' component dragged into the form.
- Click 'Select a property'
- Click 'New properties'
- Select the property type and name the property
- Click 'Add property'
- Press ‘Enter’, and you should see the newly added property to select
- Click on the newly created property and click the Select button. This example shows 'Fees' as the newly added property.
- Click Save
You should see your new component at the location you placed it on the form.
Steps to reorder the form components:
User can reorder the form component by clicking on the specific component and dragging it to the location on the create form that the user desires.
- Click on the component that you want to reorder.
- Drag the component to the desired order on the form
Best Practices for Update Forms
The update form component is an important component that is used to manage your data. The update form allows users to update data from existing object. The following are some best practices to keep in mind when using the update form:
Changing model in update form
Remember to erase all selected properties after you have updated the model in the update form and re-select the correct properties based on the new model that you select.
Placeholder
Use placeholder in all input fields to ensure that an input field is not empty.
Set permission on update form
Make sure that you have the right permission set on the update form to allow users and admin to access and use the form.
Hide alerts when submitting update form
Avoid confusing users and make sure that there is no old success/error message visible when users submits the update form.
Show update form response
Always show a success or error response when the update form is submitted to tell the users when things are working well or not.
Clear all input fields
When the update form responds in success, all inputs in the form can be cleared or set to default. This step is irrelevant when a redirect will be done after a successful response.
Refetch the data table
When a table is present and a new record is created, the data table can be refetched so that the new record is immediately visible as a table row.
NOTE: Deleting a form means automatically that the generated action will also be deleted. Keep this in mind.
If you use custom styling on a button, before you delete your component, you can add it as a custom style so that you can reuse it.
Update form steps:
Below are the steps to configure update form:
- Select ‘Update Form’ under the form component.
- Select where the data is coming from - 'Another page' or 'this page'
- Click on ‘Select model’ and select a model
An example Select 'Project' and click Select.
- Select properties that you want users to see and click Save
NOTE: If you are changing model, user must erase all previously chosen properties and re-add new properties from the new model selected.
- Click the ‘Select parent component’ icon to select the whole form to edit permissions and properly name the form action button. Please refer to the Naming conventions KB located here to correctly name components and actions.
The form is highlighted
Note: The update form has a built-in action that'll automatically be configured for you so that you can easily update the object from the form.
Below is the action and its update record step:
- Click the action pencil icon.
- Click the Settings on the top left hand corner of the application
- Rename the action and click Save
- Click the settings tab and set users and admin to 'Allowed'
- Click Save
The form is now ready to be used. Click here to read more about actions.
For more information about development best practices see Best Practices for the Software Development Lifecycle (SDLC) in Betty Blocks