Microfrontend Composer Video
In this video:
00:00:04 Hi and welcome to Mia-Platform video Pills.
00:00:07 In this video, we will show you the new low code capability of Mia-Platform Back Office.
00:00:12 Let's start.
00:00:13 We have already installed the Back Office application.
00:00:15 In fact, the sidebar shows the dedicated tab.
00:00:18 Click on it and take a moment to explore the section.
00:00:21 We reached the pages section where we can create a new page for our Back Office.
00:00:25 By default, an example page is created.
00:00:28 Next, we have the layout section where we can edit the basic properties and configurations of the theme.
00:00:34 We move on to the settings section, where we find the URIs error pages, Mount Point, import map and shared properties.
00:00:40 Next, you can see the configuration section of the web server with headers, entry points and content types.
00:00:48 At the end, It is the advanced configuration, which allows us to edit the code directly with the help of a preview.
00:00:54 To see how easy it is to manage the Back Office, let us create a new page.
00:00:59 Back to the pages. Click on Add new page.
00:01:01 Once the modal is displayed, select iFrame as the page type, decide a name and a rendering route.
00:01:08 Click on next, Enter the iFrame source and click Save.
00:01:15 The new page is now listed in the table To display the new page in the navigation bar.
00:01:19 Go to the layout tab.
00:01:21 Here, a new menu item can be added.
00:01:23 Go to menu items and click edit properties.
00:01:25 Add a new item and write the configuration.
00:01:30 Save.
00:01:31 We now have a new menu item.
00:01:33 Go to the advanced tab to see a running preview Save the project.
00:01:43 Now, deploy it.
00:01:50 If we navigate to the public URL, we can see the new page in the sidebar.
00:01:55 Let's create a new page type.
00:01:57 Instead of iFrame, select Compose.
00:02:00 Call the page “Users”.
00:02:01 Use “Users” also for the rendering route.
00:02:04 Click on next.
00:02:06 Here we can see that we can choose different page templates such as: blank page, page with table, calendar view, picture gallery and details page.
00:02:14 Each page has its own goal.
00:02:16 For example, a calendar page might be useful for an appointment manager.
00:02:20 An image gallery page might be perfect if you have to manage various media files.
00:02:24 Go ahead and choose the page with the table template.
00:02:27 Save it.
00:02:27 Unlike the iFrame page type, the compose page type allows you to configure several options.
00:02:32 Click on the button.
00:02:34 A preview page is opening.
00:02:35 Here you can adapt the page your business needs, starting with the page name or the text of the search bar up to some advanced functions.
00:02:42 For example, the table field.
00:02:53 We now connect the data collections.
00:02:55 In this case under connectors and adapters.
00:02:57 We select “/users” for the CRUD service.
00:03:02 Once done, add the new item to the menu.
00:03:04 Instead of using the low code configuration, you now use the advanced settings where you can directly add the code.
00:03:11 Here's the new menu item.
00:03:13 Save the configuration.
00:03:17 Now we can deploy and see the result.
00:03:22 Refreshing the page.
00:03:23 We find our page with the tables already populated with user data.
00:03:29 Finally, we customize our layout.
00:03:32 For example, we can switch the navigation layout.
00:03:38 Let us say that our brand is green.
00:03:40 Of course, we can modify our layout with a green user interface.
00:03:52 Thanks to this low code function, the Back Office becomes a powerful tool, highly customizable and quickly adaptable to your business needs.
00:03:59 In a short time, a data-rich, scalable and high performance tool can be implemented abstracting the complexity of maintenance.