Add Products to an Opportunity via a Modal¶

Example¶

This is an example page. Its data resets each time the page is loaded.

Concepts covered¶

This tutorial uses Skuid features to create an opportunity detail page and a product line items modal. For more information about these features, see the following:

• Models

• Components

  • Table
  • Form
  • Header

• Actions

  • Show modal

Create the Opportunity Line Item List model¶

This model returns the products for a single opportunity record. This is accomplished by adding fields from Salesforce’s Opportunity Line Items object and defining a condition that refers to the Id field on the existing Opportunity model (which you created when setting up the detail page).

1. Click the models Models tab.

2. Click add Add Model.

3. Set your model’s properties:

   • Model ID: OpportunityLineItemsList
   • Data source type: salesforce
   • Data source: Current Salesforce Org
   • Salesforce object name: OpportunityLineItem

4. Click on edit-form Fields under your new model.

5. Check the following fields:

   • Opportunity ID

     • Opportunity.Name

   • Opportunity Product Name

   • Product ID

     • Product2.Name

   • Quantity
   • Sales Price

6. Click on rules Conditions under your new model.

7. Click add Add.

8. Define the condition:

   • Field: Opportunity ID
   • Operator: =

   • Value:

     • Content: Field from another model
     • Source model: Opportunity
     • Source field: Id

Create the New Line Item model¶

This model stores the new products that will be added to the opportunity in the Add product modal. This model also contains a condition that limits the opportunity line items to a single opportunity record and an action that queries the opportunity line item list model whenever this model is saved. To save time, we’ll duplicate the model you’ve already created and turn off the query on page load property.

1. Click the models Models tab.

2. Click the OpportunityLineItemsList model you created in the first step.

3. Click copy Duplicate.

4. Set the model properties:

   • Model ID: NewLineItem
   • Query on page load: Unchecked
   • Max # of records (limit): 1

Add Table component¶

This table will contain a list of the products associated with the opportunity and will update when users add products to the opportunity.

1. Drag and drop a Table component under the Form component.

2. Set your Table component’s properties:

   • Model: OpportunityLineItemsList
   • Default mode: Read with inline-editing
   • Show save and cancel buttons: Checked

3. Click the Styles tab > Spacing.

4. Set all four margins to the same spacing value. (We recommend 16px for all four margins.)

5. Click chevron-small-down Add fields > Model fields.

6. Check the following fields:

   • Opportunity Product Name
   • Quantity
   • Sales Price

7. Click Apply. The Table updates with the selected fields.

8. Click the Opportunity Product Name field in the Table.

9. Set the field properties:

   • Required: Checked

10. Repeat the last two steps for the Quantity and Sales Price fields.

Add button and modal actions¶

To set up a modal that allows users to add products, you first need to add a Button Set component. You’ll configure the button to create a row in the model and show the modal. Additionally, an opportunity must have a value in the Pricebook2Id field to add line items; you’ll set up an enable condition so that the button is only enabled when the Pricebook2Id field has a value.

1. Drag and drop a Button Set component above the new Table component.

2. Set the Button Set component’s properties:

   • Model: NewLineItem
   • Position: Left

3. Click the newly-added Run actions button in the component.

4. Set the button properties:

   • Button label: Add product

5. Click the Display logic tab.

6. Click Enable conditions.

7. Set the enable condition’s properties:

   • Enable if…: ALL conditions are met
   • Message to show when disabled: Must specify a pricebook to enable

8. Click add next to Enable conditions.

9. Set the new condition’s properties:

   • Source type: Model field value
   • Source model: Opportunity
   • If no rows in model…: Ignore this condition
   • Field: Pricebook2Id
   • Operator: !=
   • Content: None - blank value

10. Click the Styles tab > Spacing.

11. Set all four margins to the same spacing value. (We recommend 16px for all four margins.)

12. Click the Actions tab.

13. Click add Add action.

14. Set the following action properties:

    • Action type: Create new rows
    • Model: NewLineItem
    • Place row at…: Start of model data

15. Click add Add action again.

16. Set the following action properties:

    • Action type: Show modal

17. Click open next to Configure modal. A popup appears on the canvas.

18. Set the modal properties:

    • Title: Add product
    • Restrict closing the modal: Checked

19. Click Save.

Configure the modal¶

The modal is a pop-up that overlays the main page and puts the focus on a specific set of components and data; in this case, we’ll focus on the data needed to add a product to an opportunity. You’ll add a Form component, which allows end users to enter relevant field information. You’ll also add two custom buttons that include actions to save, close, and query your page’s models.

Choose the Opportunity record you want to preview¶

1. Click Preview.
2. Select an opportunity from the list. The selected opportunity’s Id field will be used to populate the condition we created that limits your page to a single opportunity.
3. Click Go.
4. Click Add product to test out the new modal.