Auto Generating an Update Record Form

We will show you how to automatically generate, an update record form using Bootstrap 3 Dynamic Form Generator. As you already know, from our update record tutorials we need two action files. One to query the database and show the data on the page and another one, for updating records. Let's create them now. First, we create the action file which will display the data on our page. Add a name for it (1). then, right click steps. And add a database connection (2).

Select your database connection, from the menu or create one, if you haven't done this yet (1). Right click the database connection step. And add a database query (2). Add a name for this query (3). And setup its options (4). Select and add the database table, which you'd like to update (5). And add its columns, to the columns list (6). Click the OK button, when you are done.

And save your action file (1). Now, let's create the update record action file. Add a name for it (2). And right click steps. and add a database connection (3). select your connection from the menu (4).

Right click the database connection step. And add a database update (1). Add a name for this update step (2). then, setup the update options (3). Select and add the table, which you want to update (4). And then, add the columns, which data you'd like to update. Select the identity column, and add it in the filters list.

Select the identity column, and add it in the filters list. click the OK button.

And save your action file (1). Now, let's setup the update record page (2). Open your html file and switch to the HTML5 Data Bindings panel (3). First, we are going to create an executor, which will be used to display the records on our page. Add a name for the executor (4). Then select the action file, which queries your database (5). And click the OK button.

then, select the query, from the action executor, which we just created (1). Click anywhere on your page, where you want to list your products (2). Select repeat region, from the bind to menu (3). And insert the repeat region (4).

Then bind the data, which you want to display, inside the repeat region (1). We want to show the product names. We select the binding, from the data bindings panel (2). and click the insert button (3).

We'd like to make the product names clickable. So we just select the binding, which we just inserted (1). And then we enter a dummy hash link (2). Now, let's add a detail region, where the selected product's data, will be listed in our form. Select the records query (3). Open the bind to menu. And select detail region. And insert the detail region on your page (4).

Now, we need to setup the active record selection. Click the dummy link, in the repeat region, which we inserted earlier (1). And click the add new behavior button (2). Then, under dmxzone, select control html 5 data bindings. And select current selection, in the set to menu (3). Click the OK button.

now, the details of the clicked record, will be displayed in the details region. And finally let's add,the update record form. Click inside the details region, then select your query again (1). Open the bind to menu. And select bootstrap 3 form. then, click insert (2).

Select your form type. We choose the vertical form layout (1). then, we select the field, created from our identity column. And change its type to hidden as we are only using it for a filter, in the update record action (2).

We also change the product description field type to text area, as it contains pretty long descriptions (1). and we are done. click the ok button, in order to generate the form (2).

Our form is done, and now we should just create the update record action executor. Select server action executors. And then click the add new button (1). Add a name for the executor (2). Select to run it on form submit. then, select your update record server action from the dropdown. and bind this executor, to the form, which we just generated. Set the method to post (3). And click the OK button.

Now let's preview the results. Click any product and its data is being loaded, into the update record form. Edit the data you need to and click the submit button. that's how easy it is to auto generate update record form using Bootstrap 3 Dynamic Form Generator.