Roomle - Embedding Integration

Get sdk (@roomle/embedding-lib):

npm i @roomle/embedding-lib

• WebView2 sample code
• MicrosoftEdge/WebView2Samples

1. Create a WPF dialog with a WebView2 control. See Get started with WebView2 in WPF apps

2. Create a resource folder for the web content and add roomle-configurator-api.es.min.js. The files can be found here: Roomle Rubens Configurator Embedding Lib.
   (In the example the name of the folder is resource\wwwroot)

3. Get the quick start html from here: Embedding Integration - Copy & Paste without package manager.
   Create an index.html file in the resource folder and paste the content from the quick start guide.

4. Establish a mapping between a virtual host name and the path of the web resources folder. Set the source of the web view by the local host:

   async private Task InitializeAsync(WebView2 webView)
   {
       string hostName = "rubens.example"
       string localResourcePath = Path.Join(AppDomain.CurrentDomain.BaseDirectory, @"resource\wwwroot");
   
       await webView.EnsureCoreWebView2Async();
       webView.CoreWebView2.SetVirtualHostNameToFolderMapping(
           hostName, localResourcePath, CoreWebView2HostResourceAccessKind.DenyCors);
       webView.Source = new Uri($"https://{hostName}/index.html");
   }

   EnsureCoreWebView2Async wait for CoreWebView2 initialization. The method explicitly triggers initialization of the control's CoreWebView2.
   SetVirtualHostNameToFolderMapping sets a mapping between a virtual host name and a folder path to make available to web sites via that host name.

5. Add an event listener to the host app. In the following example, width and height data is retrieved from the event and set to the corresponding attributes of the root component with configurator.extended.setParameterOfRootComponent:

   window.chrome.webview.addEventListener('message', arg => {
       if (arg.data.width) {
           configurator.extended.setParameterOfRootComponent({ "key": "width" }, arg.data.width.toString());
       }
       if (arg.data.height) {
           configurator.extended.setParameterOfRootComponent({ "key": "height" }, arg.data.height.toString());
       }
   });

6. Set events to the host app:

   public void ChangeHeight(WebView2 webView, int newHeight) =>
       webView.CoreWebView2.PostWebMessageAsJson($"{{ \"height\" : {newHeight} }}");

   CoreWebView2.PostWebMessageAsJson posts the specified webMessageAsJson to the top level document in this WebView.
   CoreWebView2.PostWebMessageAsString posts a message that is a simple String rather than a JSON string representation of a JavaScript object.