Skip to content

Latest commit

 

History

History
204 lines (156 loc) · 8.39 KB

05-getting-started-embed-microfrontend.md

File metadata and controls

204 lines (156 loc) · 8.39 KB

SCION Microfrontend Platform

SCION Microfrontend Platform Projects Overview Changelog Contributing Sponsoring

SCION Microfrontend Platform > Getting Started > Embed Microfrontend

In this chapter, we will display the products purchased by the customer in the Customer Microfrontend as embedded microfrontend.

Add router outlet to display the products of a customer

Open the HTML template customers-app/src/customer/customer.html. After the section for displaying information about the customer, add a router outlet and give it the name customer-products.

     <body>
       <h1>Customer</h1>
        <section id="customer"></section>
[+]     <sci-router-outlet name="customer-products"></sci-router-outlet>
     </body>
Display the *ProductList Microfrontend*

  1. Open the file customers-app/src/customer/customer.ts

  2. Connect to the platform so we can use the outlet router for navigation, as follows:

          import {CustomerService} from '../customer.service';
      import {QueryParams} from '../query-params';
[+]   import {MicrofrontendPlatformClient} from '@scion/microfrontend-platform';

      public async init(): Promise<void> {
[+]     await MicrofrontendPlatformClient.connect('customers-app');
        QueryParams.observe$.subscribe(queryParams => this.render(queryParams.get('id')));
      }

  3. Navigate the outlet to display the products of the customer.

          import {CustomerService} from '../customer.service';
      import {QueryParams} from '../query-params';
[+]   import {Beans} from '@scion/toolkit/bean-manager';
[+]   import {MicrofrontendPlatformClient, OutletRouter} from '@scion/microfrontend-platform';

      public render(customerId: string): void {
        const customerSection = document.querySelector('section#customer');
        const customer = CustomerService.INSTANCE.getCustomer(customerId);

        customerSection.innerHTML = null;

        // Firstname
        customerSection.appendChild(document.createElement('label')).innerText = 'Firstname:';
        customerSection.appendChild(document.createTextNode(customer.firstname));

        // Lastname
        customerSection.appendChild(document.createElement('label')).innerText = 'Lastname:';
        customerSection.appendChild(document.createTextNode(customer.lastname));

        // Street
        customerSection.appendChild(document.createElement('label')).innerText = 'Street:';
        customerSection.appendChild(document.createTextNode(customer.street));

        // City
        customerSection.appendChild(document.createElement('label')).innerText = 'City:';
        customerSection.appendChild(document.createTextNode(customer.city));

        // Email
        customerSection.appendChild(document.createElement('label')).innerText = 'Email:';
        customerSection.appendChild(document.createTextNode(customer.email));

        // Phone
        customerSection.appendChild(document.createElement('label')).innerText = 'Phone:';
        customerSection.appendChild(document.createTextNode(customer.phone));

[+]     // Display the products purchased by the customer
[+]     Beans.get(OutletRouter).navigate('http://localhost:4201/product-list/product-list.html#?ids=:ids', {
[+]       params: {ids: customer.productIds},
[+]       outlet: 'customer-products',
[+]     });
      }

    Using the router, display the ProductList Microfrontend in the outlet named customer-products, passing the IDs of the products purchased by the customer as query parameter.

Open the app in the browser

We did it! Run npm run start to serve the applications.

When you open the page http://localhost:4200 in your browser and open a customer, you should see the products purchased by that customer.

What we did in this chapter

In this chapter, we learned that outlets can be nested, allowing a microfrontend to embed another microfrontend. There is no limit to the number of nested outlets. However, be aware that nested content is loaded cascaded, that is, only loaded once its parent content finished loading.

The customers-app/src/customer/customer.html looks as following: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Customer</title>
    <link rel="stylesheet" type="text/css" href="customer.scss">
    <script type="module" src="./customer.ts"></script>
  </head>
  <body>
    <h1>Customer</h1>
    <section id="customer"></section>
    <sci-router-outlet name="customer-products"></sci-router-outlet>
  </body>
</html>
The customers-app/src/customer/customer.ts looks as following: 
import {CustomerService} from '../customer.service';
import {QueryParams} from '../query-params';
import {Beans} from '@scion/toolkit/bean-manager';
import {MicrofrontendPlatformClient, OutletRouter} from '@scion/microfrontend-platform';

class CustomerController {

  public async init(): Promise<void> {
    await MicrofrontendPlatformClient.connect('customers-app');
    QueryParams.observe$.subscribe(queryParams => this.render(queryParams.get('id')));
  }

  public render(customerId: string): void {
    const customerSection = document.querySelector('section#customer');
    const customer = CustomerService.INSTANCE.getCustomer(customerId);

    customerSection.innerHTML = null;

    // Firstname
    customerSection.appendChild(document.createElement('label')).innerText = 'Firstname:';
    customerSection.appendChild(document.createTextNode(customer.firstname));

    // Lastname
    customerSection.appendChild(document.createElement('label')).innerText = 'Lastname:';
    customerSection.appendChild(document.createTextNode(customer.lastname));

    // Street
    customerSection.appendChild(document.createElement('label')).innerText = 'Street:';
    customerSection.appendChild(document.createTextNode(customer.street));

    // City
    customerSection.appendChild(document.createElement('label')).innerText = 'City:';
    customerSection.appendChild(document.createTextNode(customer.city));

    // Email
    customerSection.appendChild(document.createElement('label')).innerText = 'Email:';
    customerSection.appendChild(document.createTextNode(customer.email));

    // Phone
    customerSection.appendChild(document.createElement('label')).innerText = 'Phone:';
    customerSection.appendChild(document.createTextNode(customer.phone));

    // Display the products purchased by the customer
    Beans.get(OutletRouter).navigate('http://localhost:4201/product-list/product-list.html#?ids=:ids', {
      params: {ids: customer.productIds},
      outlet: 'customer-products',
    });
  }
}

new CustomerController().init();
What's next

In the next chapter, we will learn how to navigate via intent. Click here to continue.