Need Mapping Widget
Objective
Need Mapping widget enables the user to select the parameters that will be passed to the template generator algorithm.
Access
Users can have access to Need Mapping from Kitchen Retailer Application and Bryo Home Website.
Context
Like other default widgets, Need Mapping should be embedded in the application as an iframe, the communication between the application and default widget should be established on iframe messages. To have an overview of the subject, please refer to window.postMessage() 🔗. Every Message published or subscribed by the Need Mapping default widget should respect the following format:
| Key | Type | Description |
|---|---|---|
| event | String | Name of the event, which is used as a unique identifier |
| content | Object | Content of the event, which brings arguments helps to event handling |
Example
{
"event": "event name",
"content": {
"key1": "value for key1",
"key2": "value for key2"
}
}
Overview of the Synchronization Process
The following sequence diagram explains possible data synchronization between the application and Need Mapping default widget.
Published Events (Output events)
Published events are those events that go from default widget to application.
"Listening"
Context
When the document and all sub-resources have finished loading, send the "Listening" event to inform the application (parent window) that it is ready to listen to parent window messages. This event must be sent once and only once.
Message Format
| Key | Type | Value/Template | Description |
|---|---|---|---|
| event | String | "Listening" | - |
Message Example
{
"event": "Listening",
}
"CloseNeedMapping"
Context
When the user clicks on the "close" icon on the Need Mapping default widget, send the "CloseNeedMapping" event to inform the application that the default widget has been destroyed.
Message Format
| Key | Type | Value/Template | Description |
|---|---|---|---|
| event | String | "CloseNeedMapping" | - |
Message Example
{
"event": "CloseNeedMapping"
}
"ValidateTemplateSettings"
Context
When the user clicks on the "validate" button on the Need Mapping default widget, send the "ValidateTemplateSettings" event to inform the application that the default widget has been destroyed.
Message Format
| Key | Type | Value/Template | Description |
|---|---|---|---|
| event | String | "ValidateTemplateSettings" | - |
| content | Object | styleVersion: IntegerlinearStyle: ObjectfurnitureStyle: Object floorStyle: ObjectwallStyle: Object name: StringtemplateTags: Array | styleVersion: Positive integerlinearStyle: defines the linear style. The only supported keys are: "worktop", "plinth", "wallPanel", "wallEdgeStrip", "cornice" and "decostrip"furnitureStyle: defines furniture style. Can contain any parameter name. floorStyle: defines floor style. Can contain any parameter name.wallStyle: defines wall style. Can contain any parameter name. name: optional information used to identify the need-mapping style name chosen by the usertemplateTags: Array containing objects containing:required: Array of stringexcluded: Array of string. It is used to set up template filters. It defines groups of required and excluded tags to filter templates that the application will compute. To fit in a group, a template's tags must contain all tags defined in required array and must not contain any tags defined in excluded array. Each group will be computed in the same order as they are defined in the message and solutions are displayed as the same order. |
Message Example
{
"event": "ValidateTemplateSettings",
"content": {
"name": "signature",
"templateTags": [
{ "required": ["I", "integratedOven", "freeStandingFridge", "priority"] },
{
"required": ["I", "integratedOven", "freeStandingFridge"],
"excluded": ["priority"]
}
],
"styleVersion": 1,
"linearStyle": {
"plinth": "15773",
"cornice": "14178",
"worktop": "14128",
"decostrip": "14116",
"wallPanel": "14135",
"wallEdgeStrip": "14174"
},
"furnitureStyle": {
"handle": [null],
"drawerFront": ["15765"],
"front": ["15764"],
"leftCoverPanel": ["16050"],
"rightCoverPanel": ["16050"],
"backCoverPanel": ["16051"],
"topCoverPanel": ["16052"],
"fillerPiece": ["16051"]
},
"floorStyle": { "front": ["15764"] },
"wallStyle": { "front": ["15764"] }
}
}
Subscribed Events (Input events)
Subscribed events are those events that go from the application to the default widget.
"OpenNeedMapping"
Context
When the default widget has finished being loaded, the application is send this event to the Need Mapping default widget asking for the media list of the project.
Message Format
| Key | Type | Value/Template | Description |
|---|---|---|---|
| event | String | "OpenNeedMapping" | |
| content | Object | brandingJson:Object isUpdate:Boolean language:String translation:Object namespace: String steps:Array preselectedSettings: Object | - brandingJson: Full style object as described here - isUpdate:If false, the widget will open in step 1 and will go through each step. If true, it will open on the summary of the steps. - language: locale code - translation: Mapping of translations, with which to override the default one in the widget - namespace: namespace - steps: Defines the available step for the widget. Array containing objects containing : - name: String. Name of the step - options: Array. Array of objects containing : - name: String. Name of the step option. - description: String. Description of the step option. - imageURL: String. URL of the image of the step option. - value: Object or String. Value of the step option. - preselectedSettings: settings selected previously in the planner. Same structure as the content of the "ValidateTemplateSettings" event described above. |
Message Example
{
"event": "OpenNeedMapping",
"content": {
"isUpdate": true,
"preselectedSettings": {
"floorStyle": { "front": ["15764"] },
"furnitureStyle": {
"handle": [null],
"drawerFront": ["15765"],
"front": ["15764"],
"leftCoverPanel": ["16050"],
"rightCoverPanel": ["16050"],
"backCoverPanel": ["16051"],
"topCoverPanel": ["16052"],
"fillerPiece": ["16051"]
},
"linearStyle": {
"plinth": "15773",
"cornice": "14178",
"worktop": "14128",
"decostrip": "14116",
"wallPanel": "14135",
"wallEdgeStrip": "14174"
},
"wallStyle": { "front": ["15764"] },
"templateTags": [
{
"excluded": [],
"required": ["I", "integratedOven", "freeStandingFridge", "priority"]
},
{
"excluded": ["priority"],
"required": ["I", "integratedOven", "freeStandingFridge"]
}
],
"styleVersion": 1,
"name": "signature"
},
"brandingJson": {},
"steps": [
{
"name": "style",
"options": [
{
"name": "signature",
"description": "Beautiful kitchens tailored to your lifestyle",
"imageURL": "./assets/images/style-1.jpg",
"value": {
"linearStyle": {
"plinth": "15773",
"cornice": "14178",
"worktop": "14128",
"decostrip": "14116",
"wallPanel": "14135",
"wallEdgeStrip": "14174"
},
"furnitureStyle": {
"handle": [null],
"drawerFront": ["15765"],
"front": ["15764"],
"leftCoverPanel": ["16050"],
"rightCoverPanel": ["16050"],
"backCoverPanel": ["16051"],
"topCoverPanel": ["16052"],
"fillerPiece": ["16051"]
},
"floorStyle": { "front": ["15764"] },
"wallStyle": { "front": ["15764"] }
}
}
]
},
{
"name": "layout",
"options": [
{
"name": "L-shaped",
"value": "L",
"description": "toto",
"imageURL": "./assets/images/l-shaped.svg"
},
{
"name": "I-shaped",
"value": "I",
"imageURL": "./assets/images/i-shaped.svg"
},
{
"name": "U-shaped",
"value": "U",
"imageURL": "./assets/images/u-shaped.svg"
},
{
"name": "II-shaped",
"value": "II",
"imageURL": "./assets/images/ii-shaped.svg"
}
]
},
{
"name": "cooking",
"options": [
{
"name": "Under worktop",
"value": "ovenUnderWorktop",
"imageURL": "./assets/images/under.png"
},
{
"name": "Integrated",
"value": "integratedOven",
"imageURL": "./assets/images/column.png"
}
]
},
{
"name": "refrigeration",
"options": [
{
"name": "Freestanding",
"value": "freeStandingFridge",
"imageURL": "./assets/images/free.png"
},
{
"name": "Integrated",
"value": "integratedFridge",
"imageURL": "./assets/images/built-in.png"
}
]
}
],
"translation": {
"common": {
"back": "Back",
"cancel": "Cancel",
"close": "Close",
"copy_clipboard": "Copy to clipboard",
"delete": "Delete",
"delete_overlay_title": "Delete this media?",
"download": "Download",
"no": "No",
"ok": "Ok",
"save": "Save",
"share": "Share",
"yes": "Yes",
"show_more": "Show more",
"search": "Search",
"open": "Open",
"duplicate": "Duplicate"
},
"needMapping": {
"choose_style": "Create your style",
"pick_layout": "Pick a layout",
"oven_position": "Oven position",
"fridge_position": "Fridge position",
"your_selection": "Your selection",
"style": "Style",
"layout": "Layout",
"cooking": "Cooking",
"refrigeration": "Refrigeration",
"no_choice": {
"img_text": "change",
"title": "No preference",
"info": "I don't have any preferences",
"info_2": "Skip"
},
"step_1": {
"choice_1": {
"title": "Signature",
"info": "Beautiful kitchens tailored to your lifestyle"
},
"choice_2": {
"title": "Modern",
"info": "Bold, refreshing and on-trend styles"
},
"choice_3": {
"title": "Natural",
"info": "Environmentally-friendly timber collection"
},
"choice_4": {
"title": "Traditional",
"info": "Classic painted timeless kitchens"
}
},
"step_2": {
"choice_1": { "title": "I-shaped" },
"choice_2": { "title": "L-shaped" },
"choice_3": { "title": "U-shaped" },
"choice_4": { "title": "II-shaped" },
"disclaimer": "Looking for an island? If you have enough space we will include one in your design"
},
"step_3": {
"choice_1": { "alt": "Oven under worktop", "title": "Under worktop" },
"choice_2": { "alt": "Oven in a column", "title": "Integrated" }
},
"step_4": {
"choice_1": { "alt": "Free-standing fridge", "title": "Freestanding" },
"choice_2": { "alt": "Built-in fridge", "title": "Integrated" }
},
"cta": "Save my needs",
"cta_2": "Generate new layouts"
}
},
"language": "en-GB",
"namespace": "translation"
}
}