![]() ![]() The final step is to update the form's title so it's clear to the user if they are creating a new record or updating an existing one.A spreadsheet is a great place to enter tables of data, such as price lists, but to enter records a row at a time from left to right isn’t always user friendly. The image preview can now be toggled but is hidden automatically if no image URL is present. This hides the image preview if Toggle Link is either disabled or returns a value of false. ![]() The form data isn't included in the new action type. If not, the query creates a new record instead. If there's a match, that record is updated. When the form is submitted, the query looks for an existing record using the provided ID. This should be a unique identifier to avoid incorrect changes. This action requires a primary key column so the query knows which record to update. Select the existing query, form1SubmitToProducts, and change the action type to bulk upsert via primary key. However, you can update the existing query to create or update records when the form is submitted. The form's existing query only creates new records. Remember to save changes to your queries by clicking Save. The Form component matches each input's data key to a corresponding column name from the table to determine where values should go.įor example, this ternary operator sets the form's initial data only if a table row is selected: You can set the form's Data source property and automatically populate its inputs using the selected table row data. A common approach is to populate a form with data from a selected table row and then submit changes to update the record. You can also use this form to make changes to an existing record. Populate the form to update existing records Click the ↻ button on the table to refresh it and see the newly created record.įor JSON Schema Form components, you must create this query manually and attach it to the form as an event handler. You must add this query manually when you use forms generated from tables or you generate forms manually.įill in the form and click Submit to create a new record in your database. When you generate a Form using a resource, Retool also generates a query, form1SubmitToProducts, to insert new records into the database when the form is submitted. This can be useful if fields need to accept null values or you need to modify your form to more closely match your data. You can also modify input properties of JSON Schema Form components by updating the type field. You can also enable automatic validation by enabling Live validation in the Inspector. Select the Image URL input and change the pattern to URL so invalid URL formats produce a validation error.įor JSON Schema Form components, you define validation rules in the JSON schema. ![]() Validation supports options such as pattern matching (URL, email, or regular expression) and minimum and maximum lengths. Validation for a selected input is configured in the Validation section of the Inspector. Each input component supports several validation options. Validate submissions įorms can check the validation status of inputs-enable Validate inputs on submit in the Interaction section of the Inspector. Update the labels for each input and set the fields required to be Name, Created at, Updated at, and ID fields.Ĭlick Generate form to create the new form.Įach input is generated with a value for form data key-shown in the Advanced section of the Inspector-that corresponds to the column name from the table. ![]() You can also change the generated input type or label, and whether the field should be required. This is useful if you don't want users to provide certain information, such as IDs or timestamps. You can uncheck individual columns to exclude them from the form. For instance, an Integer column results in a Number Input. Retool evaluates the type of each column to determine the input type to use. The form generator displays the column names from the selected table and the generated input fields. New forms are initially empty so you need to add inputs or generate a new form.Ĭlick Generate form, then select the onboarding_db database and products table. Next, drag a Form component onto the canvas and place it next to the table. Retool automatically adds a table ( table1) and query ( query1) to your app to display products table records from the sample onboarding_db PostgreSQL database. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |