How to Create Composite Components in Mongoose

Overview

Businesses encounter obstacles in creating and reusing collections of components within a Flexbox during application development. The absence of a standardized approach for managing composite components, such as feedback forms, input field sets, or essential parts of applications hampers productivity and consistency.

---

---

Tutorial

Difficulty: Medium
Estimated completion time: 30 Minutes

This tutorial will demonstrate how to create and implement a simple card style composite component that can be reused throughout your application.

What is a composite component?

Composite Components are a combination of components and flex attributes that can be stored as a template so you can save and use them on different forms.

How to create a composite component in the Mongoose designer

In this session, we’re going to create a simple card style composite component with an edit box a combo box, and a date combo box.

We will be using the Mongoose Web Designer. To launch Mongoose, From the Navigation menu select the OS application.

Select Mongoose from either the tab on the top of the screen or use the security card, located on the main page.

Click Ok to log into the default tenant.

Launch the Web Designer by clicking the “Open designer in a new window” toolbar icon (circled here).

In the Identify Your Editing Scope dialog box, select Site Default, and then click Ok.

Create a New form by clicking Form, Definition, and New.

On the Form Wizard Selection screen, select New Form, and in the Category field select Classic. In the Wizard field select BuildFromScratch, Click Ok.

In the Name field, give the form a meaningful name.

Click Finish.

Create a FlexLayout, by selecting the FlexLayout Component and drop it onto the form

With the FlexLayout box selected, under properties expand Lawout, then expand size. Make the width value 50.

Edit the flex layout attributes by clicking on the edit icon in the upper right-hand corner.

Change the Type field to VerticalBox and using the + button add 9 more regions.

Set all region’s Unit fields to FormUnit.

For each third region, make the Length field three.

This will be where our actual component will go, like our edit box.

Make the bottom two regions for each three regions’ Orientation field the value of Fill-. So that our component spans the entire flex. Click Ok.

How to add a composite component to a form

Now we are going to go ahead and start adding our components to a form.

Select the Edit component from the Toolbox and drop it into the First big flex.

Select the ComboBox component from the Toolbox and drop it into the Second big flex.

Select the DateCombo component from the Toolbox and drop it into the Third big flex.

Add Static Components for our labels, we will put them above each box. Click the Static Component from the Toolbox and drop them above each box.

Select Static1-SITE and in the Properties section, set the Caption field to Label, set the Justification to Left, and change the Font size to 10.

Repeat the previous steps for the other 2 Static SITES (static2_SITE and static3_SITE).

Also on the static SITES, in the Properties section. Scroll down and expand Miscellaneous and Expand Specific Attributes. Set the No Colon entry to True.

Repeat the previous steps for the other 2 Static SITES (static2_SITE and static3_SITE).

Regenerate the Form by clicking the Icon as shown below. The statics will update

We have our first Composing Component with Labels for an Edit box a Combo box and a Date Combo box.

Save the Composite Component. Select the outermost flex region, right click and select Save as Template.

The first part of the Name field will be the folder that it saves to (CompositeComponentTest), and the second part will be the name of the composite component. We will call this TutorialCard. Make sure you click off of the Name field to make sure it saves. You can change the description if you want. Click Ok.

Go over to the Component Templates in the Toolbox, and scroll down to the folder we created. Click on our composite component and create it by dropping it onto the form; we can duplicate it and use it on any form we want.

Another example of a Composite Component is this header bar, so if you have multiple forms that have the same header bar you can create a Composite Component for it and just add it to your forms.

In conclusion, Composite Components are a great tool to make a combination of components, they can be used on any of your forms instead of creating them every time. They are saved in the toolbox for you to use whenever you want.

For the steps mentioned above, refer to the video below.

Resources

Help Documents and User Guides

• Infor OS Portal
• Infor Mongoose