Add Product Line Items to Opportunities with a Popup

With Skuid you can automate a lot of things, including elements of record creation—even between junction objects. Along these lines, adding a product line item to an opportunity is a common use case. The user may also want to see a table detailing all line items associated with an opportunity on the same page, which updates when a new one is added.

With Skuid you can create an easy, three-step process for this exact process:

  1. The user goes to an opportunity detail page.
  2. The user clicks “Add Product” to open a popup window.
  3. The user enters the line item information and clicks Save.

After this, the new record will be generated, and the opportunity’s line item table will update accordingly.

Designing this process may seem to be a daunting task at first; after all, these data objects are joined by a junction object. However, utilizing a few Skuid features makes building this page a relatively painless process. You’ll need:

  • an Opportunity detail page and an Oppportunity line item popup page
  • model actions for your line item model on your Opportunity detail page
  • a Page Include component with a query string
  • conditions on your opportunity line item model

The key advantage to having a separate page that is inserted via the Page Include component is its versatility. By following this tutorial you can create a popup that can be used across multiple pages via Page Includes, which means less work for you and a more consistent experience for users.

Before you get started, it is recommended to create both of the pages you’ll be using, as they will be referencing each other. In particular, you’ll want to have the Opportunity line item’s popup page name ready while configuring your detail page.

Set up an opportunity detail page

Because your Opportunity line item popup page will be doing most of the work here, you’ll only need to set up two models and three components on your opportunity detail page.

Configure your Opportunity model

As the page name would imply, configure the opportunity model as necessary to create a proper detail page; make sure to the include the condition that states the model ID must equal the Id URL parameter.

Configure your line items model

Create a new model for your line items, and configure the basic settings. For the sake of this tutorial, we’ll set its model Id to “Products. Next, add the fields you want within your table to the model. Some examples include: Name, Quantity, Sales Price, Total Price, etc.

Now, to have a table that displays relevant information about related line items, you’ll need to add a condition and a model action.

Add a condition with following settings:

  • Field: OpportunityId
  • Operator: =
  • Value: Field from another model - Opportunity - Id
  • State: Always on

After that, add a model action. For your initiating event, select Model saved. After that, on the Actions tab, set an action with the following settings:

  • Action Type: Query Model
  • Model: Products
  • Query Behavior: Standard - Completely Replace Data

This model action will detect any time you save a new line item from your popup window and then requery your table so it is always up-to-date. Otherwise, users would need to refresh their page to see changes.

Configure your components

This is an Opportunity detail page, so you’ll need a Field Editor. Insert fields from your model as needed for your use case.

To create the “Add Product” button, you’ll need to add the Page Title component.

  1. Place a Page Title component above your Field Editor.
  2. Click Add Button to create a button in your Page Title component.
  3. Title this button Add Product or something similar.

You can optionally add Save, Cancel, and other buttons as needed, and remove them from your field editor. For more information about this process, see this article on how to have only one save button per page.

Now, you’ll need to set up your button’s actions.

  1. From your button’s properties panel, set it to Run Multiple Actions.
  2. On its Actions tab, add a Show Popup action.
  3. Inside your popup, add a Page Include component

Your Page Include component has two important settings you must be sure are correct:

  1. Set your Skuid Page to the title of the your opportunity line item page. (If you haven’t created this yet, make sure that the text you enter matches the name of your page).
  2. Your Query String must be id={{$Param.id}}

The query string you set in your Page Include is the key element at work here, as it sends the id URL parameter into your Page Include’s URL. This is important because our included page can now look to its URL for data it would not otherwise be able to access!

Finally, add a table linked to your line item model. Insert the fields that you added to your model earlier.

Set up an opportunity line item page

For this page, you’ll need two models and two components. The models point to the Opportunity and the OpportunityLineItem Salesforce® data objects. Your components are a Field Editor (with whichever fields match your needs) and a Page Title component (to properly handle saving and closing your popup).

Configure your Opportunity model

This model pulls in your opportunity ID from the URL query string you inserted earlier, so name it accordingly.

For the purposes of this tutorial, let’s use the following settings

  • Model Id: OpptyID (this can be whatever you wish)
  • Salesforce Object Name: Opportunity
  • Max # of records (Limit): 1

Note

since your model shouldn’t be loading any rows other than the specific opportunity you’re working with, setting your max number of records is an optional, but wise step.

Now, you’ll need to set a condition so that your model will associate with the ID of the specified opportunity. Add a condition where:

  • Field: Id
  • Operator: =
  • Value: Page/URL Parameter value - id
  • State: Always on

This condition is stating “only allow for the creation and viewing of line items whose Opportunity ID matches the URL parameter, which is provided by the detail page.”

Configure your line item model

Next, configure the model for your line item product. Your basic settings are pretty simple:

  • Model ID: NewProductLineItem (this can be whatever you wish)
  • Salesforce Object Name: OpportunityLineItem
  • Max # of records (Limit): 1
  • Create default row if Model has none: Checked

When your page first loads, there will be no rows in the model. Therefore, it’s important that you check the “create default row” option.

For the fields, select whichever data objects you will want to use in your Field Editor.

The most important parts of your model are the conditions you’ll be setting.

Opportunity ID

Your first condition will limit reading/writing exclusively to the opportunity ID from your detail page:

  • Field: OpportunityId
  • Operator: =
  • Value: Field from another model - OpptyId - Id
  • State: Always on

Service Date

Your second condition will automatically set the service date to “today,” whenever the data is being edited.

  • Field: Service Date
  • Operator: =
  • Value: Single Specified Value - Today
  • State: Always on

Line Item Id

  • Field: Id
  • Operator: =
  • Value: None - blank value
  • State: Always on

A line item with an existing ID means that line item has been created before—which is not what you want when creating new line items. This condition ensures that your popup will display an empty, fillable form, instead of displaying previously created line items.

Configure your popup’s components

To finish constructing the popup, add 1) a Page Title component, with buttons set to handle saving and canceling, and 2) a Field Editor for the newly created line item’s details.

Page Title

You’ll need to add custom Save and Cancel buttons to your Page Title component, similar to the buttons listed in this tutorial, which also use the action framework.

Set these custom buttons to Run Multiple Actions. Since your conditions and model actions handle most of the work, the key reason you’re using custom buttons is to have a “close popups” action.

Create the following actions for each button:

Save:

  1. Save Model Changes - NewProductLineItem
  2. Close all Popups

Cancel:

  1. Cancel Model Changes - NewProductLineItem
  2. Close all Popups

Field Editor

Add any fields where you’d like users to enter data. Some examples include:

  • Product
  • Line Description
  • Quantity
  • Sales Price

To ensure that the popup is working properly, test the page by adding the Opportunity ID and Date fields, which should automatically fill in when a user clicks Add Product.

If not, recheck your model and component settings.

Note

If your use case calls for adding multiple line items at a time, you can also use a Table component instead of a field editor. Set up is much the same: simply add the fields you want users to edit on creation.

Troubleshooting

  • If the line item Field Editor component inside your popup is not automatically filling in the Opportunity ID and Date fields, double check your conditions on your NewProductLineItem model. Improper conditions will prevent this data from being filled in.
  • If you notice that the field editor in your popup does not generate, make sure that Create default row if Model has none is checked on your OpportunityLineItem model.