released

Projects List Widget

 

Objective

MyProjects widget enables the user to visualize information of their project list. It also brings together the user actions on each project like duplicate, delete, and load a project.

Access

Once user has successfully signed in, he can get access to MyProjects widget through the user drop down menu from Bryo Home Website.

1. Access from Properties Window

Access from Properties Window

Context

Like other default widgets,MyProjects should be embedded in the Website as an iframe, the communication between the Website 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 MyProjects default widget should respect the following format:

KeyTypeDescription
eventStringName of the event, which is used as unique identifier
contentObjectContent 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 disgram explains data synchronization between Website and MyProjects widget, and also the interactions with user and HomeByMe For Kitchen planner.

Sequence Diagram of Data Synchronization

Published Events (Output events)

Published events are those events that the MyProjects widget will send to the website.

"Listening"

Context

When the document and all sub-resources have finished loading, send the "listening" event to inform the Website(parent window) that it is ready to listen to parent window messages. This event must be sent once and only once.

Message Format
KeyTypeValue/TemplateDescription
eventString"Listening"-
Message Example
{
    event: "Listening",
}

"NewProject"

Context

When the user clicks the "new project" button on the MyProjects widget, send a "NewProject" message to inform the website of a request for new project creation.

Message Format
KeyTypeValue/TemplateDescription
eventString"NewProject"
contentObjectdbId: StringdbId: ID of the product stored in the data base.
Message Example
{
    event: "NewProject",
}

"OpenProjectPage"

Context

When user clicks the thumbnail on the projects' list layer, send an "OpenProjectPage" message to inform the website to redirect the user to the page of the selected project.

Message Format
KeyTypeValue/TemplateDescription
eventString"OpenProjectPage"
contentObjectprojectUUID: String- projectUUID: UUID of the project
Message Example
{
  "event": "OpenProjectPage",
  "content": {
    "projectUUID": "97AB8B1A-9D53-4306-AE2C-8E3A0025EB13"
  }
}

"DuplicateProjectFromProjectsList"

Context

When the user clicks on the "close" icon on the ProductSheet widget, send "CloseProductSheet" message to inform the application that the ProductSheet widget has been destroyed.

Message Format
KeyTypeValue/TemplateDescription
eventString"CloseProductSheet"-
Message Example
{
    event: "CloseProductSheet",
}

Subscribed Events (Input events)

Subscribed events are those events that go from Website to default widget.

"OpenProductSheet"

Context

When the ProductSheet widget has finished being loaded (thus with the reception of the message "Listening" from the widget), the application will send the "OpenProductSheet" event to ProductSheet widget to ask for visualization of product information.

Message Format
KeyTypeValue/TemplateDescription
eventString"OpenProductSheet"
contentObjectdbID: String
reference: String
name: String
typeID: Integer
freeTags: Array
commercialDescription: String
shortDescription: String
thumbnailURLLarge: String
thumbnailURLMedium: String
thumbnailURLSmall: String
startDate: String
endDate: String
isExpired: Boolean
brandID: Integer
brandName: String
clientMetaData: Object
width: Integer
height: Integer
depth: Integer
disableFavorites: Boolean
hasDimensionLabel : Boolean
hasFooter : Boolean
hasDropdown : Boolean
ecoFeeLabel : String
ecoFeePrice : String
ecoFeeType : String
energyLabel : String
energyLabel2 : String
isProductReadOnly: Boolean
parameters: Array
isProductSet: Boolean
productSheetURL: String
hasBackButton: Boolean
translation: Object
language: String
namespace: String
medias: Array
standard: Boolean
price: Object
prices: Object
projectDateTranslation: String
regularPriceLabel: String
reduced: Boolean
subProducts: Array		- dbID : ID of the product stored in the data base.
- reference : Reference of the product defined in the 3DCloud.
- name : Name of the product defined in the 3DCloud
- typeID : ID of the type of the product
- freeTags : A list of freeTags that the products belongs to
- commercialDescription : Commercial description of the product
- shortDescription : Short description of the product
- thumbnailURLLarge : Url of the product thumbnail of high definition
- thumbnailURLMedium : Url of the product thumbnail of medium definition
- thumbnailURLSmall : Url of the product thumbnail of low definition
- startDate : Begining date of the current price
- endDate : Ending date of the current price
- isExpired : Whether the product in expired in the catalog
- brandID : ID of the brand that the product belongs to
- brandName : Name of the brand that the product belongs to
- clientMetaData : Addition information of the product that the client can add/edit/delete.
- width : Value of the width parameter
- height : Value of the height parameter
- depth : Value of the depth parameter
- disableFavorites : Whether favorites should be disabled or not
- hasDimensionLabel : Whether dimension Label is displayed or not
- hasFooter : Whether footer is displayed or not
- hasDropdown : Whether dropdown is displayed or not
- ecoFeeLabel : Label for eco fee
- ecoFeePrice : Price for eco fee
- ecoFeeType : Type for eco fee
- energyLabel : Energy Label on product scale 1
- energyLabel2 : Energy Label on product scale 2
- isProductReadOnly: Whether is product sheet is read only
- parameters: An Array of Parameters concerning the product rule to display in the product sheet
- isProductSet : Whether the current product is type of ProductSet
- productSheetURL : URL of the product to share
- hasBackButton : Whether there should be button back display on the main view of the product sheet
- translation: Mapping of translations, with which to override the default one in widget
- language: locale code
- namespace: namespace
- medias : List of thumbnails to display for the current product
- standard : Whether current price is a standard price
- price : Different kind of price methods that has been associated to the current product
- prices : Current price
- projectDateTranslation : a text explains the validity period of the current price
- regularPriceLabel : text label to display near the regular price amount
- reduced : whether the current price is a reduced price
- subProducts : a list of similar products to display in the right-side list, OR a collection of furnitures in the current product set.
Message Example
{
  "event": "OpenProductSheet",
  "content": {
    "dbID": "13801",
    "reference": "KIR18V60",
    "name": "FRIDGE",
    "typeID": 188,
    "type": "furniture",
    "freeTags": ["pbd_appliance"],
    "commercialDescription": "Bosch refrigerator KIR18V69",
    "shortDescription": "",
    "thumbnailURLLarge": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/7ADA5A1D-EFE6-4ABC-91D3-0DCB2F5F3989/Thumbnails/512.jpg",
    "thumbnailURLMedium": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/7ADA5A1D-EFE6-4ABC-91D3-0DCB2F5F3989/Thumbnails/256.jpg",
    "thumbnailURLSmall": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/7ADA5A1D-EFE6-4ABC-91D3-0DCB2F5F3989/Thumbnails/64.jpg",
    "startDate": null,
    "endDate": null,
    "isExpired": false,
    "brandID": 1,
    "brandName": "Bryo",
    "clientMetadata": null,
    "price": {
      "regular": {
        "value": 395,
        "type": "regular",
        "startDate": null,
        "endDate": null
      },
      "current": {
        "value": 395,
        "type": "regular",
        "startDate": null,
        "endDate": null
      },
      "ecoFee": {
        "value": 2,
        "type": "regular",
        "startDate": null,
        "endDate": null
      },
      "discountType": "regular"
    },
    "prices": {
      "regularPrice": "£395.00",
      "standard": true
    },
    "width": 540,
    "height": 873,
    "depth": 549,
    "disableFavorites": true,
    "hasDimensionLabel": true,
    "hasFooter": true,
    "hasDropdown": true,
    "ecoFeeLabel": "eco-fee",
    "ecoFeePrice": "2,00 €",
    "ecoFeeType": null,
    "energyLabel": "A",
    "energyLabel2": "B",
    "isProductReadOnly": false,
    "parameters": [
      {
        "id": "width",
        "type": 1,
        "name": "Width",
        "isLength": true,
        "currentValue": "540 mm",
        "displayValue": undefined,
        "possibleValueSet": [
          {
            "value": 540,
            "displayName": undefined
          },
        ]
      },
      {
        "id": "height",
        "type": 1,
        "name": "height",
        "isLength": true,
        "currentValue": "873 mm",
        "displayValue": undefined,
        "possibleValueSet": [
          {
            "value": 873,
            "displayName": undefined
          },
        ]
      },
    ],
    "isProductSet": false,
    "subProducts": [],
    "hasBackButton": false,
    "productSheetURL": "",
    "translation": {
      "common": {
        "back": "Back",
        "cancel": "Cancel",
        "close": "Close",
      },
      "product_sheet": {
        "tab_infomation": "Information",
        "product_browser": {
          "info": "More info"
        },
      }
    },
    "language": "en-GB",
    "namespace": "translation",
    "medias": []
  }
}

Library

Website:

The website could be the default Website powered by 3DVia, or any client Website where embed the HomeByMe For Kitchen Retailers planner and ProductSheet widget. In the context of integration of ProductSheet widget, it refers to be the parent window of the widget iframe.

Application:

HomeByMe for Kitchen Retailers planner

Branding

This widget, like all other widgets, will benefit from branding styles when opened from the planner or the website. To learn more on how to customize the look of the widgets, please refer to the Integrate Branding section 🔗.

← PreviousNext →