Use a Modal to Create New Records

You have that model on a connection that's being used to display the table of records. But now you want to add records to that model's data. To do this via the modal, create a new model on the same connection. This model will serve as a "container" for the new record, which will then be added to the original object.

The quickest way to do this is by cloning the existing model under a new name, then perform the following edits to the new model's properties:

1. Uncheck Query on page load.
2. Make sure the Max number of records field is blank.
3. Uncheck Create default row if model has none.
4. Add any additional fields you want to display in the modal. (Remember, being able to fully populate a new records is the point of using the modal rather than inline record creation. Be sure the model has fields for the data you want to capture.)
5. Remove any conditions you had on the original model.

End users need a way to open the modal and start adding information about the new record. In this tutorial, we'll use a button.

1. Drag and drop a Button Set component above the table.
   • Model: Select the cloned model.
2. Click the button and in the General tab in the properties pane, make the following edits:
   • Button label: Create New Record
   • Button icon: If desired, add an icon by clicking on the icon selector.

Now, use the Action Framework to configure the button with multiple actions that will open the modal and allow the end user to add data.

1. In the Actions tab in the properties pane, click add Add action to create the following actions:
   • First action: Ensures that the model associated with the modal starts empty each time a end user clicks the trigger action.
     • Action type: Remove all rows from model
     • Models to Empty: The name of the cloned model (not the original model).
   • Second action: After the end user adds a new record using the modal, Nintex Apps requerys the table model. If there is any unsaved data in the table, that data would be deleted. This action protects that unsaved data from being lost.
     • Action type: Save model changes
     • Models to Save: The name of the original model.
   • Third action: Creates a new row on the cloned model (for the new record)
     • Action type: Create New Row(s)
     • Model: The name of the cloned model.
     • Place row at ...: Start of Model data.
     • Have associated Components initially show this row in ...: Edit Mode.
     • Rows to use: Rows in context
   • Fourth action: Opens the modal and allows the user to enter record information.
     • Action type: Show modal

Now you have a button that safeguards any unsaved data from the table, ensures that the cloned "holding" model is empty of data, and opens a modal.

It's time to build the actual modal:

1. In the Fourth Action (see previous section), click Configure modal.

2. Drag and drop a Form component into the modal and edit the following properties:

   • In the General tab.
     • Model: Select the cloned model.
     • Default mode: Edit.
     • Show save and cancel buttons: Uncheck.

   Note:  In the next section, we'll create two buttons that handle saving and canceling—along with a few additional actions.

3. In the Form component, set up the entry form with appropriate sections and fields.

First, add a container for the buttons:

1. Drag and drop a Button Set into the modal above the Form and edit the following properties:

   • Model: Select the cloned model.

2. In the Button Set, click add Add Button so that there are two buttons.

   Note: 

   If this feature needs a Save and a Cancel button, why did we remove the Save/Cancel buttons that were already part of the Form component? (Good question!)

   That set of buttons on the component can only do one thing: save edits or cancel those edits. However, we need buttons that can do several things, so we'll create them to run multiple actions.

Create a Save button

The Save button needs to perform multiple actions: save the new data; query the original model (to refresh the underlying table and display the new record); close the modal.

1. Click the first button and edit the following properties in the General tab:

   • Button label: Save.
   • Button icon ( optional ): Select an icon for this button.

2. Click the Actions tab, and configure the following actions on the button:

   • First action: Lets the user know that the data in the modal is being saved.
     • Action type: Show message and block UI.
     • Message: Saving
     • Timeout: Never
   • Second action: Saves the new record information to the cloned model.
     • Action type: Save model changes.
     • Models to Save: Select the cloned model.
     • Click warning Add on-error action: If there are problems saving—such as required fields that are missing— Nintex Apps will unblock the UI so that the end user can fix the problems in the form and try again. Configure:
       • Action type: Unblock the UI
   • Third action: After the model data has been saved to the cloned model, Skud must query the original model so the new data appears there as well. ( Remember, they are built from the same connection. ) This action queries the original model, which means the new record will display in the updated Table, which is connected to the original model.
     • Action type: Query model
     • Model: Select the original model.
     • Query behavior: Standard - Completely Replace Data

   Note:  If the new record does not appear to display in the list, check out how you ordered the list (See Assumptions, above.)

• Fourth action: Closes the modal so that the user can see the list again.
  • Action type: Close all modals
• Fifth action: Unblocks the UI so the user can continue to interact with the Nintex Apps page.
  • Action type: Unblock the UI

Create a Cancel button

If the end user changes their mind, they need to cancel out of the modal, but like the Save button, the Cancel button needs to do more than one thing:

1. Click the second button and edit the following properties in the General tab:

   • Button label: Cancel.
   • Button icon ( optional ): Select an icon for this button.

2. Click the Actions tab, and configure the following actions on the button:

   • First action: Removed all data entered in the modal before it is saved and cancel all changes to the model.
     • Action type: Cancel model changes.
     • Models to Cancel: Select the cloned model.
   • Second action: Closes the modal so that the user can see the list again.
     • Action type: Close all modals.
   Note: 

   What if the user clicks the X on the modal instead of Cancel? They won't remove the data entered into the Form in the modal via the**Cancel model changes** action. However, we've got that covered.

   Remember that the first action added to the Create New Record button removes any existing data from the new record model; that action ensures that if the user skips the Cancel button (and therefore, the Cancel model changes action), any residual data left in the modal will be cleared out before the modal is opened again for new record creation.

3. Close the modal and click Save.

Check both the Create the trigger and Create the modal steps to make sure you configured the modal on the trigger button.

This may be because the original model is not sorted to display the newest record (or, if you chose, to display records alphabetically). See Assumptions.

Check the action scripts for the three buttons—and double check that any save or query actions are saving/querying the correct model.