Use a Popup to Create New Records

Often a table that lists records only displays a few select fields needed to distinguish records from one another. Using the Add New Record button on 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 is displayed on the list?

Use a popup! A popup 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 popup, 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 popup. (Remember, being able to fully populate a new records is the point of using the popup 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 popup and start adding information about the new record. In this tutorial, we’ll use a button.

  1. Drag and drop a Page Title or Button 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 Type: Run Multiple Actions
    • 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 popup and allow the user to add data.

  1. In the Actions tab in the properties pane, click fa-plus-circle Add Action to create the following actions:
    • First action: Ensures that the model associated with the popup 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 popup, 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 popup and allows the user to enter record information.
      • Action Type: Show Popup

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 popup.

Create the Popup [[]]

It’s time to build the actual popup:

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

  2. Drag and drop a Field Editor component into the popup and edit the following properties:

    • In the Basic tab.

      • Model: Select the cloned model.

      • 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.

      • Default Mode: Edit.

    • In the Display tab, under Field Layout:

      • Field Layout: Label Above Field.
  3. In the Field Editor, set up the entry form with appropriate fields, and organize them into columns and sections.

  4. Keep the popup with the Field Editor open, but click Save.

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

First, add a container for the buttons:

  1. Drag and drop a Button Set or Page Title component into the popup above the Field Editor and edit the following properties:

    1. Model: Select the cloned model.
  2. In the Button Set or Page Title component, click fa-plus-circle Add Button twice to add 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 Field Editor 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 popup.

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

    • Button Type: Run Multiple Actions.
    • 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 popup 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 fa-exclamation-circle 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 popup so that the user can see the list again.

      • Action Type: Close all Popups
    • 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 popup, 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 Type: Cancel Model changes.
    • 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 popup 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 popup so that the user can see the list again.
      • Action Type: Close all Popups.

    Note

    What if the user clicks the X on the popup instead of Cancel? They won’t remove the data entered into the field editor in the popup 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 popup will be cleared out before the popup is opened again for new record creation.

  3. Click Save and close the popup.

The User’s Experience

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

Troubleshooting

  • Popup doesn’t appear when the user clicks Create New Record? Check both the Create Trigger and Create Popup steps to make sure you configured the popup 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 popup, 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.