Opportunity Record Selection With Card UI

This guide will demonstrate the Opportunity Record Selection with Card UI.

  1. Demo Video:

We will create a form of two pages: the "Account Page" and the "Opportunity Page".

Account Page (Page 1)-

  1. Initial Setup (Account Page):
  • Drag and drop a “Header” and a “Salesforce Select” field onto the Account Page of your form.
  • Rename the fields as needed.
image
  • Drag and drop five “Hidden fields”, an “HTML” field, and a “Field Update Button” field inside a “Repeat” field onto the Account Page of your form.
  • Rename the fields as needed.
image
image
  • Drag and drop an “HTML”, a “Hidden”, a “JavaScript”, an “Auto Submit”, and a “Field Update Workflow” field onto the Account Page of your form.
  • Rename the fields as needed.
image
  1. Configuring The “Header“ Field (Account Page):
  • Header fields are used to provide labels on a form and offer guidance to users, improving the user experience and making your form user-friendly.
  • To enhance the appearance of a form and assist the user, you can utilize header fields.
  1. Configuring The “Salesforce Select“ Field (Account Page):
  • Click the pencil icon of the “Salesforce Select” field.
  • Set “Account” as “Object”.
  • Add “Record Filter”- Type != null
image
  1. Configuring The “Repeat“ Field (Account Page):
  • Click the pencil icon of the “Repeat” field.
  • Click the ”Salesforce Pre-Fill”.
image
  • Set “Object”, “Formyoula Parent Field”, “Salesforce Parent Field”, and “Autofill Connection” as shown below.
  • Here, “15b8-5d79-e2db” is the field ID of the “Salesforce Select” field.
image
  1. Configuring The “HTML“ Field (Account Page):
  • Click the pencil icon of the “HTML” field.
  • Paste the code.
image
  • Please use this code.
  • Please update the field IDs as per your form.
    • Here, “aa1d-9c98-b724” is the field ID of the Hidden field labelled “Opportunity Name”.
    • “7005-7c8b-6e9a” is the field ID of the Hidden field labelled “Opportunity Stage Name”.
    • “81a7-0610-8e6b” is the field ID of the Hidden field labelled “Opportunity Close Date”.
    • “a0df-f41f-f870” is the field ID of the Hidden field labelled “Opportunity Amount”.
<address>
 <strong>{{aa1d-9c98-b724}}</strong><br>
 {{7005-7c8b-6e9a}}<br>
 {{81a7-0610-8e6b}}<br>
 <abbr>$</abbr>{{a0df-f41f-f870}}
</address>
  • Set “Yes” to the “Enable Reload On Merge Field Change” option.
image
  1. Configuring The “Field Update Button“ Field (Account Page):
  • Click the pencil icon of the “Field Update Button” field.
  • Set “Field Updates”:
    • Selected Opportunity ID || value || {{71e2-ea74-012c}}
    • Move To Next Page || event || run
    • Here, “71e2-ea74-012c” is the field ID of the Hidden field labelled “Opportunity ID”.
image
  1. Configuring The “HTML“ Field (Account Page):
  • Click the pencil icon of the “HTML” field.
  • Paste the code.
image
  • Please use this code.
  • Please update the field ID as per your form.
    • Here, “9a2a-1b7d-76dd” is the field ID of the “Repeat” field.
<style>

#component-9a2a-1b7d-76dd .new_repeat_entry_panel {
  display: none;
}

#component-9a2a-1b7d-76dd tr td:nth-child(3), 
#component-9a2a-1b7d-76dd th:nth-child(3) {
  display: none;
}

#component-9a2a-1b7d-76dd tr td:nth-child(2), 
#component-9a2a-1b7d-76dd th:nth-child(2) {
  display: none;
}

.formyoula-Repeat thead {
  display: none;
}

</style>
  1. Configuring The “JavaScript“ Field (Account Page):
  • Click the pencil icon of the “JavaScript“ field.
  • Paste the code.
image
  • Please use this code:
// Listen to click events on specific elements within the repeat group
$( '.formyoula-Repeat' ).on( 'click', 'tbody .formyoula-HTML', function() {
  // Find the closest row to clicked element
  $( this ).siblings( '.formyoula-Field_Update_Button' ).find( 'button' ).click();
} );
  1. Configuring The “Auto Submit“ Field (Account Page):
  • Click the pencil icon of the “Auto Submit” field.
  • Set “Action Type” as “None” and “Action” as “Next”.
image
  1. Configuring The “Field Update Workflow“ Field (Account Page):
  • Click the pencil icon of the “Field Update Workflow” field.
  • Add “Field Updates Success”:
    • Product Repeat || Value ||
  • Save the changes.
image

Opportunity Page (Page 2) -

  1. Initial Setup (Opportunity Page):
  • Drag and drop two “Header”, a “Salesforce Prefill”, two “Text”, two “Multiple Fields Per Row”, a “Select”, and a “Date” field onto the Opportunity Page of your form.
  • Rename the fields as needed.
image
image
  • Drag and drop a “Hidden”, a “Salesforce Select List”, two “Number”, and a “Math Formula” field inside a “Repeat” field onto the Opportunity Page of your form.
  • Rename the fields as needed.
image
image
  • Drag and drop an “HTML”, a “Hidden”, and two “Navigation” fields onto the Opportunity Page of your form.
  • Rename the fields as needed.
image
  1. Configuring The “Salesforce Prefill” Field (Opportunity Page):
  • Click the pencil icon of the “Salesforce Prefill” field.
  • Set “Object”, “Formyoula Parent Field”, and “Salesforce Parent Field” as shown below.
image
  • Map Form fields to Object fields.
    • Opportunity Name || Name
    • Opportunity Stage || StageName
    • CloseDate || CloseDate
    • Account Name || Account.Name
    • Opportunity Pricebook ID|| PriceBook2Id
image
  1. Configuring The “Multiple Fields Per Row” Field (Opportunity Page):
  • Click the pencil icon of the “Multiple Fields Per Row” field.
  • Select “Account Name” and “Opportunity Name” in the “Select Fields To Group Per Row” option.
image
  1. Configuring The “Select” Field (Opportunity Page):
  • Click the pencil icon of the “Select” field.
  • Update the “Select Options” as shown below.
image
  1. Configuring The “Multiple Fields Per Row” Field (Opportunity Page):
  • Click the pencil icon of the “Multiple Fields Per Row” field.
  • Select “Opportunity Stage” and “Close Date” in the “Select Fields To Group Per Row” option.
image
  1. Configuring The “Repeat” Field (Opportunity Page):
  • Click the pencil icon of the “Repeat” field.
  • Set “Table” as “Repeat View”.
image
  • Click “Salesforce Pre-Fill”.
image
  • Set “Object”, “Formyoula Parent Field”, “Salesforce Parent Field”, and “Autofill Connection” as shown below.
image
  1. Configuring The “Salesforce Select List” Field (Opportunity Page):
  • Click the pencil icon of the “Salesforce Select List” field.
  • Set “Object” and add “Record Filter” as shown below.
    • PriceBook2Id = '{{a066-3600-c3c8}}’
    • Here, “a066-3600-c3c8” is the field ID of the Hidden field labelled “Opportunity Pricebook ID”.
image
  1. Configuring The “Math Formula” Field (Opportunity Page):
  • Click the pencil icon of the “Math Formula” field.
  • Add formula - {{31f5-0ec3-c726}} * {{c349-f11f-5c25}}
    • Here, “c349-f11f-5c25” is the field ID of the “Number” field labelled “Price”.
    • “31f5-0ec3-c726” is the field ID of the “Number” field labelled “Quantity”.
image
  1. Configuring The “HTML” Field (Opportunity Page):
  • Click the pencil icon of the “HTML” field.
  • Paste the code.
image
  • Use this code:
<style>
.formyoula-Repeat .table-responsive {
  overflow-x: visible !important;
  overflow-y: inherit !important;
}
</style>
  1. Configuring The “Navigation” Field (Opportunity Page):
  • Click the pencil icon of the “Navigation” field.
  • Set “Back” as “Button Action”.
image
  1. Configuring The “Navigation” Field (Opportunity Page):
  • Click the pencil icon of the “Navigation” field.
  • Set “Submit” as “Button Action”.
  • Save the Changes.
image
  1. Form Setup:
  • Click on the "Setup" button at the top of the form edit page.
image
  • Disable the standard navigation buttons by checking the “Disable Standard Navigation” option.
  • Save the changes by clicking the “Save Changes”.
image
  1. Setup Form Connections:

First Connection:

  • Click on the "Add" button under the "Connections" column, or press on the "Create a Connection" button under the "Next Step" column, or select "Add/ Edit Connections" from the "Actions" list.
image
  • Select "Salesforce" from the available connections list and click "Create Connection".
image
  • Select the “Opportunity” object and click ”Save and Continue”.
image
  • Map the form fields to the Object fields as shown below.
image
  • Click “Salesforce Record Settings”.
image
  • Disable Connection.
image
  • Save the changes.
image

Second Connection:

  • Create a second Salesforce connection using the “Opportunity Product” object.
image
  • Map the form fields to the Object fields.
image
  • Click the “Salesforce Record Settings”.
image
  • Enable Push Updates.
image
  • Save the changes.
image
  1. Test the Form:
  • Select an Account.
image
  • It will display the Opportunities.
image
  • Clicking an Opportunity will display its details on the next page.
  • Users can navigate back to the first page using the back button and select a different Opportunity to view its details.
image

For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂

[ Example ] Opportunity Record Selection With Card UI.json35.2KB