Project List Widget · HomeByMe for Kitchen Retailers Documentation

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.

Widget Overview

Access

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

1. Access from user's menu (website)

Access from user menu

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:

Key	Type	Description
event	String	Name of the event, which is used as 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 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

Key	Type	Value/Template	Description
event	String	"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

Key	Type	Value/Template	Description
event	String	"NewProject"
content	Object	`dbId`: String	`dbId`: 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

Key	Type	Value/Template	Description
event	String	"OpenProjectPage"
content	Object	`projectUUID`: String	- `projectUUID`: UUID of the project

Message Example

{
  "event": "OpenProjectPage",
  "content": {
    "projectUUID": "97AB8B1A-9D53-4306-AE2C-8E3A0025EB13"
  }
}

"DuplicateProjectFromProjectsList"

Context

When the user click on "duplicate" icon on the MyProjects widget, send "DuplicateProjectFromProjectsList" message to inform Website of request for project duplication.

Message Format

Key	Type	Value/Template	Description
event	String	"DuplicateProjectFromProjectsList"
content	Object	`id`: String `name`: String `search`: String	- `id`: Id of the project - `name`: Name of the project - `search`: String to search

Message Example

{
  "event": "DuplicateProjectFromProjectsList",
  "content": {
    "id": "13609",
    "name": "test case 2 (copy)",
    "search": ""
  }
}

"DeleteProject"

Context

When the user clicks the "delete" icon on the MyProjects widget, send "DeleteProject" message to inform Website of request for project deletion and refresh the current projects on page.

Message Format

Key	Type	Value/Template	Description
event	String	"DeleteProject"
content	Object	`uuid`: String `page`: Number `name`: String	- `uuid`: UUID of the project - `page`: Index of the page currently displayed - `name`: String to search in projects names (currently in the search input)

Message Example

{
  "event": "DeleteProject",
  "content": {
    "page": 2,
    "name": "bedrooms",
    "uuid": "97AB8B1A-9D53-4306-AE2C-8E3A0025EB13"
  }
}

"PaginationBtnClick"

Context

When the user clicks a pagination button, at the bottom of the MyProjects widget, send "PaginationBtnClick" message to inform Website of request to change page and load the projects requested.

Message Format

Key	Type	Value/Template	Description
event	String	"PaginationBtnClick"
content	Object	`page`: Number `name`: String	- `page`: Index of the page clicked by the user - `name`: String to search in projects names (currently in the search input)

Message Example

{
  "event": "PaginationBtnClick",
  "content": {
    "page": 2,
    "name": "bedrooms"
  }
}

"SearchProjectsName"

Context

When the user submits a string in the search input in the header of the MyProjects widget, send "SearchProjectsName" message to inform Website of request to filter projects based on that string: it will return all projects that contain this string in their names (could be none at all).

Message Format

Key	Type	Value/Template	Description
event	String	"SearchProjectsName"
content	Object	`name`: String	- `name`: String to search in projects names

Message Example

{
  "event": "SearchProjectsName",
  "content": {
    "name": "bedrooms"
  }
}

"ResetSearchResults"

Context

When the user has already submitted a string in the search input (the results are currently displayed), and he clicks the red cancel cross in the search form or clicks the "cancel search" link in the MyProjects widget, send "ResetSearchResults" message to inform Website of request to cancel the search filter and refresh the displayed projects.

Message Format

Key	Type	Value/Template	Description
event	String	"ResetSearchResults"

Message Example

{
  "event": "ResetSearchResults"
}

"OpenProject"

Context

When the user click on "load" icon on the MyProjects widget, send "OpenProject" message to inform Website of request for project loading.

Message Format

Key	Type	Value/Template	Description
event	String	"OpenProject"
content	Object	`id`: String	- `id`: ID of the project

Message Example

{
  "event": "OpenProject",
  "content": {
    "id": "7563"
  }
}

"CloseProjectsLayer"

Context

When the user click on "close" icon on the MyProjects widget, send "CloseProjectsLayer" message to inform the Website that the MyProjects widget has been destroyed.

Message Format

Key	Type	Value/Template	Description
event	String	"CloseProjectsLayer"	-

Message Example

{
  "event": "CloseProjectsLayer"
}

Subscribed Events (Input events)

Subscribed events are those events go from website to default widget.

"OpenProjectslayer"

Context

When the MyProjects widget has finished being loaded (thus with the reception of message "Listening" from widget), website will send "OpenProjectslayer" event to MyProjects widget ask for visulization of user projects list.

Message Format

Key	Type	Value/Template	Description
event	String	"OpenProjectslayer"
content	Object	`count`: Integer `language`: String `namespace`: String `page`: Integer `projectsPerPage`: Integer `translation`: Object `projects`: Array	- `count`: number of projects of user - `language`: locale string - `namespace`: namespace to configure i18n for translation - `page`: index of the page to display - `projectsPerPage`: maximum number of projects displayed on one page - `translation`: translation of the widget - `projects`: User projects list, each element in the array must be an object containing the following properties, illustrated as below

Each elements of projects should have following properties:

Key	Type	Description
`projectID`	Integer	ID of the project
`projectName`	String	Name of the project
`description`	String	Description of the project
`dateCreation`	String	Creation date of the project
`overview`	String	URL of the overview image of the project

Message Example

{
  "event": "OpenProjectslayer",
  "content": {
    "count": 19,
    "language": "en-GB",
    "namespace": "translation",
    "page": 1,
    "projects": [
      {
        "projectID": 7563,
        "projectName": "My project",
        "description": "123",
        "dateCreation": "2020-01-06T13:39:46.000Z",
        "projectID": "15964",
        "overview": "https://byme-enterprise-preprod.s3.eu-west-1.amazonaws.com/data/homebymeProjects/0634C6A2-CCCB-4C57-8669-4E9426D130F2/images/renderHQ/26FBF26E-509C-44E2-9F9A-332543F59604.jpg"
      },
      {
        "projectID": 8526,
        "projectName": "My project (copy)",
        "description": "123",
        "dateCreation": "2020-02-13T15:27:45.000Z",
        "projectUUID": "9D376E93-C4E6-4038-9E8E-96A8A73011DA",
        "overview": "https://byme-enterprise-preprod.s3.eu-west-1.amazonaws.com/data/homebymeProjects/9D376E93-C4E6-4038-9E8E-96A8A73011DA/images/renderHQ/26FBF26E-509C-44E2-9F9A-332543F59604.jpg"
      }
    ],
    "projectsPerPage": 11,
    "translation": {
      "projects_list": {
        "load_project": "Open Project"
      }
    }
  }
}

"ProjectDuplicated"

Context

When the selected project has been duplicated, website will send "ProjectDuplicated" message to notify the success, thus to inform the MyProjects widget to refresh the view.

Message Format

Key	Type	Value/Template	Description
event	String	"ProjectDuplicated"
content	Object	`currentPage`: Integer `name`: String `resultsCount`: String `length`: Integer `projects`: Array	- `currentPage`: If project duplication was done on a search results page, number of this page - `name`: If project duplication was done on a search results page, string to search in projects names (currently in the search input) - `resultsCount`: Total number of projects matching the parameters passed - `length`: number of projects actually sent in the projects property - `projects`: User projects list matching the parameters passed, each element in the array must be an object containing the following properties, illustrated as below

Each elements of projects should have following properties:

Key	Type	Description
`projectID`	Integer	ID of the project
`projectName`	String	Name of the project
`description`	String	Description of the project
`dateCreation`	String	Creation date of the project
`projectUUID`	String	UUID of the project
`overview`	String	URL of the overview image of the project

Message Example

{
  "event": "ProjectDuplicated",
  "content": {
    "currentPage": 1,
    "name": "",
    "resultsCount": 21,
    "length": 11,
    "projects": [{
        "projectID": 8749,
        "projectName": "My project",
        "description": "123",
        "dateCreation": "2020-02-21T16:07:55.000Z",
        "projectUUID": "CE776108-5784-4C4F-937E-2A0C07C749D2",
        "overview": "https://byme-enterprise-preprod.s3.eu-west-1.amazonaws.com/data/homebymeProjects/CE776108-5784-4C4F-937E-2A0C07C749D2/images/renderHQ/26FBF26E-509C-44E2-9F9A-332543F59604.jpg"
    }]
  }
}

"ProjectsFiltering"

Context

When there is a need to refresh the current page of projects list, website will send "ProjectsFiltering" message to inform the MyProjects widget to refresh the view. Typical use cases are: project deletion, search project by name, switch to another page of projects' list.

Message Format

Key	Type	Value/Template	Description
event	String	"ProjectsFiltering"
content	Object	`currentPage`: Integer `name`: String `resultsCount`: String `length`: Integer `projects`: Array	- `currentPage`: Current active page number - `name`: String entered in the search input to filter projects names on - `resultsCount`: Total number of projects matching the parameters passed - `length`: Number of projects actually sent in the projects property - `projects`: User projects list matching the parameters passed, each element in the array must be an object containing the following properties, illustrated as below

Each elements of projects should have following properties:

Key	Type	Description
`projectID`	Integer	ID of the project
`projectName`	String	Name of the project
`description`	String	Description of the project
`dateCreation`	String	Creation date of the project
`projectUUID`	String	UUID of the project
`overview`	String	URL of the overview image of the project

Message Example

{
  "event": "ProjectsFiltering",
  "content": {
    "currentPage": 1,
    "name": "",
    "resultsCount": 21,
    "length": 11,
    "projects": [{
        "projectID": 8749,
        "projectName": "My project",
        "description": "123",
        "dateCreation": "2020-02-21T16:07:55.000Z",
        "projectUUID": "CE776108-5784-4C4F-937E-2A0C07C749D2",
        "overview": "https://byme-enterprise-preprod.s3.eu-west-1.amazonaws.com/data/homebymeProjects/CE776108-5784-4C4F-937E-2A0C07C749D2/images/renderHQ/26FBF26E-509C-44E2-9F9A-332543F59604.jpg"
    }]
  }
}

Library

Website

Website could be default website powered by 3DVia, or any client website where embed the HomeByMe For Kitchen Retailers planner and MyProjects widget. In the context of integration of MyProjects widget, it refers to be the parent window of 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 the Integrate Branding section 🔗.