Topics Map > Page Builder
LCS - Form Component Types
Form Components
Configuration
-
Before you begin using the form components, you should have your data model substantially complete. Because the input elements like text boxes and radio buttons in a form component are linked to the individual properties in the data model through actions, the development platform makes your form configuration substantially easier if you complete the data model first.
-
Adding new properties to your data model after creating your form component won’t break your application, but it will require you to take additional steps to update your application that wouldn’t be necessary if you had your data model complete at the time your built your form components.
-
Removing unused properties from the data model may break your application if you don’t recompile your application after removal.
Best Practice
-
Sketch out the data and form elements you want to gather from your users on each screen of your application. You can use wireframes, paper prototypes, or any documentation process that works for you. The idea is to create a plan before you begin configuring your data model and your form components so that you don’t have to undo and redo your work unnecessarily.
Create Form
-
The create form is used to gather new data from your users. The create action, which is linked to from your create form, creates a new record into your data model.
-
The create form can be found in the Components pane of the BB IDE under the FORM subsection
-
Drag the Create form on to your canvas in the right pane to begin the configuration.
-
-
You will be prompted to connect the Create form to a data model. Choose which of your previously created data models you want to send data from the Create form into.
-
Next, choose which properties of the data model you want to use in the form by clicking on the plus to the right of the property names in the left panel of the configuration window.
-
-
The create form also adds both a success and an error alert. These alerts give the end user visual feedback depending on the outcome of the action the form is submitting to.
-
The form also has a submit button to create the form submission action in the browser so that the end user can submit the input data.
Update Form
-
The update form is used to update existing data already stored in your data model. The update action, which is linked to your update form, updates the record already stored in your data model.
-
The create update form can be found in the Components pane of the BB IDE under the FORM subsection (image 133951-XX.png)
-
Drag the Update form on to your canvas in the right pane to begin the configuration.
-
-
You will be prompted to connect the Update form to a data model. Choose which of your previously created data models you want update using the Update form.
-
Next, choose which properties of the data model you want to update in the form by clicking on the plus to the right of the property names in the left panel of the configuration window.
-
-
The update form also adds both a success and an error alert. These alerts give the end user visual feedback depending on the outcome of the action the form is submitting to.
-
The update form also has a submit button to create the form submission action in the browser so that the end user can submit the input data.
Login Form
-
Before dragging the Login form on to the page canvas, you must first create an authentication profile and associated data model to connect the Login form to.
-
The Login form is used to create an authentication page for the non-NetID users of your application.
-
When adding the Login form on the canvas, you will need to configure the Login form and select what authentication profile the form is going to be based on.
-
The authentication profile is based on a data model in the application that has username and password properties.
-
You choose the page that the user will be redirected to after a successful login.
-
The login interaction is configured within the form component. The user’s credentials will be stored as a token in the local browser storage based on the result of the successful login action.
-
The Login form comes with an authentication user step within the corresponding action. The inputs of the form component are assigned to these properties to ensure the username and password values the user enters are submitted to the action.
Default Form
-
The Default form contains the configuration necessary to build an interactive web form without the Create, Update or Login action specified.
-
Drag the Default form on to your canvas in the right pane to begin the configuration.
-
-
You will be prompted to connect the Default form to a data model. Choose which of your previously created data models you want use with the Default form.
-
Next, choose which properties of the data model you want to link to the form by clicking on the plus to the right of the property names in the left panel of the configuration window.
-
-
You will configure the Actions for a Default form to include any data handling steps that your project requires.
-
The Default form also adds both a success and an error alert. These alerts give the end user visual feedback depending on the outcome of the action the form is submitting to.
-
The Default form also has a submit button to create the form submission action in the browser so that the end user can submit the input data.