Build Luigi Micro-Frontend with UI5
- How to create a Luigi view with UI5
- How to import Luigi Client to your view
- Step 1
In this step, you will import Luigi Client to the UI5 micro-frontend so you can use
linkManager
and other API function in the next steps.-
Open
ui5-mf/uimodule/webapp/index.html
and add this line in the head section of the file:HTMLCopy<!--AROUND LINE 22--> <script src="https://unpkg.com/@luigi-project/client@latest/luigi-client.js"></script>
-
In the same file, change the UI5 option from
data-sap-ui-frameOptions="trusted"
todata-sap-ui-frameOptions="allow"
. Directly below, adddata-sap-ui-preload=""
:HTMLCopy<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_fiori_3" data-sap-ui-resourceroots='{ "luigi.ui5": "./" }' data-sap-ui-oninit="module:sap/ui/core/ComponentSupport" data-sap-ui-compatVersion="edge" data-sap-ui-async="true" <!-- CHANGE THESE 2 ATTRIBUTES --> data-sap-ui-frameOptions="allow" data-sap-ui-preload="" <!-- TO THE SHOWN VALUES --> ></script>
-
- Step 2
In this step, you will add a new navigation node in Luigi, then create the micro-frontend content using UI5.
-
Add an “Order History” node to your Luigi navigation in
luigi-config.js
:JavaScriptCopychildren: [ { pathSegment: "products", label: "Products", icon: "product", viewUrl: "/sampleapp.html#/products", keepSelectedForChildren: true, children: [{ pathSegment: ':id', viewUrl: '/sampleapp.html#/productDetail/:id', context: { id: ':id' } }] }, // <--- DON'T FORGET TO ADD A "," HERE! //THIS SECTION HAS TO BE ADDED { pathSegment: 'order', label: 'Order History', icon: 'history', viewUrl: 'http://localhost:8080/index.html' } //UNTIL HERE ],
-
Open the
ui5-mf/uimodule/webapp/view/MainView.view.xml
file in your UI5 app, and replace the content with:XMLCopy<mvc:View controllerName="luigi.ui5.controller.MainView" displayBlock="true" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <List items="{/ProductCollection}"> <ObjectListItem title="{name}" type="Active" press="onListItemPress" number="{ parts:[{path:'price'},{path:'currencyCode'}], type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }" numberUnit="{currencyCode}"> <ObjectAttribute text="Quantity: {orderQuantity}" /> </ObjectListItem> </List> </mvc:View>
-
Open
ui5-mf/uimodule/webapp/controller/MainView.controller.js
and replace it with:JavaScriptCopysap.ui.define(["luigi/ui5/controller/BaseController"], function (Controller) { "use strict"; return Controller.extend("luigi.ui5.controller.MainView", { onInit: function (Controller) { const oModel = new sap.ui.model.json.JSONModel(); oModel.loadData("../model/products.json"); this.getView().setModel(oModel); }, onListItemPress: function (oEvent) { const id = oEvent.getSource().getBindingContext().getProperty("id"); LuigiClient.linkManager().openAsModal('/home/products/' + id, { title: 'Product Detail', size: 'm' }); } }); });
-
- Step 3
You can run the UI5 project to check if it’s assembled correctly. Open a terminal/command prompt and navigate to
ui5-mf
, then execute:ShellCopynpm start
You should be able to access the app at
http://localhost:8080/index.html
. If you want to see the UI5 project in the context of the larger app, open a new terminal window, navigate toreact-core-mf
and runnpm start
. Refresh your browser to see the changes.Which Luigi parameter contains the link to your micro-frontend?