Creating Pop-up Views

Pop-up views are visible views that are opened using a button on the parent view.  When opened, the pop-up view is smaller so the parent view appears to be prompting the user for information.  Pop-up views can be used to enhance the user experience for entering and modifying data on a grid.

Pop-Up views are most often used to Add a new record or Edit/View an existing record.  

Basic Steps to Create Pop-Up View

  1. Create a view using the same record type as the parent.
  2. Layout and resize the view so the parent stays visible behind it.
  3. Add a button on the parent view that opens the new smaller view.
  4. Create an action with the name that reflects what the pop-up does (Add User, View/Edit Details...).  It will have the following actions:
    1. Store Variable
    2. Open View
  5. Assign that action to the new button.

Once the basic pop-up view is created you can configure it for it's intended purpose.  

Tips, tricks and examples

Creating a Pop-up View for a New Record

In this example we are going to create a view to add new user.  The pop-up view will contain the basic fields we want the user to enter when a new user is added to the application.  

SInce this is a pop-up for adding new users we can to configure it in the following ways.  

  • Suppress Intitial Loading - since we are adding a new record we do not need the server to load any pervious records.  
  • Create an action chain to apply to the OnOpen event that will create a New Record.  

Now we need to add a button to our "Users" view (Parent View) to call the add pop-up view we just created.  On this action chain we are going to add the following actions:

  1. Store Variable - This will store a variable to indicate where the pop-up view was called from.  
  2. Open View -This will open our new pop-up view.

It is always good practice to store a variable from the calling view so the pop-up can check the variable and call the parent view's Refresh action.  Without refeshing the parent view you will not see the newly created record.  

At this point we can update the Ok button on the pop-up view.  We need to add the following actions:

  1. If action -  This will check to make sure required fields are filled out.  They are are not filled out a message will be displayed to the user and the action chain cancelled.  
  2. Call Action Chain - This will call an action chain to check for duplicate users.  To learn more see the Creating Background Views article.  
  3. Save Action
  4. Call Action Chain - This will call an action chain to check the calling view variable and refresh the view that called the pop-up view.  (more details below)
  5. Close Action to close the pop-up view.

To Refresh calling view, we need to check calling view variable.  This is the variable we stored on the New User button on the parent view.  If it is filled out and 'Manage Users' is stored in this variable, then we know what view to refresh.

Creating an Edit Pop-up View

Now let's look at how to create a pop-up view to edit existing records.  

There are a few differences between the 'Add' pop-up view and the 'Edit' pop-up view.  

  • On the Edit User button on the parent view we need to add 2 additional actions
    • An If action to verify that a records has been selected.  This is done with the IsNullOrEmpty() function.
    • As well as a Store Variable action to store the Record Code property (in our example the Full Name) of the selected record.  
  • On the 'Edit' pop-up view we do no select suppress on initial load or create and set an OnOpen action.  
  • On the 'Edit' pop-up view we need to set the Record Code property (In our example this is the Full Name property) to filter on the variable stored in the step above.  

The Full Name property will be filtered by the stored variable, {dvVar_editUser.fullName}.

The Save and Close actions on the 'Edit' pop-up view are very similar to the actions we have on "New" pop-up view.

Create one Pop-up view to handle 'Add' and 'Edit' logic

With a few adjustments you can use the same view for both the "Add" and "Edit" pop-up view.  

In order to accomplish this we need to add a Store Variable to the Add and Edit buttons on the parent view.  This variable will be used by the pop-up view to determine if it should open as a Add pop-up view or an Edit pop-up view.  

On the pop-up view we will use the view type variable in the OnOpen event of the view to run On Open actions for "Add" and "Edit" views.  

The individual On Open actions will look like this.  

The Alter view action on the onOpenEdit action is going to set the Operator to '=' and Filter to '{dvVar_editUser.fullName}'

The View Type variable is used to run different actions on the pop-up views Save & Close actions.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.