{"id":241951,"date":"2023-03-16T18:58:35","date_gmt":"2023-03-16T18:58:35","guid":{"rendered":"https:\/\/www.prominic.net\/?p=241951"},"modified":"2023-08-23T15:34:35","modified_gmt":"2023-08-23T15:34:35","slug":"exploring-super-and-micro-apps-with-volt-mx-curie","status":"publish","type":"post","link":"https:\/\/wordpress.prominic.net\/exploring-super-and-micro-apps-with-volt-mx-curie\/","title":{"rendered":"Exploring Super and Micro Apps with Volt MX Curie"},"content":{"rendered":"\n[et_pb_section fb_built=”1″ _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”]

HCL has organized a great webinar to show the new Super Apps feature that <\/span>Volt MX Curie<\/span><\/a> has brought to the table. Let\u2019s talk about the basics of the Super and Micro Apps architecture, and how to get started with developing them using Volt MX.\u00a0<\/span><\/p>\n

The <\/span>Volt MX 9.5 Curie<\/span> release comes with several new features, which have reviewed in an earlier article<\/a>. One of these new features is the ability to create and import style constants for colors and themes. Additionally, you can create style constants for two-step and multi-step gradients. Another feature is the ability to optimize the Project Explorer view for each tab by configuring the visibility of different entities and channels. If you’re only building mobile apps, you can hide the tablet and responsive web folders, decluttering the Project Explorer palette.<\/span><\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_text quote_border_weight=”14px” quote_border_color=”#811937″ _builder_version=”4.20.1″ link_font=”||||||||” quote_font=”|700|||||||” quote_text_color=”#000000″ quote_font_size=”18px” quote_line_height=”1.8em” header_font=”||||||||” header_2_font=”|700|||||||” header_2_font_size=”25px” header_2_line_height=”1.5em” max_width=”700px” max_width_tablet=”” max_width_phone=”” max_width_last_edited=”on|tablet” header_2_font_size_tablet=”30px” header_2_font_size_phone=”15px” header_2_font_size_last_edited=”on|desktop” locked=”off” global_colors_info=”{}” header_font_size__hover=”30px” header_font_size__hover_enabled=”30px” header_letter_spacing__hover=”0px” header_letter_spacing__hover_enabled=”0px” header_text_shadow_style__hover=”none” header_text_shadow_style__hover_enabled=”none” header_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_2_font_size__hover=”26px” header_2_font_size__hover_enabled=”26px” header_2_letter_spacing__hover=”0px” header_2_letter_spacing__hover_enabled=”0px” header_2_line_height__hover=”1em” header_2_line_height__hover_enabled=”1em” header_2_text_shadow_style__hover=”none” header_2_text_shadow_style__hover_enabled=”none” header_2_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_2_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_3_font_size__hover=”22px” header_3_font_size__hover_enabled=”22px” header_3_letter_spacing__hover=”0px” header_3_letter_spacing__hover_enabled=”0px” header_3_line_height__hover=”1em” header_3_line_height__hover_enabled=”1em” header_3_text_shadow_style__hover=”none” header_3_text_shadow_style__hover_enabled=”none” header_3_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_3_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_4_font_size__hover=”18px” header_4_font_size__hover_enabled=”18px” header_4_letter_spacing__hover=”0px” header_4_letter_spacing__hover_enabled=”0px” header_4_line_height__hover=”1em” header_4_line_height__hover_enabled=”1em” header_4_text_shadow_style__hover=”none” header_4_text_shadow_style__hover_enabled=”none” header_4_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_4_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_5_font_size__hover=”16px” header_5_font_size__hover_enabled=”16px” header_5_letter_spacing__hover=”0px” header_5_letter_spacing__hover_enabled=”0px” header_5_line_height__hover=”1em” header_5_line_height__hover_enabled=”1em” header_5_text_shadow_style__hover=”none” header_5_text_shadow_style__hover_enabled=”none” header_5_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_5_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_6_font_size__hover=”14px” header_6_font_size__hover_enabled=”14px” header_6_letter_spacing__hover=”0px” header_6_letter_spacing__hover_enabled=”0px” header_6_line_height__hover=”1em” header_6_line_height__hover_enabled=”1em” header_6_text_shadow_style__hover=”none” header_6_text_shadow_style__hover_enabled=”none” header_6_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_6_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” text_letter_spacing__hover=”0px” text_letter_spacing__hover_enabled=”0px” text_text_shadow_style__hover=”none” text_text_shadow_style__hover_enabled=”none” text_text_shadow_color__hover=”rgba(0,0,0,0.4)” text_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)”]

\n

Super and Micro Apps<\/span><\/h2>\n<\/blockquote>[\/et_pb_text][et_pb_text _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”]

However, the most significant feature enhancement in the Volt MX Curie release is the added support for Super and Micro Apps. Many companies are already deploying Super Apps, both as external B2B and external B2C apps. When Micro Apps are correctly defined, the customer experience with Super Apps will be seamless. Micro Apps reduce the complexity for application developers by dividing large apps into smaller and easily manageable apps.<\/span><\/p>\n

\n

Using Micro Apps, users can create standalone and independent apps that can be combined to form a complex application. If you properly define the framework, you can easily add on additional pieces, extending what is already installed. However, before you start using the Micro Apps feature, you must first configure the primary base application.<\/span><\/p>[\/et_pb_text][et_pb_image src=”https:\/\/www.prominic.net\/wp-content\/uploads\/2023\/03\/HCL-Volt-MX-Super-Apps.png” alt=”HCL Volt MX Super Apps” title_text=”HCL Volt MX Super Apps” align=”center” _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][et_pb_text quote_border_weight=”14px” quote_border_color=”#811937″ _builder_version=”4.20.1″ link_font=”||||||||” quote_font=”|700|||||||” quote_text_color=”#000000″ quote_font_size=”18px” quote_line_height=”1.8em” header_font=”||||||||” header_2_font=”|700|||||||” header_2_font_size=”25px” header_2_line_height=”1.5em” max_width=”700px” max_width_tablet=”” max_width_phone=”” max_width_last_edited=”on|tablet” header_2_font_size_tablet=”30px” header_2_font_size_phone=”15px” header_2_font_size_last_edited=”on|desktop” locked=”off” global_colors_info=”{}” header_font_size__hover=”30px” header_font_size__hover_enabled=”30px” header_letter_spacing__hover=”0px” header_letter_spacing__hover_enabled=”0px” header_text_shadow_style__hover=”none” header_text_shadow_style__hover_enabled=”none” header_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_2_font_size__hover=”26px” header_2_font_size__hover_enabled=”26px” header_2_letter_spacing__hover=”0px” header_2_letter_spacing__hover_enabled=”0px” header_2_line_height__hover=”1em” header_2_line_height__hover_enabled=”1em” header_2_text_shadow_style__hover=”none” header_2_text_shadow_style__hover_enabled=”none” header_2_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_2_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_3_font_size__hover=”22px” header_3_font_size__hover_enabled=”22px” header_3_letter_spacing__hover=”0px” header_3_letter_spacing__hover_enabled=”0px” header_3_line_height__hover=”1em” header_3_line_height__hover_enabled=”1em” header_3_text_shadow_style__hover=”none” header_3_text_shadow_style__hover_enabled=”none” header_3_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_3_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_4_font_size__hover=”18px” header_4_font_size__hover_enabled=”18px” header_4_letter_spacing__hover=”0px” header_4_letter_spacing__hover_enabled=”0px” header_4_line_height__hover=”1em” header_4_line_height__hover_enabled=”1em” header_4_text_shadow_style__hover=”none” header_4_text_shadow_style__hover_enabled=”none” header_4_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_4_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_5_font_size__hover=”16px” header_5_font_size__hover_enabled=”16px” header_5_letter_spacing__hover=”0px” header_5_letter_spacing__hover_enabled=”0px” header_5_line_height__hover=”1em” header_5_line_height__hover_enabled=”1em” header_5_text_shadow_style__hover=”none” header_5_text_shadow_style__hover_enabled=”none” header_5_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_5_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_6_font_size__hover=”14px” header_6_font_size__hover_enabled=”14px” header_6_letter_spacing__hover=”0px” header_6_letter_spacing__hover_enabled=”0px” header_6_line_height__hover=”1em” header_6_line_height__hover_enabled=”1em” header_6_text_shadow_style__hover=”none” header_6_text_shadow_style__hover_enabled=”none” header_6_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_6_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” text_letter_spacing__hover=”0px” text_letter_spacing__hover_enabled=”0px” text_text_shadow_style__hover=”none” text_text_shadow_style__hover_enabled=”none” text_text_shadow_color__hover=”rgba(0,0,0,0.4)” text_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)”]

\n

Style in Micro and Supper Apps<\/h2>\n<\/blockquote>[\/et_pb_text][et_pb_text _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”]

The base app is the main app in which you’ve started creating the project. For example, you can create an initial comment that will contain the style constant skins and components you\u2019re going to share in your other Micro Apps. The base app may or may not contain linked Micro Apps. A collection of Micro Apps grouped together into a larger Unified App is called the Super App, which consists of the base app and one or more Micro Apps.<\/span><\/p>\n

\n

Any updates to a Micro App will reflect at every instance where that Micro App is used. If a resource is referenced in more than two apps, you can place the resource in a common resource-sharing Micro App. When you enable resource sharing from a Micro App, all other Micro Apps can access those resources.<\/span><\/p>\n

\n

Micro-apps have gained popularity among developers as they enable individual teams to work on different app components simultaneously. However, composing these micro-apps into a single app can be challenging. In this article, we will discuss how to compose micro-apps into a super app using an example.<\/span><\/p>[\/et_pb_text][et_pb_image src=”https:\/\/www.prominic.net\/wp-content\/uploads\/2023\/03\/HCL-Volt-MX-Super-Apps_1.png” alt=”HCL-Volt-MX-Super-Apps Demo” title_text=”HCL Volt MX Super Apps_1″ align=”center” _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”]

The example app used in the webinar is a Government app which has a number of Micro Apps in it, for example a Complaints micro-app which is built inside the Iris. The Complaints micro-app is an iOS project linked to the comments micro-app. But linking the two micro-apps is not enough, as resource sharing needs to be enabled for the complaints micro-app to access all the assets in the comments micro-app.<\/span><\/p>\n

<\/p>\n

Firstly, the request micro-app is imported, which provides the functionality to raise a request to the Government app. The Request micro-app is built individually, and once imported, it is linked with the Complaints micro-app and Comments micro-app in the super app.<\/span><\/p>\n

<\/p>\n

The Government Super App is then imported, and in the Project Explorer, the three micro-apps are linked. The Super App has the functionality for end-users to log in, and when they click on Requests or Complaints, they navigate to the appropriate form in the Request micro-app or Complaints micro-app.<\/span><\/p>\n

<\/p>\n

Although the end-user sees the app as a single app, during the design and development time, teams work on individual micro-apps that can be composed into a super app. In the example presented in the webinar, the Complaints micro-app has the functionality to raise complaints and view previous complaints. Additionally, the form has skins and patterns created as part of the Comments micro-app.<\/span><\/p>\n

<\/p>\n

You can create components inside the common app. Components that are created in the common app can be referenced in other micro-apps and super apps. For example, creating a header component with a label to show the company name is a simple way to demonstrate how to refer to the components defined in the common app. Once the components have been created, the common app is ready to be used in other micro-apps and super apps.<\/span><\/p>\n

<\/p>\n

Volt MX, through Iris provides developers the tools to create customized graphs and link them to create a super app. Creating themes, style constants, skins, and components are crucial to building a project that meets your requirements. With Iris, changing the theme or branding of your application becomes more manageable, making it a valuable tool for developers.<\/span><\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_text quote_border_weight=”14px” quote_border_color=”#811937″ _builder_version=”4.20.1″ link_font=”||||||||” quote_font=”|700|||||||” quote_text_color=”#000000″ quote_font_size=”18px” quote_line_height=”1.8em” header_font=”||||||||” header_2_font=”|700|||||||” header_2_font_size=”25px” header_2_line_height=”1.5em” text_orientation=”center” max_width=”700px” max_width_tablet=”” max_width_phone=”” max_width_last_edited=”on|tablet” header_2_font_size_tablet=”30px” header_2_font_size_phone=”15px” header_2_font_size_last_edited=”on|desktop” locked=”off” global_colors_info=”{}” header_font_size__hover=”30px” header_font_size__hover_enabled=”30px” header_letter_spacing__hover=”0px” header_letter_spacing__hover_enabled=”0px” header_text_shadow_style__hover=”none” header_text_shadow_style__hover_enabled=”none” header_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_2_font_size__hover=”26px” header_2_font_size__hover_enabled=”26px” header_2_letter_spacing__hover=”0px” header_2_letter_spacing__hover_enabled=”0px” header_2_line_height__hover=”1em” header_2_line_height__hover_enabled=”1em” header_2_text_shadow_style__hover=”none” header_2_text_shadow_style__hover_enabled=”none” header_2_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_2_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_3_font_size__hover=”22px” header_3_font_size__hover_enabled=”22px” header_3_letter_spacing__hover=”0px” header_3_letter_spacing__hover_enabled=”0px” header_3_line_height__hover=”1em” header_3_line_height__hover_enabled=”1em” header_3_text_shadow_style__hover=”none” header_3_text_shadow_style__hover_enabled=”none” header_3_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_3_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_4_font_size__hover=”18px” header_4_font_size__hover_enabled=”18px” header_4_letter_spacing__hover=”0px” header_4_letter_spacing__hover_enabled=”0px” header_4_line_height__hover=”1em” header_4_line_height__hover_enabled=”1em” header_4_text_shadow_style__hover=”none” header_4_text_shadow_style__hover_enabled=”none” header_4_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_4_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_5_font_size__hover=”16px” header_5_font_size__hover_enabled=”16px” header_5_letter_spacing__hover=”0px” header_5_letter_spacing__hover_enabled=”0px” header_5_line_height__hover=”1em” header_5_line_height__hover_enabled=”1em” header_5_text_shadow_style__hover=”none” header_5_text_shadow_style__hover_enabled=”none” header_5_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_5_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” header_6_font_size__hover=”14px” header_6_font_size__hover_enabled=”14px” header_6_letter_spacing__hover=”0px” header_6_letter_spacing__hover_enabled=”0px” header_6_line_height__hover=”1em” header_6_line_height__hover_enabled=”1em” header_6_text_shadow_style__hover=”none” header_6_text_shadow_style__hover_enabled=”none” header_6_text_shadow_color__hover=”rgba(0,0,0,0.4)” header_6_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)” text_letter_spacing__hover=”0px” text_letter_spacing__hover_enabled=”0px” text_text_shadow_style__hover=”none” text_text_shadow_style__hover_enabled=”none” text_text_shadow_color__hover=”rgba(0,0,0,0.4)” text_text_shadow_color__hover_enabled=”rgba(0,0,0,0.4)”]

\n

Microsoft Configs and JSON objects<\/span><\/h2>\n<\/blockquote>[\/et_pb_text][et_pb_text _builder_version=”4.20.1″ _module_preset=”default” global_colors_info=”{}”]

Micro apps can also be linked together using Microsoft configurations. You can create a Super App that will contain a Request app and a Government app inside it.\u00a0<\/span><\/p>\n

One other great thing you can do using Volt MX Curie is navigate from one form to another using the “navigate to form” action in the super app. In addition, you can navigate between forms in different micro apps using JSON objects in the form controller.<\/span><\/p>\n

To navigate between forms in different micro apps using the “navigate to form” action, you need to create a JSON object with the app name and friendly name. The app name is the name of the micro app in which the form is located, and the friendly name is the name of the form. This JSON object is then passed to the “navigate to form” action in the form controller.<\/span><\/p>\n

In addition, with Volt MX Curie, you can define the navigations inside the app using a configuration-driven approach. This approach allows you to define all the navigations in one place, rather than in each form controller. When you create a new Iris project, a folder called “navigation” is created, containing a JSON object. This JSON object defines all the navigations within the app.<\/span><\/p>\n

All the steps that we explained have been demoed during the webinar, so make sure to have a look at it as well; we are sure you will find great insights as well.<\/span><\/p>\n

If you need a hand with your journey with Volt MX, <\/span>just drop us a line<\/span><\/a> and we are happy to help you.<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.21.0″ _module_preset=”default”][et_pb_column _builder_version=”4.21.0″ _module_preset=”default” type=”4_4″][et_pb_code _builder_version=”4.21.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]