Use a Modal to Create New Records

Often a table that lists records only displays a few select fields needed to distinguish records from one another. Adding a new record directly to the Table allows users to create a new record by filling in the fields on the table. But what if you want to capture more data than just that in the displayed fields?

Use a modal! A modal allows users to create a fully-featured record.

Assumptions

Note

This tutorial assumes that you have a Skuid page with a functioning model that lists records on a Table component. For best results, select a useful field (like CreatedDate) in Fields to order records by on the model, and set that field to display in DESC order. (This way, when users create a new record, it will be added to the top of the table.)

If you prefer to sort by alphabetical order, set Fields to order records by to an alphabetical label (for example, Name) and display it in ASC order.

Add a new model [[]]

You have that model on a data source object/entity 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 data source object. 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.

Create the trigger [[]]

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 Basic 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 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 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 user adds a new record using the modal, Skuid 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.

Create the 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 Basic tab.
      • Model: Select the cloned model.
      • Default Mode: Edit.
      • Show Save/Cancel: 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.

Create Save and Cancel Buttons in the modal [[]]

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 Basic 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—Skuid will unblock the UI so that the 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 data source object.) 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 Skuid page.
    • Action Type: Unblock the UI

Create a Cancel button [[]]

If the 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 Basic 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.

The User’s Experience

The user clicks Create New Record. Skuid displays the modal, where the user can add record data. Once saved, the list table refreshes and the new record displays.

Troubleshooting

The Modal doesn’t appear when the user clicks Create New Record? [[]]

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

The new record doesn’t display on the table? [[]]

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.

Problems with the buttons (opening the modal, saving or canceling)? [[]]

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