Lab - Embedded Custom Form
- Jakub Antal
- Marcin Łuczak (Deactivated)
- Ioana Kocurova
Lab Info
Lesson: Quote’s Product Configurator (Custom Form Embedded into a Quote)
Target Audience: Certified Configuration Engineer
Requirements & Solution Author: Petr Rys
Solution Developer & Lab Author: Marcin Łuczakuczak
User Story / Requirements
Our Customer (Interior design studio) is selling doors to their end-customers. (B2B or B2C)
Some Products are defined as standard skus, but our customer can also manufacture non-standard Products via specification.
Create an embedded Custom Form on Quote to serve as "Custom Product Configurator" for the sales person for non-standard doors.
The sales agent has a Quote, which allows to add Products (skus) into the Product Master a use these Products right away as line items of this Quote.
Product Master contains standard doors as well as accessories and, doors already manufactured before.
Learning Outcomes
At the end of the Lab, you should be able to:
Create Embedded Custom Form, Custom Form Type
Utilize Input Matrix as Custom Form input
Understand Custom Forms Workflow
Provided resources
Logics:
QuoteProductConfigurator,
QuoteProductConfiguratorHeaderLogic
Company Parameters:
Material Adjustment
Color Adjustment
Door Size Adjustment
Product Master Table that categorizes basic products into specific Product Groups. Each product has a unique identifier starting with the ‘DR’ prefix, and a label starting with the ‘Basic’ prefix.
'Product Base Values' Product Extension Table contains each product's base values.
Acceptance Criteria
The user can create a quote of the appropriate type.
The new quote has an extra tab with a form containing all the necessary fields.
The form enables setting up the basic product downloaded with the Product Master Table.
Once the recalculation is complete, the form will show the newly calculated Base Value for the selected products. The result of the calculation should be a new product that includes Doorframes and Locks&handles. Please note that the desired outcome should include all possible combinations of the two pairs of products.
Users must select 'Create new Products' to make table changes permanent.
If a product with the same configuration does not exist, it is added to the Product Master Table. The calculated Base Value is also added to the Product Extensions Table.
The user should be informed what products have been added to the tables.
Sample solution
Step-by-step solution
Develop the logic and test in Studio
Go to the Pricefx Studio and create the following logics.
a) eCFO_ProductConfigurator
Pricefx -> Create Calculation Logic
Nature: Custom form header (customFormHeader)
Name: eCFO_ProductConfigurator
Open the logic.json file in the newly created logic and add a label property to the configuration.
{
"elements" : [ ],
"formulaNature" : "customFormHeader",
"status" : "ACTIVE",
"label" : "Product Configurator",
"uniqueName" : "eCFO_ProductConfigurator",
"validAfter" : "2020-01-01"
}Now, let's deploy the logic onto the partition
Go to Administration → Logics → Header Logics and select the logic type 'Custom Form' to check if the newly created logic is visible on the list.
Access Administration → Custom Form Types from your partition. Create a new form type by clicking on the [+ New Form Type] button located at the top-right corner of the screen. Uncheck Embedded option and fill in the form:
Specify the values for the parameters listed below.
Name | eCFO_ProductConfigurator |
Label | Product Configurator |
Header Logic | Product Configurator |
Embedded | true |
Form type | Custom Form, Quote |
Access Quoting → Quote Types from your partition. Create a new quote type by clicking on the [+ Add Quote Type] button located at the top-right corner of the screen. Specify the values for the parameters listed below.
Name | ProductConfigurator |
|---|---|
Label | Product Configurator |
Pricing Logic | QuoteProductConfigurator |
Header Logic | QuoteProductConfiguratorHeaderLogic |
Configuration | {
"name": "default",
"tabs": [
{
"name": "header",
"translationKey": "sfdc_quotes_tabs_header",
"type": "header"
},
{
"name": "Product Configurator",
"translationKey": "Product Configurator",
"typeReference": "eCFO_ProductConfigurator",
"type": "customForms"
},
{
"name": "items",
"parameters": {
"defaultPlacement": "right",
"flexibleLayout": true
},
"translationKey": "sfdc_quotes_tabs_items",
"type": "items"
},
{
"name": "attachments",
"translationKey": "sfdc_quotes_tabs_attachments",
"type": "attachments"
},
{
"name": "workflow",
"translationKey": "sfdc_quotes_tabs_workflow",
"type": "workflow"
},
{
"name": "workflow-history",
"translationKey": "sfdc_quotes_tabs_workflowHistory",
"type": "workflowHistory"
},
{
"name": "messages",
"translationKey": "sfdc_entity_tabs_messages",
"type": "header"
}
]
} |
QuoteProductConfigurator and QuoteProductConfiguratorHeaderLogic are in your partition. QuoteProductConfigurator calculates the total Invoice price based on the base price and quantity, while QuoteProductConfiguratorHeaderLogic displays the calculation results in a Quote Header.
Access Quoting → Quotes from your partition. Create a new quote by clicking on the [+ NewQuote ] button located at the top-right corner of the screen. Choose the type that was created in the previous step. The new form should contain and additional tab called Product Configurator .
Form creation
Our objective is to design a form allowing users to configure the product according to their preferences. The form will consist of two multiple-selection lists and two tables, where users can input new parameters to customize the basic version of the product.
Requirements for Calculation result table:
|
|
|---|---|
Columns | Table consists of three columns, each with the appropriate data type.
|
Generated | The new product id should consist of two parts, separated by a dash. The first part is prefix DOORSET, and the second part is a randomly generated string of 10 characters. To meet this condition, you can utilize the example: DOORSET-y0QNSxCuYj |
Generated | The new label should be created by removing the "Basic" prefix from the product label and separating parameter names with a dash character for each product. Each pair of these two values should be connected using the "/" sign. examples:
|
| The calculation of the base price involves adding the parameter coefficients multiplied by the base price to the base price of the basic product. The total base price should be calculated by adding the base price of both products together. |
Please find a list of form fields along with their respective requirements below.
Field | Requirments |
|---|---|
Doorframes | Product group entry with the following parameters. Ensure that only products with the prefix 'Basic' are included in the selection list. To meet this condition, you can utilize the "Filter.custom" method.
|
Locks&handles | Product group entry with the following parameters. Ensure that only products with the prefix 'Basic' are included in the selection list. To meet this condition, you can utilize the "Filter.custom" method.
|
Doorframes Configurator Table | Input matrix with the the following parameters:
|
Locks and Handles Configurator Table | Input matrix with the the following parameters:
|
Create new Products | Boolean user entry with the following parameters.
|
Open eCFO_ProductConfigurator logic.json file.
Add new elements to your logic:
Logic element |
|
|---|---|
| In this element, you can add methods and fields to create the logic of the form. |
| This component will be in charge of generating a view for a form. |
| This section will display the result of the calculations in a table format. The table will have columns such as ‘Product Id’, ‘Label’, and ‘Base Price’. |
| This code is responsible for saving the configured product to two tables: Product Master and Product Extensions. |
Task | Code example |
|---|---|
Create inputMatrix | api.inputBuilderFactory()
.createInputMatrix("LocksAndHandlesMatrix")
.setLabel("Locks and Handles Configurator Table")
.setHideAddButton(true)
.setHideRemoveButton(false)
.setColumnValueOptions(['Colour': colors, 'Material': materials])
.setColumns(['Product Id', 'Label', 'Base Price', 'Material', 'Colour'])
.setReadOnlyColumns(['Product Id', 'Label', 'Base Price'])
.addOrUpdateInput(customFormProcessor, 'ROOT') |
Take names from company parameters teble. | |
Add group input entry | Please note the following instructions: You should create the logic "eCFO_ProductFilter" (line 4) responsible for filtering products based on their product group. This filter logic should return a filter object that meets two specific conditions. Firstly, it should only include products from Nature: Product input filter (productInputfilter) Name: eCFO_ProductFilter |
Updating Products table | |
Updating Products Base Values table |
This task can be accomplished in numerous ways. See below for an example of how to do it, or try to solve the task independently without the use of suggestions.
Logic element |
|
|---|---|
| Add the following code: It's important to note that the methods calculateDoorPrice and labelConfigurator are designed to calculate values for individual products, such as Doorframe or Lock&Handle. |
| |
| |
|
DEBUGGING with Studio Editor
Create a New Product Discount Manager
Open logic.json in eCFO_ProductConfigurator.
Open Studio Editor.
Click on the Inputs tab.
Set Context to CUSTOMFORM if needed
Set the CustomForm to the previously created form. If you can't find it, use the Reload option at the end of the dropdown list.
To check the output, please click on the
button and go to the Result tab. Please refer to the following output as an example of what you should expect to see.
To track the variables that you need, you can use the api.trace method.
DEBUGGING with LOGS
To debug your application, you can read the logs of your partition. This will help you identify and fix any issues in your application.
Go to Administration → Logs → Logs. A new tab containing partition logs will open in your browser. The display may vary based on your patition preferences.
To add logging, you should open the logic and place api.logInfo or api.logWarn methods in the appropriate location.
Deploy your logic to your designated partition.
Open the previously created form and recalculate values. Check the log for expected output.
Resources for Further Learning
References
Custom Forms Configuration How-To(s)
Documentation
Groovy API
NOTE: If you have any inquiries regarding the content in this learning path, you can utilize the following online Pricefx forums: AskPricefx community or Pricefx GenAI chatbot.
Found an issue in documentation? Write to us.