Mongoose Hello World Tutorial

Overview

This tutorial will guide you through hands-on training exercises to help you become comfortable working within the Mongoose application platform. By the end of these tutorials, you will have built a simple consumer UI application that allows users to select items and add them to a shopping cart.

---

---

Difficulty: Medium
Estimated completion time: 8 Hours

Part 1

What is Mongoose?

Mongoose is Infor’s premiere application development framework. It provides rapid development of applications that use relational databases, ranging from large enterprise software to small web portals.

Mongoose enables you to build any combination of simple, high-productivity Graphical User Interface apps (sometimes called “GUI apps”) and unique portal or dashboard type apps.

Mongoose allows users and customers to adapt and upgrade their applications to a virtually unlimited extent to fit their business needs.

Development is done with minimal coding, with the forms, business objects, and server-side logic defined mostly in metadata, rather than in code.

User and customer extensions are also metadata, so they upgrade automatically. Mongoose applications are enterprise-class, with simple configuration and deployment, and can easily be moved between on-premise and cloud installations

Getting Started

For these sessions we’ll 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.

Opening the Users form    

There are three ways to open a form in Mongoose:

• From the Form > Open menu (or Ctrl+O).
• In the Mongoose Explorer.
• From the list of recently used forms from the Form menu.

Select Form > Open. In the Filter field, type: users.

Select the Users (UsersMaint) form and click Ok.

Alternatively, you can use the Mongoose Explorer. In the Explorer, you can either use the Master Explorer option, or create and use your own My Folders shortcuts.

In the Master Explorer, you can expand All Forms and then browse to the Users form. To open it, double-click the form name.

Lastly, you can open a form from the list of recently used forms. This list displays the last 10 forms that you have accessed. You can view this list from the Form menu.

Using Filter-In-Place

Once the form opens, it is in the default Filter-In-Place mode.

This mode allows you to type filter criteria into any field on the form. These filter criteria help to reduce the number of records that are returned and displayed.

Let’s filter to locate your user profile. Type your email address into the User Name field.

To execute that filter—that is, to leave Filter-In-Place mode and retrieve all records that meet the filter criteria—click the Filter-In-Place icon on the toolbar or press F4.

Editing permissions

We want to now set the editing permissions. By default, this is set to Basic. This particular editing level only allows users to open and modify existing forms as their own user versions of the forms.

In this Tutorial, we need to have Site Developer permissions, so that we can create new forms.

From the Editing Permissions drop-down list, select Site Developer, and then click the Save icon on the toolbar. 

We also want to have Super User privileges so we can open mongoose core forms. To do so, check the Super User checkbox at the top.

Click Save.

Using shortcuts

We’re going to be using the form named IDO Projects frequently, so let’s create a shortcut to that form in the Mongoose Explorer, under My Folders

To access the Mongoose Explorer, click the Explorer menu item. Right-click on the My Folders section and select New Shortcut from the menu.

To create the shortcut, browse to the IDO Projects form and click Ok.

You will now see the IDO Projects shortcut.

IDO projects

Open the IDO Projects form. This form is used to create an IDO project, which is a logical grouping of business objects called Intelligent Data Objects (IDOs).

Query the projects from Filter-In-Place mode by clicking the toolbar icon as before, or by pressing F4. You will now see all the existing IDO projects.

Create a new IDO project by clicking the New icon on the toolbar (circled here) or by pressing Ctrl+N. Notice that a blue star appears in the new row that was inserted into the grid. This means that it is a new record.

In the Project Name field, type: HelloWorld.

Click Save and close the form.

 Setting user preferences

Let’s open our user preferences modal so we can touch on some important user settings. From the View menu select User Preferences.

Select the Unload IDO Metadata With Forms option.

Layout options

While in the User Preferences dialog box, select the Layout tab. Here you can set the theme and the basic layout you want to use for your application. We will dive into themes deeper later on.

Keep the default option of Tabbed Form Layout selected.

Click Ok.

Unload All Global Form Objects to clear the cache.

Select Form > Definition > Unload All Global Form Objects

Creating a form

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.

Click this link for more information on Setting Editing Scope in Design Mode.

To launch the Form Wizard, click the New Form Definition icon on the toolbar (circled here).

For the Category, select NewData, and for the Wizard, select Maintenance. Click Ok.

The New Data Maintenance Wizard (NDMW) allows us to create a table, an IDO, and a form all at once, everything we need to create a fully functioning form.

In the IDO Name field, type: Customer

This will be the name for our table, IDO, and form.

In the IDO Project Name field, select HelloWorld.

In the Table Alias field, type: cust

Keep all of the other defaults.

Create the three properties listed here, using the Add Row button to add each property:

Name	Data Type	Property Length	Primary Key	Required	Label String ID
ID	String	50	Y	Y	sID
Name	String	100		Y	sName
Address	String	150			sAddress

Click Next, and then click Finish.

After the table and IDO are created, the New Data Maintenance Wizard asks if you want to create a form. Click Yes.

This launches the New Form Wizard. This wizard steps you through the creation of the Customer form. Here you specify what properties you want to include on your form.

In the Name field, type: Customer, and then click Next.

Keep all of the default selected properties of Address, ID, and Name.

Click Next.

Use the arrow buttons on the right to reposition the properties so that they are in this order: ID, Name, Address.

Click Next, and then click Finish.

Once the form loads, you can close the New Data Maintenance Wizard.

Change Component Type

After your form opens in the Web Designer window, select the Address Edit (Address) component.

In the Properties panel on the right, change the component Type from Edit to MultilineEdit.

Click-and-drag the corner handle of the component to make the field larger.

If your Address field has a label of sAddress, this is because it is a new string and does not have a string value defined.

To add the new string value, click the AddressStatic component, and click the ellipsis (•••) button next to the Caption field.

When you see the prompt asking if you want to create the string, click Yes.

Use the default String Value of “Address” and click Ok.

Click Save.

Switch back to the runtime mode tab in your browser and open your Customer form. The form automatically opens in Add mode.

Create some customers by using the New icon from the toolbar.

Click Save.

Summary:

We created an IDO project named HelloWorld. We then use the new data maintenance wizard to create our customer table and columns. These tables are stored in the app database inside mongoose. Once the table was created, the new data maintenance wizard created our customer IDO which holds all the properties, these IDO’s are stored in the objects database in Mongoose. Lastly we created a form using the form that link to the columns on the table wizard that uses our customers IDO as a primary collection. This allows us to bind our components to properties on the IDO. All the forms metadata is stored in the forms database in Mongoose.

Here is the Part 1 video showing the detailed steps to complete the previous tasks.

Part 2

The inheritance model

Mongoose has many inheritance strategies that provide powerful facilities for reducing the development effort and increasing the consistency of your application. This allows you, as a developer, to create reusable classes that can be used throughout an application with a single point of maintenance. The image below illustrates all the different levels in which a class can be inherited.

Property classes

Property classes are applied at the IDO level and can hold various data attributes. When a property class is applied to a property, it inherits those attributes.

Launch Mongoose, and then launch the Web Designer by clicking the “Open designer in a new window” toolbar icon.

Open the Customer form from the Form menu.

Select the IDEdit component, and on the Properties panel on the right, expand the Data Source section, and then expand the Data Type section.

Notice that the Length is 0. However, we are, in fact, limited in the number of characters we can type. This is because the length is being inherited from our ID property.

If the length was changed here, at the component level, it would override the length defined at the property level.

To view the attributes that a component is inheriting from the IDO, navigate to the Properties panel and expand the Inheritance section. Next to the View Attributes Inherited property, click the ellipsis (•••) button.

This opens the IDO Properties form, with the ID property selected and displays all of the attributes that are defined on the property. Here you should be able to see your length of 50 that is being inherited from the property, the zero that we saw earlier was the length that was defined at the component level.

You can use this form for reference, or to make changes on the fly.

Creating a property class

In this next part, we are going to create a property class that will be used to store data attributes that will be used when we create our Unit of Measure form.

Start by switching back to the runtime mode tab and add a new shortcut for the IDO Properties form:

1. Open the Mongoose Explorer if it is not already open.
2. Right-click the My Folders submenu.
3. From the popup menu, select New Shortcut.

Locate and select the Property Classes form.

Click Ok to create the form shortcut.

Click on the shortcut to open the Property Classes form. Execute Filter-In-Place by clicking the toolbar icon or by pressing F4.

Create a new Property Class by clicking the New icon from the toolbar (Circled Here), or by pressing CTRL+N.

Add a Class with these properties:

• Class Name: UMBase
• Data Type: String
• Column Data Type: nvarchar
• Label String ID: sUM

Click Save.

Close the form and run Unload global form objects (Form > Definition > Unload All Global Form Objects).

Building the Unit of Measure facility

In this next part, we are going to build out our Unit of Measure facility that will eventually be used when we create our Items facility. We will be using the New Data Maintenance Wizard (NDMW) to do this and will apply the UMBase property class we created in the previous section.

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

Click the New Form Definition icon from the toolbar.

Or from the Form menu select Definition > New.

In the Form Wizard Selection modal, select these options:

• For the Category, select NewData.
• For the Wizard, select Maintenance.

Click Ok.

In the New Data Maintenance Wizard, set these fields to these values:

• IDO Name: UMs         
• IDO Project Name: HelloWorld        
• Table Alias: ums

Leave all of the other defaults as is.

Use the Add Row button to create the two properties listed here:

Name	Property Class	Data Type	Property Length	Primary Key	Required	Label String ID
UM	UMBase	String	10	Y	Y
Description		String	50			sDescription

To create the table and IDO, click Next, and then click Finish.

When prompted, to create the form, click Yes.

Step through the New Form Wizard, leaving the default values as they are.

Click Next.

Click Next.

If needed, reposition the fields on the form so that UM is first and Description is second.

Click Next, and then click Finish.

Click Ok.

Click Close.

After the form opens in the Web Designer, if there are any labels prefixed with an “s” that means that the strings are new and need to be created. From the Properties panel, on the Caption property click the ellipsis to define the string value.

In this example, the sUM string value needed to be created.

Change the String Value name to Unit of Measure.

Click Ok, then Save.

Return to the Runtime Mode tab and open the new UMs form. You will notice now that our label is showing the correct string value that we just created.

Add these two records, using the New icon from the toolbar to add each row:

UM	Description
EA	Each
DZ	Dozen

Click Save.

Create and extend our property class

Now we want to build onto the inheritance model, by utilizing a base class when creating a property class. When we utilize a base class, it will inherit any attributes defined on that property class, and allows you to override any of those attributes.  

In the Runtime Mode tab, using the Explorer. Open the Property Classes form. Collapse the Mongoose Explorer so you have more workspace by clicking the Explorer menu item.

Execute Filter-In-Place by clicking the Filter-In-Place icon on the toolbar.

Create a new property class by clicking the New icon on the toolbar.

Add a class with these specifications:

• Class Name: UM
• Base Class: UMBase

• Domain IDO: UMs
• Domain Property: UM
• Additional List Properties: Description

Use the New icon from the toolbar and create two more property classes:

Class Name	Data Type	Length	Decimal Position	Default Value	Column Data Type	Label String ID
ItemBase	String	20			nvarchar	sItem
Cost	Decimal	18	2	0	decimal	sCost

ItemBase Property Class:

Cost Property Class:

Click Save.

Close the form and run Unload global form objects (Form > Definition > Unload All Global Form Objects).

Create the Items facility

Now we want to create our Items table IDO and form.

Switch back to the Web Designer, with a scope of Site Default, launch the New Data Maintenance Wizard (NDMW) (Form > Definition > New).

In the Form Wizard Selection form, make these selections:

• Category:  NewData
• Wizard: Maintenance

Click Ok.

Use these settings:

• IDO Name: Items
• IDO Project Name: HelloWorld
• Table Alias: itms

Keep all of the other default values, and create the four properties listed here, using the Add Row button to add each property:

Name	Property Class	DataType	Length	PK	Req	Decimal Precision	Label String ID	Default Value
Item	ItemBase	String	20	Y	Y		sItem*
Description		String	150				sDescription
Cost	Cost	Decimal	18			2	sCost*	0*
UM	UM	String	10				sUM

Click Next, and then click Finish.

When asked if you want to create a form, click Yes.

Once the New Form Wizard launches, leave the form Name and Data Source fields set to Items, and click Next.

On the Properties page, keep the default selected properties and click Next.

On the next page, reposition the properties so that they are in this order:

• Item
• Description
• Cost
• UM

Click Next, and then click Finish.

Click Ok.

Click Close.

The form is now created. (Example shown below)

Optionally, create the translatable strings for the Item field label and the Cost field label.

Using the Items form

Return to the Runtime Mode tab and open the newly created Items form. The form opens in Add mode by default.

Notice that the UM or Unit of Measure field is now a ComboBox component, instead of the standard Edit component. This is because this property is inheriting a domain list from the property class, which provides a list source for the component.

We want to test the built-in validation provided by the Domain list: This ensures that the user must select a valid item from the list source (in this case, the Unit of Measure field).

In the UM field, type: DZZ. And then tab out of the field or click the Save icon. The system displays an error message that “DZZ is not a valid UM”

Using the New icon from the toolbar, add the following records on the Items form:

Name	Description	Cost	Unit of Measure
Bike	70s Road Bike	100	EA
Dumbbell	45lb Iron	45	EA
Guitar	Natural Acoustic	129.99	DZ
Eggs	Cage Free Chickens	3	DZ

Click Save.

Summary: See diagram below

We created the property class um base where we assigned the label string id sum, then we created another property class named um which was derived from um base. Which means it inherited the label string id sum on this level. We added the IDO domain information which allowed us to have a drop list of items and validation from the um’s table next we created. The property um which was derived from um base meaning that again the label string id sum was inherited. After our um’s form was created, an edit component that was bound to the um property inherited that same label string id.

Here is the Part 2 video showing the detailed steps to complete the previous tasks.

Part 3

In this Session, we are going to touch on the technical architecture of a simple request in mongoose we will also introduce working with the event system and a few key concepts in developing with minimal code.

Understanding the flow of data

Launch Mongoose, and open the Items form from the list of recently used forms by clicking on the Form > Items menu item.

Query the data from Filter-In-Place mode by clicking the Refresh toolbar icon (Circled), or by pressing F4.

In this scenario, when we hit refresh, Mongoose sends a Load Collection IDO request XML to the server, where the IDO Runtime builds the SQL statements needed for the request. This is all taken care of by the Mongoose infrastructure and does not require any coding from the user.

Filtering data

Suppose there are millions of rows of data and you want to query only the rows which started with the letter “B”.

There are several ways to do this in Mongoose, but the simplest is Filter-In-Place.

On the Actions menu, click Filter > Begin in Place, or use the toolbar icon.

In the Item field, type: b*

Press Filter-In-Place icon or F4 key to execute the query.

To reenter Filter-In-Place mode, press the icon or press F4. Clear the filter by clicking the Actions > Filter > Cancel in Place menu item.

In the Cost field, type: >99

Press Filter-In-Place icon or F4 key to execute the filter. This returns all of the records that cost greater than $99.

You can also combine this filter with other fields. Reenter Filter-In-Place mode, in the UM field, select DZ with the Cost set to >99.

Press Filter-In-Place icon or F4 key to execute the filter. Now it will only return values that are >$99 and have a UM of DZ.

Initial commands

The initial command property specifies a command that controls what happens when the form opens. The available options are Refresh, Filter, FilterInPlace, Add, or Event <eventname>.

Refresh will open the form and query all of the data.

Filter will bring up the associated query form where you can specify a variety of filter criteria.

FilterInPlace will open the form in FilterInPlace mode so we can query specific data. Instead of querying all of the data, opening the form in Filter-In-Place mode allows the user to use filter criteria to narrow down the returned data set. This is useful for when you are working with large sets of data.

Add will open the form without querying any data with the new row inserted into the primary collection this is the default  behavior for any forms you build.

Event <eventname> allows you to execute a form event. With this option selected, you can specify a specific event to be triggered upon form open.

Launch the Web Designer by clicking the icon on the toolbar. When prompted, set the Editing Scope to Site Default, and click Ok.

Open the Items form from the list of recently used forms Form -> Items. To set form-specific properties, navigate to the Properties panel and click on the Form tab at the bottom.

Under the Behavior section, set the Initial Command property to Refresh.

Click Save.

Switch back to the Runtime Mode tab and reopen the Items form. Now when the form opens, it queries all of the records.

Diagnostics

Mongoose has a built-in diagnostics tool that can be used to view messages and operations in the current session. Messages are captured and displayed in real time and can be filtered, searched, and saved to a file.

To set which events you want to see in diagnostics, open the User Preferences. While in Runtime Mode click on the View -> User Preferences menu item.

Select the Diagnostics section on the left, and under the General tab, select the Enabled option to turn on diagnostic messages.

Navigate to the Form tab and select the Events option, and under the Event Handler section select the Include option. With these two options selected, Mongoose will trace any messages coming from the events or the event handlers. Close the User Preferences modal. Click Ok.

To view the diagnostics log, select the View -> Diagnostic Log menu item.

Open the Items form from the list of recently used forms Form -> Items. Upon form open, the Diagnostics panel displays all of the messages associated with any events or event handlers. Depending on what initial command property you have set.

In the example below, we have the FilterInPlace Initial Command property set.

There are several events that Mongoose generates as users interact with the form. StdFormFilterInPlaceBegin, is generated because we had our Initial Command property set to FilterInPlace.

Click the Filter In Place icon or press F4 to execute the filter.

When the StdFormFilterInPlace event is executed, a number of other events are also generated in response to that event. You have the ability to manually trigger these standard events, or you can intercept them and attach your own custom events to them.

Intercepting standard events

In this next example, we are going to intercept a standard Mongoose event and add on to it with a custom event handler. This will display the order of events that is happening in the background using the Diagnostics tool.

Switch back to the Web Designer and open the Items form Form -> Items. From the Toolbox panel on the left click the Button component and draw it on your form.

With the button component still selected, navigate to the Properties panel on the right and expand the Events section.

Set the Primary event on the button to StdFormRefresh. 

Click Save.

Switch back to the Runtime Mode tab and reopen the Items form. Click on the button we just added, Mongoose responds just as if we clicked refresh on the toolbar.

Switch back to our Items form in the Web Designer. Expand the Form Details panel, which is located on the bottom of the page.

Click the Event Handlers tab.

Select the + icon at the bottom to add a new event.

For the Event, select StdFormRefreshCompleted.

For the Type, select Prompt.

Click on the ellipsis to the right of the Parameters field to specify the Prompt parameters.

For the Message Text field, type: Hello World and then click Ok.

Click Save.

We just intercepted the standard Mongoose event and added in our own custom event handler. To view this in action, switch back to the Runtime Mode tab and reopen the Items form.

You will see the following prompt message. You can also manually trigger the event by clicking the button where we attached it as the primary event.

Variables

Variables are mechanisms for storing data needed at runtime. Variables are name value pairs. They can be temporary or persistent, global to all forms, or only available to the current form. In this next part, we are going to create a temporary form variable that will store a property value at runtime.

Switch back to our Items form in the Web Designer.

From the Details pane, click on the StdFormRefreshCompleted event that we just created. Click the “+” icon on the bottom left to add another event handler to our StdFormRefreshCompleted event.

For the event Type, select Set Values.

Then, click on the ellipsis button on the Parameters field.

On the Event Handler Parameters modal, click the ellipsis button on the Variables field. To Create a temporary form variable.

On the Edit Set Variable Values modal, click the New button.

On the Edit Set Variable Value Pair modal, for the Target, type: varTest

For the Value, type: P(Description)

This will create a variable called varTest, and the value is using a Substitution Keyword. When our event handler executes at runtime, Mongoose will interpret any substitution keywords it finds. In this case, P, is standard for Property and will replace it with the value of the Description for the current item.  Click Ok until you return back to the home screen.

Click Save.

A list of all of the global variables can be found under the Edit -> Variable menu. Here you can view the properties of a variable, such as its value, version, and type.

Binding a component to a variable

To view our variable being populated, we can bind it to a component on our form.

From the Toolbox panel on the left, select the Edit component and draw it onto your form.

With the Edit component still selected, scroll down on the Properties panel and expand the Data Source section.

For the Binding Type field, select Variable.

For Binding field, type: variables.varTest

Click Ok and Save.

Switch back to the Runtime Mode tab and reopen the Items form Form -> Items. You will see our variable that is bound to the edit component is now being populated with the description of the item. Click on a different row in the grid, and you will see the variable value being updated each time you switch records.

Creating custom events

Instead of having our event handler execute on the standard StdFormRefreshCompleted event, we can create our own event which is triggered from our button.

Switch back to our Items form in the Web Designer.

Expand the Form Details pane at the bottom of the page.

Select the Event Handlers tab.

Expand the StdFormRefreshCompleted event and select the Set Values event that we created in the previous step.

In the Event field, change the event name by replacing StdFormRefreshCompleted with Test.

Now select the Prompt event and In the Event field, change the event name by replacing StdFormRefreshCompleted with Test.

Select the button component we added earlier.

From the Properties panel, expand the Events section. For the Primary event field, set it to Test.

Click Save.

Reopen the Items form in runtime mode and click the button to trigger our Test event. With the diagnostics panel still open, you can see our custom event, Test, running in the background.

Summary:

We looked at the flow of data between mongoose and the IDO runtime service. We touched on basic filtering functionality variables and working with standard and custom events in Mongoose.

We briefly covered the flow of data in mongoose how when refresh is clicked an xml is sent to the IDO runtime service, where it’s processed and sent to sql and returned in the form of an update collection xml. This is all handled instinctively by Mongoose and requires no setup from the user. We covered the basics on filtering in Mongoose and how to use a wildcard character a less than or greater than to filter specific criteria as well as how to combine filters. We explored the different types of initial command actions that can control what happens when the form opens. We also learned how to turn on specific diagnostics messages in our user preferences and view the diagnostics panel in action as events were triggered on the form, we also got started working with the event system and how to intercept some of the standard Mongoose events as well as creating our own custom event. Lastly we introduce variables which are mechanisms for storing data needed at runtime, we introduce a Mongoose substitution keyword to store a property value into our variable. These substitution keywords are interpreted by Mongoose when the event was triggered.

Here is the Part 3 video showing the detailed steps to complete the previous tasks.

Part 4

We are going to extend our application further by building onto our existing items table. We will get started on working with themes and theme classes and we’ll create our orders facility that will allow users to place orders in our store portal.

Adding a new column to an existing table

In this first part we want to allow the users to add an image of their item on the items form, to do so we will first have to manually add a column to our items table then we will need to add it as a property onto our IDO and finish up by adding it to our items form. We will also utilize the event system so users can import an image from a button.

Open the SqlTables core form. Launch Mongoose and click the Form -> Open menu item. In the Filter field, type: Sql Tables. Select the SqlTables form and click Ok.

This form will automatically open in Filter-In-Place mode. For the Table Name field, type: Items and then press F4 to execute the filter.

To view the columns on our Items table, click on the Columns button.

Add a new column by clicking the New icon on the toolbar.

Add the following information:

• Column Name: Picture         
• Data Type: varbinary    
• Is Nullable: Yes
• Length: -1      

Using a length of -1 indicates that there is no character limit or unlimited.

Click Save and close the forms.

Adding a new property to an existing IDO

In the previous step, we added a new column to our existing Items table. Now we need to add that column as property on our Items IDO. Before we do that, we need to create a picture property class that can be used throughout our application.

Open the IDO Property Classes form from the list of recently used forms. Press F4 or FilterInPlace Mode icon to query the data.

Add a new property class by clicking the New icon on the toolbar. Add the following property class:

Add the following Property Class:

• Class Name: Picture         
• Data Type: Binary    
• Length: -1
• Column Data Type: varbinary
• Binary Format: PNG    

Click Save and close the form.

Unload global form objects (Form -> Definition -> Unload all Global Form Objects). You may also have to refresh the browser to see changes.

Now that our Property Class has been created, we can use it when we add our new property to our IDO.

Click Form -> Open. In the Filter field, type: IDOs. Select the IdoCollections form and click Ok.

This form will automatically open in Filter-In-Place mode. For the IDO Name field, type: Items and then press F4 to execute the filter.

To add a new property, click the New Property button.

After the New Property modal loads, select Bound and then click Next.

In the Bind To dropdown, select the Picture column we created in the previous section.

Keep the default Property Name of Picture.

For the Property Class dropdown, select our Picture property class we just created.

Notice that when you select the property class, the Data Type and Column Data Type fields below will become disabled and will automatically inherit the attributes defined in the Picture property class.

Click Finish to add the property.

Close the form.

Unload global form objects (Form -> Definition -> Unload all Global Form Objects). You may also have to refresh the browser to see changes.

Updating the Items form

Now that we have our new Picture column and property created, we can now add it to our Items form. In this next part, we will create a routine that will allow the user to import and display an image of each item.

Open the Web Designer by clicking the icon from the toolbar (Circled Below).

Open the Items form from the list of recently used forms Form -> Items.

Select the edit component that is bound to the varTest variable and delete it by pressing the Delete key.

Select the button component we added earlier. Reposition button to the right of the screen and from the Properties panel, for the Caption field, type: sImport.

To create the string, click the ellipsis on the Caption field. When prompted if you want to create the string, click Yes.

Leave the default String Value of Import and click Ok.

From the Toolbox panel, select the Static component and draw a square to the right of the fields. This component will be used to display the picture of our item.

With the static component still selected, navigate to the Properties panel. Change the Name to static1Picture and expand the Data Source section. Set the Binding Type to Property, and for the Binding field select the Picture property from the dropdown.

By default, all static components include a colon at the end. To remove this colon, scroll down and expand the Miscellaneous section. Expand the Specific Attributes section and set the No Colon property to True.

Creating an import picture routine

Next, we are going to create an event that will import an image into the Picture property.

While in the Web Designer, expand the Form Details pane at the bottom.

Select the Event Handlers tab and click on the + icon in the bottom left to add a new event.

On the Event Handler modal, name the event: ImportPicture.

Click Ok.

For the Type field, select Binary Value Action and then click the ellipsis in the Parameters field.

On the Event Handler Parameters modal, set the Action field to Import. For the Component Bound to Binary Value Property field, select static1Picture and then click Ok.

Let’s change the primary event on our button to use our custom event.

Select the button1 component and navigate to the Properties panel. Expand the Events section and set the Primary event to ImportPicture.

Click Save.

Download and the extract the Mongoose Item Images.zip file located in the Download section at the bottom of this Tutorial.

Switch back to the Runtime Mode tab and reopen the Items form Form -> Items.

To query the data, press F4. Click the Import button. When prompted, select or drag and drop a .PNG image.

Here are a list of Images from the zip file.

• bike.png
• dumbbell.png
• eggs.png
• guitar.png

After an image has been selected, click the Upload button.

Once uploaded, the static1Picture component will display the image. After the record is saved, the image is saved as a binary value in the database. Mongoose also supports many other types of binary data such as .svg, .jpg, .bmp, etc.

 Click Save.

Continue adding images for the other Three remaining items. When you’re done importing the images remember to click Save.

Working with themes and theme classes

With the use of custom themes and theme classes, you can apply a custom look and feel that cascades throughout your application. In this next part, we will create a custom theme that we can use in our application, and then we will create a theme class that can be applied to our buttons.

Open the Web Designer and select the Edit -> Theme menu item.

Click the “+” icon from the bottom left to add a new Theme.

In the New modal, set the Name field to “HelloWorld” and click Ok.

Click the Edit button in the top right to edit the theme.

From the Elements tree, expand Form Component, and then select Button. For the Class Name field at the bottom, type in our class name of: BlueButton and then click the Add button.

After you add a class, the Elements tree will refresh. Navigate back to the Button category and select the BlueButton theme class we just added.

Under Categories, select Normal State, and set the Foreground color (font color) to: #FFFFFFFF

Set the Background to: #FF5CC6C7

Click Ok until you return to the home screen.

Click Save.

Before we can apply a theme class to our button, we need to first apply the theme to our application. Navigate back to the Runtime Mode tab.

Open up the user preferences (View -> User Preferences) and under the Layout category, select our HelloWorld theme and click Ok.

Click the Form -> Sign Out menu option. Once successfully signed out, click Ok to sign back in.

Once signed back in, reopen the Web Designer by clicking the icon on the toolbar.

Reopen the Items form and select the button1 component.

From the Properties panel, expand the Appearance section and set Theme Class to BlueButton.

 Click Save.

Joining tables

The Mongoose core form IdoCollections, allows us to create SQL join statements to join tables and manage those related tables. In this next part, in addition to the two character unit of measure code we’d also like to show the unit a measure description on our items form. We are going to create a table join on our Items table to the UMs table. This will allow us to bind properties on the Items IDO from the UMs table.

While in runtime mode, open the IdoCollections form.

Query the Items IDO. Enter Items IDO in the IDO Name field and click FilterInPlace icon or F4.

Select the Tables button on the bottom.

Click the New Table button at the top of the screen

For the Table Name, select the UMs Table. For the Table Alias field, type: ums.

Under the Join Conditions section, build the following expression from the droplists:

UM = Items (itemss) UM

Click the Add button to insert the expression into the text box, then click Ok to create the join and close the IDO Tables form.

Now that we have joined our table, we can now add properties from that table.

From the IDO Collections form, click the New Property button.

Select Bound, and click Next.

Drop the list of tables in the Bind To field and notice now that it displays columns from both the Items and the UMs table.

In the Bind To field, select ums.Description.

Change the Property Name to ums_Description.

Click Finish to create the property.

Unload Global Form Objects in both Runtime mode. Form->Definition->Unload Global Form Objects.

Adding a new property to a form

Now that we have our property created on the IDO, we can bind it to a component on our form.

Switch back to the Web Designer and open the Items form Form -> Items.

From the Toolbox, select the Static component and draw it onto the form just under the Unit of Measure field rename the component to staticDescription and give it a caption of sDescription.

From the Toolbox, select the Edit component and draw it onto the form.

From the Properties panel, expand the Data Source section. Set the Binding Type to Property, and on the Binding field, select our new property object.ums_Description.

Rearrange the component so that it sits directly under the UM field.

You can select multiple components by holding CTRL while selecting them. You can also use the positioning icons on the toolbar to help arrange and line up components.

We also need to add this property as a column in our grid. From the Toolbox, select the Grid component, and you will notice the Edit Grid Columns icon will appear in the top left corner of the component.

Click the Edit Grid Columns icon to open the Contained Components modal.

To add it at the end of the grid, select the last column in the list and then click the + icon in the bottom left corner.

Once our column has been added, expand the Data Source section. Rename the grid column to UMDescriptionGridCol. Set the Binding Type to Property. For the Binding field, select the ums_Description property.

Click Ok and Save.

Switch back to the Runtime Mode tab and reopen the Items form. Press F4 to query the data, and now you should see the table join working.

Property class extensions

Property class extensions are types of global objects that override attributes of an IDO property class. These only apply to components where the bound property has been assigned a property class. These classes can store general attributes such as captions, tool tips, list sources, right-click menus, validators and more.

In this next part, we are going to create a property class extension that will contain a right-click menu so users can drill into the data.

Navigate back to the Items form in the Web Designer. Select the UMCombobox component.

In the Properties panel, under Inheritance, click on the View Attributes Inherited From Property ellipsis. Notice that our UM property is inheriting the UM property class that was applied at the IDO level. Let’s extend this property class by creating a property class extension.

Close the IDO Properties modal, and on the Edit Property Class Extension field click the ellipsis.

When prompted if we want to create the property class extension, click Yes.

In the Property Class Extension modal, expand the Behavior section. Set the Add/Details Form and Find Form fields to our UMs IDO. Set the Property field to UM.

Then set the Right-Click Menu to StdDetailsAddFind.

Click Ok to close the Property Class Extenstion modal, and Save your form.

If you reopen the Items form in Runtime mode and we right-click on our Unit of Measure field we should see our custom right-click menu, however we don’t. Why is this. Because our right-click menu is here on the property class extension level it’s possible that it’s being overwritten either on the component class level or on the component level since we haven’t created a component class it’s a safe bet that it’s being overridden here on the component level so let’s check that out. 

On the Web Designer, Reopen the Items form. On the UM fields Properties panel under the Behavior section, clear out the Right-Click Menu field. This will remove the menu that is set at the component level.

Click Save.

Let’s test out the property class we just created. Switch back to the runtime mode tab and reopen the Items form.

Press F4 to query the data, and right-click on the UM field. Now you can see we have a menu that allows the user to drill into the UMs form, filtered to that individual record.  

Additional property classes

Let’s review the classes we have made so far and create a few more that we will use when we build our Orders facility.

While in Runtime mode, open the IDO Property Classes form.

To find all the property classes that we created, type your username into the Locked By field and press F4.

Another way to group your property classes together is to prefix them with a project prefix.

Using the New icon from the toolbar, add the three property classes listed below:

CustomerID Property Class:

Item Property Class:

OrderNumBase Property Class:

Click Save and close the form

Unload Global Form Objects in both Runtime mode and Designer

Unload Global Form Objects in both Runtime mode. Form->Definition->Unload Global Form Objects.

Build the Orders facility

In this next part, we will build out the Orders facility which will be the final piece in our application. We will use this to link together all of pieces we have created so far, and this will be the main facility that is accessed in our customer portal.

Switch back to the Web Designer and select New Form Definition icon from the toolbar.

In the Form Wizard Selection modal, for the Category select NewData and for the Wizard select Maintenance.

Click Ok.

Once the New Data Maintenance Wizard (NDMW) opens, set the following:

• Table Name: Orders
• Project: HelloWorld
• Table Alias: ords

Using the Add Row button at the bottom, add the following properties:

Name	Property Class	Data Type	SQL Data Type	Property Length	Primary Key	Required	Label String ID	Default Value
OrderNumber	OrderNumBase	Long Integer*	Int*		Y	Y	sOrderNumber*
CustomerID	CustomerID	String*	Nvarchar*	50*		Y	sID*
Item	Item	String*	Nvarchar*	20*		Y	sItem*
Count		Long Integer	Int				sCount	1

Click Next and then click Finish.

When prompted if we want to create a form, click Yes.

Once the New Form Wizard launches, Click Next and step through the wizard keeping all the defaults.

Use the buttons on the right to rearrange the properties on the form.

Click Next.

Click Finish to create the form.

Switch back to the runtime mode tab and open the Orders form. This form will automatically default to Add mode when opened. Notice that the Order Number field defaults to 1, this is because we set the default value on the OrderNumBase property class to the keyword AUTONUMBER().

AUTONUMBER is one of many substitution keywords provided by Mongoose. At runtime, Mongoose will substitute this keyword with the next order number from the table, as well as any other data that has not yet been saved to the database. This number will increment by 1 every time a record is added.

You will also notice that our ID and Item fields are drop lists and if you click on the Item or ID drop down you will see that they populate with their corresponding list sources. This is because we supplied domain information on their associated property classes.

Using the New icon from the toolbar, add a couple of records of data that we will use later on in our application.

Click Save.

Summary:

We introduced how to add a column and property to an existing table, previously we use the new data maintenance wizard to create these but doing it manually allows us to make changes to existing tables and IDOs. We use the sql tables core form to add our new picture column and then the IDO properties core form to add the picture property to our item’s IDO. We worked with our new binary picture property to import an image for each of our items, we created an event that utilized the standard binary value action import event. We also created our HelloWorld theme and applied it from the user preferences window. We created our first theme class that styled our import button, we used the IDO collections core form to create a table join which allowed us to create a join property from the Unit of Measure table to the items table. We created our first property class extension which are types of global objects that can override IDO property classes, this allowed us to create a right-click menu so the user can drill down to the unit a measure form. Lastly we created some property classes that were used when we created our orders facility with the use of property classes, this made creating our orders facility fast and consistent by inheriting the data attributes straight from the property classes.

Here is the Part 4 video showing the detailed steps to complete the previous tasks.

Part 5

We are going to extend our application further by building onto our existing items table. We will get started on working with themes and theme classes and we’ll create our orders facility that will allow users to place orders in our store portal.

We will extend the orders table further by joining it with tables and adding property class extensions to support drill downs. We will create a drive field for a calculation and we’ll expand on the inheritance model by building out component classes and validators that can be reused throughout our application. 

Join tables to Orders

Now that we have all of our tables built out, we can now add in some table joins that will link together the related tables.

Launch Mongoose and select Form > Open.

In the Filter field, type: IDOs, and select the IdoCollections form.

Click Ok.

For the IDO Name field, type: Orders and then press F4 to query the data.

With our Orders IDO selected, click on the Table Button

Then click the New Table button.

Select the Customer table, and for the Table Alias type: cus.

We want to join the the ID from the Customer table, to the CustomerID on the Orders table. In the Join Conditions section, create the following join statement:

            ID = Orders(ords).CustomerID

Click Add then Ok

Click the New Table button again. This time lets create a join to the Items table.

Set the Table Name to Items and for the Table Alias field, type: itms. In the Join Conditions section, create the following join statement:

            Item = Orders(ords).Item

Click Add, then Ok.

Binding joined properties

Now that we have our tables properly joined, we can bind properties from those tables onto our Orders table.

On the IDO Collections form still open, click the Tables button.

Select the Customer table row and then click the Bind Properties button.

Deselect all of the properties, except for Name and Address, then click the Massage Property Names button.

When the Massage Property Names modal opens, for the Property Prefix field, type: Cus This will prefix the two properties we are adding, Name and Address, with Cus

Click Ok. Notice now in the Property Names column, that our selected properties are now prefixed with Cus. Click Finish to create the properties on the Orders IDO.

Close the IDO Properties form that automatically opens after the properties are created, and let’s bind some properties from our Items table.

On the IDO Tables form, select the Items table name row. Then click the Bind Properties button.

Deselect all of the properties except for Cost, Description, and Picture.

Click the Massage Property Names button, and in the Property Prefix field, type: Itms

Click Ok.

Click Finish.

Upon completion, this will launch the IDO Properties form. Here we can manually add attributes to our new properties.

Add the following attributes to the following properties:

Here is an example of the Label String ID field.

• CusAddress: For the Label String ID field, type: sAddress.
• ItmsCost: For the Property Class field, select our Cost property class.
• ItmsDescription: For the Label String ID field, type: sItemDescription.
• CusName: For the Label String ID field, type: sCustomerName.
• ItmsPicture: For the Property Class field, select our Picture property class.
• CustomerID: Replace the Label String ID field with: sCustomerID.

Click Save and close the IDO Properties form. Close the IDO Tables form as well.

Derived properties

So far, all of the IDO Properties we’ve used have been bound to columns on tables, but properties can also be calculations, input to server-side update logic, or relationships to other IDOs. In this next part, we will create a derived property on the Order IDO that will perform a calculation to retrieve the order total amount.

With the IDO Collections form still open, let’s add a derived property to our Orders IDO. Click the New Property button. Select Derived and click Next.

For the Property Name field, type: DerOrderTotal.

For the Property Class field, select our Cost property class.

In the Expression text box, type in the following statement: Count * ItmsCost

Uncheck the Inherit from Property Class options.

These expressions are evaluated as a SQL SELECT statement. Property names in these expressions are case-sensitive.

Click Finish.

Let’s add a label string id to our newly created property.

On the IDO Collections form, click the Properties button.

Navigate to the DerOrderTotal property, and notice that it is inheriting the Label String ID from the Cost property class. To override that inheritance, change the Label String ID to sOrderTotal.

Select the Read Only option at the bottom of the Formatting section (all derived fields are inherently read only).

Click Save and Close the IDO Properties form and IDOs form.

Unload Global Form Objects in both Runtime mode. Form->Definition->Unload Global Form Objects.

Creating more property class extensions

Next let’s create property class extensions for the Item and CustomerID property classes to enable them to have drill downs. This is the same process we went through in Part 4 so this should look familiar.

Launch the Web Designer, and open the Orders form Form -> Orders.

Select the ItemCombobox (Item) component.

From the Properties panel, expand the Inheritance section. On the Edit Property Class Extension field, click the ellipsis.

When prompted if we want to create the property class extension, click Yes.

After the Property Class Extension modal opens, expand the Behavior section, and then expand the Add/Details and Find Form section. Set the Add/Details and Find Form fields to Items. Set the Property field to Item.

Scroll down and set the Right-Click Menu field to StdDetailsAddFind, click Ok.

Next, let’s repeat this process for the CustomerID field. Select the CustomerIDCombobox component.

In the Properties panel, expand the Inheritance section. In the Edit Property Class Extension field, click the ellipsis.

When prompted if we want to create the property class extension, click Yes.

After the Property Class Extension modal opens, expand the Behavior section, and then expand the Add/Details and Find Form section. Set the Add/Details and Find Form fields to Customer. Set the Property field to ID.

Scroll down and set the Right-Click Menu field to StdDetailsAddFind.

Click Ok.

Click Save. and close the form.

Recreating the Orders form

Now that we have added more properties to the Orders IDO, we need to add these new properties to our Orders form. Rather than adding each property manually, we can use the New Form Wizard to replace our existing Order form with our new properties.

With the Web Designer still open, click the New Form Definition icon.

In the Form Wizard Selection modal:

• Category: Classic
• Wizard: Multiview

Click Ok. Once the New Form Wizard launches, for the Name field, select our existing Orders form name. Keep the default Data Source of Orders and click Next.

When prompted if we want to replace the Orders form, click Ok.

Add the following properties below and then click Next.

• OrderNumber
• CustomerID
• CusName
• CusAddress
• Item
• ItmsDescription
• ItmsCost
• ItmsPicture
• Count
• DerOrderTotal

Using the arrow buttons on the right, reorder the properties so that they appear in the order below:

• OrderNumber
• CustomerID
• CusName
• CusAddress
• Item
• ItmsDescription
• ItmsCost
• Count
• DerOrderTotal
• ItmsPicture

Click Next, and then click Finish. Say Ok to replace the form.

Remember by default, Mongoose sets a Right-Click menu definition at the component level. Let’s remove it so it doesn’t override the menu set at the Property Class extension level.

In Design Mode, open your updated Orders form, select your Customer ID combo box.

In the Properties panel, expand the Behavior section and remove the Right-Click Menu of StdDefault.

Do the same for the Item combo box.

In the Properties panel, expand the Behavior section and remove the Right-Click Menu of StdDefault.

Click Save.

Testing the property class extensions

When a property class extension is created, it is always attached to its associated property class. That means that because we have our property classes assigned on the IDO properties, they will automatically be inherited on our new Orders form.

Switch to the Runtime Mode tab, and press F4 to query the demo data we entered earlier.

Right-click on the Customer ID and Item fields, and you will see that the right-click menus defined on our property class extensions are still working.

Verify that our DerOrderTotal calculation is working properly. Change the Item or the Count field and save the record. Upon save, you will see the Order Total field will update accordingly.

Example After Save.

Displaying binary images

Rather than displaying the binary value of our Picture property, we want to only display the image itself.

Switch back to the Orders form in the Web Designer. Select the ItmsPictureStatic component and delete it by pressing the Delete key.

Select the ItmsPictureEdit component.

In the Properties panel, change the Type to Static.

Clear out the Caption field, under the Miscellaneous -> Specific Attributes section set No Colon to True.

Move the ItmsPictureEdit to the right and click and drag the corners out to increase the size.

Regenerate Form. Some form changes require you to save, close, and reopen the form to see those changes. You can use the Regenerate Form button on the toolbar to do that.

Switch back to the Runtime Mode tab and reopen the Orders form, and press the Refresh button or F4 to query the data. Our Picture property now displays the Item’s image. Select a different record on the Orders form, and you will see that the picture will update each time you switch records.

Validators

Validators are another type of global object that can be used in multiple ways. They can be set up to validate a value as well as return output values to the form for functions, like displaying associated descriptions or setting down-stream component defaults. These can be run immediately on data change or can be run upon form save. In this next part, we will create a validator that will populate the customer Name and Address fields immediately after selection of a customer.

Switch back to the Web Designer and select the Edit > Validator menu item. Once the Validators modal opens, click the + button in the bottom left corner to add a new validator. For the Name, type: CustomerID and click Ok.

Set the Type to In Collection, and in the Parameters field, click the ellipsis.

When the Edit In Collection Validator Parameters modal opens, set the IDO field to Customer and in the Collection Only sections. Use the ellipses to set the Property value to ID.

Then click the Set Prop/Var/Comp ellipsis.

On the Edit Set Values modal, click the Properties ellipsis to specify what properties we want to set.

On the Edit Set Property Values modal, click the New button.

For the Target field, type: %1. Set the Value field to Name from the drop list and keep the Collection for Target set to primary collection. Click Ok.

On the Edit Set Property Values modal, click the New button to add another property.

For the Target field, type: %2. Set the Value field to Address from the drop list and keep the Collection for Target set to primary collection.

Click Ok until you get back to the Global Objects window. For the Error Message field, select the standard error message mIsNotAValid.

Click Ok and Save.

Component classes

Component classes are another type of global object that lets you bundle together sets of component attributes that can be reused throughout an application.

Based on the inheritance model, component classes will override any attributes set at the property class or property class extension levels.

With the Web Designer still open, select the Edit > Component Class menu item.

Click the + button (New) in the bottom left corner.

Give it a Name of: CustomerID and click Ok.

Within the Global Objects modal, in the Properties panel, expand the Data Source section. Expand the Validation section and click the Validators ellipsis.

On the Validators modal, click the + button to add a validator to our component class. On the New modal, select our CustomerID validator and click Ok.

On the Validator modal, click on the CustomerID validator.  Then click on the Parameters icon on the bottom.

Once the Parameters modal opens, type: %1,%2 into the first field and then click Ok.

Click Ok to close the Validators modal. On the Global Objects window, under the Data Source section, set the Validate Immediately field to True.

Click the List Source ellipsis.

On the Edit List Source Specifications modal, set the Type field to IDO Collection from the drop down list.

For the IDO field, select Customer and then click the Properties ellipsis.

On the Edit Property Specifications modal, use the Add button to add the ID, Name, and Address properties. Then click Ok.

Click the Columns to Display ellipsis and hold Shift to select ID and Name.

Click Ok.

Click Ok until you return back to the home screen.

Click Save.

Unload Global Form Objects in both Runtime Mode and Design Mode. Form->Definition->Unload Global Form Objects.

Open the Orders form and select the CustomerID Combobox component.

In the Properties panel, expand the Inheritance section, and set the Component Class field to CustomerID.

Next, we need to pass in parameters for the validator with the properties we want to populate on our form.

In the Component Class Parameters field type in the name CusName, CusAddress. Which will receive our Customer Name and Customer Address properties.

There is also a grid column component bound to the CustomerID property, let’s apply our reusable component class there as well.

Select the FormCollectionGrid component and click the Edit Grid Column(s) button in the top left corner.

From the Contained Components modal, select the CustomerIDGridCol.

Expand the Inheritance section and set the Component Class field to CustomerID. In the Component Class Parameters field, type: CusName, CusAddress.

Click Ok and Save your form.

Switch back to the Runtime Mode tab and reopen the Orders form. Test out our component class and validator by selecting a different Customer ID. After selection, the Customer Name and Address fields will now update immediately.

Now when you select a different customer, the customer name and address will immediately output thanks to our validator.

We can also test this in our grid. Click on the grid splitter and drag it to expand.

You will notice once we change the ID that both the Customer Name and Address will update there as well.

Create an Item component class and validator

In this next part, we will create another component class and validator that will be used on our Items field. This will be used to populate the item description and cost immediately after selection.

Switch back to the Web Designer and click on the Edit > Validator menu item. On the Global Objects window, click the + button at the bottom. Set the Name field to Item and click Ok.

Select the validator, and in the Properties panel on the right, set the Type field to In Collection.

Click the Parameters field ellipsis.

Set the IDO field to Items. Set the Property field to Item.

Click on the Set Prop/Var/Comp ellipsis.

On the Edit Set Values modal, click the Properties ellipsis to specify what properties we want to set.

On the Edit Set Property Values modal, click the New button.

For the Target field, type: %1. Set the Value field to Description from the drop list and keep the Collection for Target set to primary collection. Click Ok.

On the Edit Set Property Values modal, click the New button to add another property.

For the Target field, type: %2. Set the Value field to Cost from the drop list and keep the Collection for Target set to primary collection.

Click Ok until you get back to the Global Objects window. For the Error Message field, select the standard error message mIsNotAValid.

In the Properties panel, set the Error Message field to mIsNotAValid and click Ok.

Next let’s create a component class that will use this validator and be reusable.

Click on the Edit > Component Class menu item. On the Global Objects modal, click the + button on the bottom left. Set the Name field to Item, and then click Ok.

From the Global Objects modal, in the Properties panel, expand the Data Source section and then expand the Validation section. Click the Validators ellipsis.

On the Validators modal, Click the + button and for the Name field, select the Item validator.

Select the Item validator on the left, and then click the Parameters button at the bottom.

In the Parameters modal, type: %1,%2 in the first field and then click Ok.

Click Ok until you get back to the Global Objects modal. In the Properties panel, under the Data Source section, set the Validate Immediately field to True.

Click the List Source ellipsis.

On the Edit List Source Specifications modal, from the drop down set the Type field to IDO Collection. For the IDO field, select Items and then click the Properties ellipsis.

On the Edit Property Specifications modal, use the Add button to add the Item, Description and Cost properties. Then click Ok.

Click the Columns to Display ellipsis and hold Shift to select Item and Description and click Ok.

Click Ok

Click Ok again to close the Global Objects modal.

From the Form, select the Item Combobox component.

In the Properties panel, under the Inheritance section, set the Component Class field to Item.

In the Component Class Parameters field, type: ItmsDescription, ItmsCost.

Click the FormCollectionGrid component, and then click the Edit Grid Column(s) button in the top left corner.

In the Contained Components modal, select the ItemGridCol component. In the Properties panel, under Inheritance, set the Component Class field to Item.

In the Component Class Parameters field, type: ItmsDescription, ItmsCost.

Click Ok and Save.

Unload Global Form Objects in both Runtime mode and Design Mode. Form->Definition->Unload Global Form Objects.

Switch to back to the Runtime Mode tab and reopen the Orders form. Change the item on the form or in the grid to see the component class now populating the item Description and Cost immediately.

Select an item from the list and notice that the Item Description and Cost will immediately update.

Test Grid column. Change the item and you’ll notice that the Item Description and Cost change here as well.

Summary:

We expanded on our orders facility by joining it with our items and customers tables, this allowed us to create join properties from those tables onto the orders IDO. We also created our first derived property which is an unbound sql expression used to perform calculations, sub queries or calls to sql functions, we use this to calculate our total order cost. We created right-click menus for drilling into the customers and items forms using property class extensions, these extensions will inherit anywhere that property class is being used. We introduce validators and how they can be used to not only validate the values of a component but to also set the customer name and address immediately upon data change and we followed that up by introducing component  classes another type of global object that lets us bundle together sets of attributes this allowed us to package up our validator along with a list source into a reusable component class.

Here is the Part 5 video showing the detailed steps to complete the previous tasks.

Part 6

We will learn how to create a chart and we’ll touch on creating a form script and attaching it to an event we will also start laying the groundwork for our store portal by importing images and expanding on our theme.

Form scripting

Form scripts are form specific and cannot be accessed by other forms. They are stored as part of the form definition as metadata in the forms database. While Mongoose considers it a best practice to limit the amount of code used, scripts can still be attached to a form or accessed from a global script when necessary. Previously, the Order Total did not calculate until the record was saved. This is because it is a derived field that doesn’t compute until save. In this next part, we are going to insert a form script that will calculate the order total immediately when the item or item count changes.

Launch Mongoose and use the toolbar icon to open the Web Designer.

Open the Orders form, and in the Properties panel, select the Form tab at the bottom of the panel.

Under the Bahavior section, there is a Script Language field where you can specify what language you want to use in the form script. The default language is Visual Basic, the other available option is Visual C#. We will leave it set to Visual Basic.

Click the pencil icon in the top left corner of the Properties panel, and then select the Edit Form Script option. This will open up the built-in script editor.

Highlight the “Methods go here” section.

Copy and paste in the script below, Making sure the formatting is correct in the script editor.

Public Sub CalcOrderTotal(OrderCount As String, ItemCost As String)
         Dim OrderTotal As Decimal
         OrderTotal = CDec(OrderCount) * CDec(ItemCost)

        ThisForm.PrimaryIDOCollection.SetCurrentObjectPropertyPlusModifyRefresh(“DerOrderTotal”,OrderTotal.ToString())

 End Sub

Click Ok to return to the home screen.

Click Save.

Attaching scripts to events

We want to create an event that will trigger that form script whenever the item is changed or the count is changed. 

Expand the Details pane on the bottom of the forms page.

Select the Event Handlers tab and select the New button at the bottom to add an event.

Set the event Name to CalcOrderTotal and click Ok.

Expand the Response section and using the drop down set the Type to Form Script Method, and then click the Parameters ellipsis.

On the Event Handler Parameters modal, for the Name field, select CalcOrderTotal.

For the Parameters field type: P(Count), P(ItmsCost) and then click Ok.

You can see here that we are using the P() substitution keyword. At runtime, this will pass in the property values of Count and Cost to our form script.

Select the Item Combobox component.

In the Properties panel, expand the Events section. From the drop down set the Data Change field to CalcOrderTotal.

Select the Count Edit component.

From the drop down set the Data Change field to CalcOrderTotal.

Click Save and close the form.

Switch back to the Runtime Mode tab and reopen the Orders form. Press F4 to query the data and test out our event by changing the item or the count of a record. You will see once either one of those is changed, the Order Total field will immediately update.

Let’s apply the same event to the grid column as well.

Select the FormCollectionGrid component and click the Edit Grid Column(s) button in the top left corner.

From the Contained Components modal, select the ItemGridCol.

In the Properties panel, expand the Events section. From the drop down set the Data Change field to CalcOrderTotal.

Perform the Data Change on the CountGridCol as well.

Click Ok and Save your form.

Switch back to the runtime mode tab and reopen the Orders form. Press F4 to query the data and test out our event by changing the item or the count of a record from the grid column. You will see once either one of those is changed, the Order Total field will immediately update.

Working with charts

In this section we will learn more about designing and developing the user interface. Mongoose has many components that allow us to build graphic-oriented UI’s.

There are many different types of components you can use when building your forms. In this next part, we will build a chart component to display key sales data.

Switch back to the Web Designer and click the New Form Definition icon from the toolbar.

On the Form Wizard Selection modal, for the Category select Classic and for the Wizard select GridOnly.

On the New Form Wizard set the Name field to OrdersChart and set the Data Source field to Orders.

Click Next and step through the wizard accepting the defaults, and then click Finish.

Once the form opens in the Web Designer, select the FormCollectionGrid component and shrink it by clicking and dragging the corner in.

Move the grid towards the bottom of the form.

In the Properties panel, click the Form tab at the bottom. Expand the Behavior section and set the Initial Command property to Refresh.

From the Toolbox panel on the left, select the Chart component and draw it on the form.

With the chart component still selected, in the Properties panel, expand the Data Source section. For the Binding Type field select Chart from the drop down, then click the Binding ellipsis.

Once the Specify Chart Settings modal opens, under the Chart Data section, use the Add button to add the DerOrderTotal property.

Under the Property for X-Axis Labels section, select OrderNumber and then click Ok.

Next, we want to hide our grid so that only our chart is displaying on the form. Select the FormCollectionGrid component, and in the Properties panel, expand the Behavior section. Set the Hidden field to True.

Click Save.

Switch back to the Runtime Mode tab and open the OrdersChart form to see our chart in action.

Importing images

Before we get started building out our portal, Import all of the images that we will need when we build out our Customer Portal. Mongoose has a built-in image library where you can store images for your application. These are stored in the forms database, and this makes it possible to transport the image file with the form. This eliminates the need to call the image from an external location.

Download and the extract the Customer Portal Images.zip file located in the Download section at the bottom of this Tutorial.

Switch back the Web Designer and click on the Edit -> Images menu item.

On the Images modal, click the New button.

Select or drag an image that was downloaded. Click the Upload button to import the image. Repeat this process for all Four of the images.

Here are a list of Images from the zip file.

• Customericon.png
• CustomerSignin.png
• ShoppingCart.png
• AddToCart.png

Once you are done, click Ok.

Click Save.

Creating theme classes

In this next part, we will create some theme classes that we can use when we build our Customer Portal.

While in the Web Designer, select the Edit -> Theme menu item.

On the Global Objects modal, select the HelloWorld theme and then select the Edit… button in the top right to open the theme editor.

To start, let’s apply a font at the form level so that all the components on all of the forms will inherit that font.

On the Edit Styles modal, expand the Form section from the Elements tree on the left.

Select the FormComponent element and from the drop down set the Family field to Tahoma.

Click Ok.

Repeat the process, and create the following theme classes:

Element	Class Name	Background	Size	Bold	Foreground
FlexLayout	BlueBackground	#FF5CC6C7
Static	WhiteHeader		16	True	#FFFFFFFF
Static	Header		16	True

Select the FlexLayout component, give it a class name at the bottom of BlueBackground and then hit Add. Once you hit Add the tree will refresh so you’ll have to go back into the component and select it.

Reselect BlueBackground and set the background color to #FF5CC6C7 or select the ellipsis to pick color from the style editor.

Create a Static class. Click on the Static component, give it a class name at the bottom of WhiteHeader and then hit Add. Once you hit Add the tree will refresh so you’ll have to go back into the component and select it.

 Reselect WhiteHeader and set the font Size to 16 and set Bold equal to True.

Select Normal State from the categories and set the foreground color, Type in #FFFFFFFF or click the ellipsis hit solid and let’s accept a default of white.

Click Ok.

Create a another Static class, Click on the Static component give it a class name at the bottom of Header and then hit Add. Once you hit Add the tree will refresh so you’ll have to go back into the component and select it.

Reselect Header and set the font Size to 16 and set Bold equal to True.

Once you are done adding your theme classes, click Ok until you return to the home screen.

Click Save.

Summary:

We introduced form scripts in mongoose, we were able to create a script that performed a calculation and then updated the property. We then attached that script to a custom event and triggered it on the data change event we started working with a chart component and used this to display key data in our orders table, then we got you familiar with the mongoose image library and how it can be used to import images to the forms database this makes it possible to transport image files with the form and eliminates the need to call the image from an external location. Lastly we built out some theme classes that will be used when we build out our customer portal.

Here is the Part 6 video showing the detailed steps to complete the previous tasks.

Part 7

We will start building out our customer portal form introducing you to Flex forms and Flex layout components which are necessary to create responsive forms.

Build the customer portal layout

This portal will consist of three different screens. We are going to build out our customer portal where customers can sign in, add items to their cart, and checkout. This is what it will look like:

Customer sign-in page where they can sign in with their Customer ID.

Home page where they can add items to their cart by dragging and dropping.

A cart view, where they can view all of the items they added to their cart.

Launch Mongoose, and open the Web Designer by clicking the icon on the toobar.

Click the New Form Definition icon from the toolbar.

On the Form Wizard Selection modal for the Category field select Flex, and for the Wizard field select Basic. Click Ok.

On the New Form Wizard set the Name field to CustomerPortal and set the Unit field to Char. Click Next and then click Finish.

Once the form opens in the Web Designer, expand the Details pane at the bottom.

Select the Collections tab and click on the Primary Collection: entry. Under the General section on the right, set the Collection field to Orders.

Click the + icon in the bottom left of the Collections tab to add a secondary collection.

Click on the Secondary Collection 2: [New] entry that was just added, and under the General section on the right, set the Collection field to Items.

You will get these warning messages to regen form.

Click Ok.

Click the Regenerate Form Icon.

Next, we will utilize FlexLayout components to layout our form. Select the FlexLayout component that was automatically added to the form (flexlayoutPane_CustomerPortal). Click the Edit FlexLayout Attributes button located in the top left corner of the component.

On the FlexLayout modal, change the Type field to VerticalBox.

Then select each region, and add the following attributes:

ID	Length	Unit	Orientation
Header	4	FormUnit	Fill
Main	1	Flex	Fill
Footer	2	FormUnit	Fill

Header Region Properties:

Main Region Properties:

Footer Region Properties:

Once done adding the attributes, Click Ok.

From the Toolbox panel, select the FlexLayout component and then click into the Header region of flexlayoutPane_CustomerPortal to place it within that region.

With our new FlexLayout component still selected, navigate to the Properties panel and change the Name field to flexLayoutHeader.

Expand the Appearance section and from the drop down set the Theme Class field to BlueBackground.

Click the flexLayoutHeader component and select the Edit FlexLayout Attributes icon in the top left corner.

When the FlexLayout modal opens, click the + icon in the bottom left corner to add another region.

Set the following attributes on each region:

ID	Length	Unit	Orientation	Alignment	Pack	Default Margin
Header	1	Flex	Horizontal	Middle	Start
User	1	Flex	Horizontal	Middle	End	1,0,0,0

Header Region Properties:

User Region Properties:

Click Ok.

From the Toolbox panel, select the Static component and click it into the Header region of flexLayoutHeader.

Using the Properties panel, set the following attributes:

Name	Caption	Theme Class	Justification	Size	No Colon
staticHeader	sCustomerPortal	WhiteHeader	Left	40,1.5	True

Click the Regenerate Form Icon.

You will now see these changes:

Let’s add some spacing to the left of the static component we just added.

Click on the staticHeader component and select the Edit FlexLayout Attributes icon in the top left corner.

Applying the margin here, will only apply it to that single component. If a margin is applied on the FlexLayout itself, it will apply it to all of the components within that region.

Set the Margin field to 2,0,0,0 (Left, Top, Right, Bottom) and click Ok.

From the Toolbox panel, select the Static component and place two of them into the User region of flexLayoutHeader.

Set the following attributes on each of those static components:

Name	Theme Class	Bitmap File Name	Justification	Binding Type	Binding	Size	No Colon
staticCustIcon		CustomerIcon.png	Right			4,1.5	True
staticCustID	WhiteHeader		Left	variable	CustomerID	10, 1.5	True

staticCustIcon Properties:

staticCustID Properties:

Click Binding ellipsis and enter CustomerID in the Variable field.

Click Ok.

Click the Regenerate Form Icon.

You will now see these changes:

We will now build the Footer. From the Toolbox panel, select the FlexLayout component and drop it into the Footer region of the flexlayoutPane_CustomerPortal component.

With our new FlexLayout component selected, in the Properties panel, change the Name field to flexLayoutFooter. For the Theme Class field, select BlueBackground.

Click the Regenerate Form Icon.

You will now see these changes:

From the Toolbox panel, select the FlexLayout component and drop it into the Main region of the flexlayoutPane_CustomerPortal component.

With our new FlexLayout component selected, in the Properties panel, change the Name field to flexLayoutMain.

Click the Edit FlexLayout Attributes icon

Using the + icon, add five more regions to flexLayoutMain.

Set the following attributes on those regions:

ID	Length	Unit	Orientation	Alignment	Pack	Margin	Maximum Length
Menu	20	FormUnit	Vertical	Center	Start	0,1,0,1
Spacer1	1	Flex
SignInPage	5	Flex	Vertical	Center	Start
HomePage	5	Flex	Fill				50
CartPage	5	Flex	Vertical	Stretch	Start	0,1,0,1	65
Spacer2	1	Flex

Menu Region Properties:

Spacer1 Region Properties:

SignInPage Region Properties:

HomePage Region Properties:

Menu Region Properties:

Spacer2 Region Properties:

Click Ok.

Let’s create our menu on the left. From the Toolbox panel, select the Button component and add three of them into the Menu region of flexLayoutMain.

Once the three buttons have been added, set the following attributes on each:

Name	Caption	Theme Class	Size
buttonSignIn	sSignIn	BlueButton	15,2
buttonHome	sHome	BlueButton	15,2
buttonCart	sCart	BlueButton	15,2

buttonSignIn Properties:

When you click the Caption attribute ellipsis, you will see this screen. Click Ok.

buttonHome Properties:

buttonCart Properties:

Click the Regenerate Form Icon.

You will now see these changes:

This is what the Customer Portal form should look like so far:

Create the customer sign-in page

In this next part, we will build out the customer sign-in page where they can sign in with their Customer ID.

From the Toolbox panel, add the following components into the SignInPage region of flexLayoutMain. In this order, drop three Static components, one Edit component, and one Button component. Set the following attributes on each of those components:

Name	Caption	Theme Class	Bitmap File Name	Justification	Binding Type	Size	No Colon
staticSignIn	sSignIn	Header		Center		20,1.5	True
staticImage1			CustomerSignIn.png			21,8	True
staticCustID2	sCustomerID			Center		20,1.5	True
editCustID				Center	variables.CustomerID	20,1.5
buttonSignIn2	sSignIn	BlueButton				20,1.5

staticSignIn Properties:

staticImage1 Properties:

staticCustID2 Properties:

editCustID Properties:

For the Binding attribute, click the ellipsis and in the Variable field type CustomerID. Click Ok.

buttonSignIn2 Properties:

For the Caption field, click the ellipsis to add the caption. Click Ok.

Click the Regenerate Form Icon.

Set the Margins on the page.

Select the Static SignIn Component and Click the Edit FlexLayout Attribute button.

Set Margin to 0,1,0,1

Click Ok.

Select the Static Image1 Component and Click the Edit FlexLayout Attribute button.

Set Margin to 0,1,0,1

Click Ok.

Select the Button SignIn2 Component and Click the Edit FlexLayout Attribute button.

Set Margin to 0,1,0,1

Click Ok.

Click the Regenerate Form Icon.

This is what our SignInPage region of flexLayoutMain should look like so far:

Create the home page

In this next part, we will build out the home page region where users can view and add items to their cart.

From the Toolbox panel, select the FlexLayout component and drop it into the HomePage region of flexLayoutMain.

With the new FlexLayout component still selected, in the Properties panel, set the Name field to flexLayoutHome. Notice that because the region it is sitting in is set to fill, it fills up the entire region.

With flexLayoutHome still selected, click the Edit FlexLayout Attributes icon.

On the FlexLayout modal, change the Type field at the top to VerticalBox.

Click the + icon in the bottom left corner to add four additional regions.

Add the following attributes to those regions:

ID	Length	Unit	Orientation	Alignment	Pack
Header	4	FormUnit	Horizontal	Middle	Center
Spacer	1	FormUnit	Horizontal	Top	Start
Grid	2	Flex	Fill
Spacer2	1	FormUnit	Horizontal	Top	Start
Buttons	1	Flex	Fill

Header Region Properties:

Spacer Region Properties:

Grid Region Properties:

Spacer2 Region Properties:

Buttons Region Properties:

Once finished, click Ok.

From the Toolbox panel, select the FlexLayout component and drop it into the Buttons region of flexLayoutHome.

With the new FlexLayout component still selected, in the Properties panel, set the Name field to flexLayoutButtons.

Then click the Edit FlexLayout Attributes icon.

On the FlexLayout modal click the + icon in the bottom left corner to add two more regions.

Set the following attributes on those regions:

ID	Length	Unit	Orientation	Alignment	Pack
Count	1	Flex	Horizontal	Top	End
Spacer	1	FormUnit	Horizontal	Top	Start
Cart	1	Flex	Horizontal	Top	Start

Count Region Properties:

Spacer Region Properties:

Cart Region Properties:

Click Ok.

The form should look like this.

From the Toolbox panel, select the Static component and drop it into the Header region of flexLayoutHome.

With the component still selected, using the Properties panel, give it the following attributes:

Name	Caption	Theme Class	Justification	Size	No Colon
staticHome	sHome	Header	Center	20,1.5	True

From the Toolbox panel, select the Grid component and drop it into the Grid region of flexLayoutHome.

With the grid component still selected, on the Properties panel, set the Name field to gridItems. Under the Data Source section, set the Binding Type field to Secondary Collection and set the Binding field by clicking on the ellipsis and selecting Secondary Collection of Items (See screen print below) This will set the Binding attribute to objects2.

Selecting Secondary Collection.

Click the Regenerate Form Icon.

This is what our HomePage region of flexLayoutMain should look like so far:

Summary:

We introduced flex forms and flex layout components and got started building our consumer end user interface for the customer portal. 

Here is the Part 7 video showing the detailed steps to complete the previous tasks.

Part 8

We’ll continue building out our zero training customer portal, we’ll also get you introduced to tile forms and dynamic actions within Mongoose.

Create a Tile form

In this next part, we are going to pick up where we left off and continue on building out our Customer Portal. In the last part, we finished up by adding our grid Items component. Instead of using a standard grid for our grid Items component, I want to make this grid more visual by displaying a picture of the item alongside it. In order to do this, I want to utilize a tile form.

Tile forms are read-only forms that must be embedded within a container, such as a grid. The information displayed is a view of a single record of the IDO collection. This allows you to create much more visually appealing rows of data.

Launch Mongoose, and open the Web Designer by clicking the icon on the toolbar. Once the Web Designer opens, click the New Form Definition icon from the toolbar.

On the Form Wizard Selection modal, for the Category select Classic and for the Wizard select Tile.

Click Ok.

On the New Form Wizard, set the Name field to ItemsTile, and set the Data Source field to Items. Click Next.

Remove all of the selected properties except for the Picture property and click Next.

Click Next again and then click Finish.

After the form opens, on the Properties panel, select the Form tab at the bottom. Expand the Layout section and then expand the Size section, set the Width to 40 and the Height to 4.

Select the PictureStatic component and press the Delete key to delete it.

Select the PictureEdit component, and in the Properties panel, change the Type field to Static and set the Name field to staticPicture.

Under the Formatting section set Image and Text to ImageOnly.

And under the Miscellaneous section set No Colon to True.

Resize the component and shape it into a square then move it to the left of the tile form.

From the Toolbox panel, select the Static component and add three of them to the form. From the Properties panel, set the following attributes for each:

Name	staticPicture	staticItem	staticItemDesc	staticCost
Theme Class		Header
Justification		Left	Left	Right
Binding Type	Property	Property	Property	Property
Binding	object.Picture	object.Item	object.Description	object.Cost
Image and Text	ImageOnly
Size		27,1.5	20,1.5	8,1.5
No Colon	TRUE	TRUE	TRUE	TRUE

staticItem Component Properties:

Select Static component from the Toolbox and drop it in the top right section of the form.

Use the drop down on the Binding attribute to select object.Item.

Size and No Colon settings.

staticItemDesc Component Properties:

Select Static component from the Toolbox and draw it underneath the Item static.

Use the drop down on the Binding attribute to select object.Description.

Size and No Colon settings.

staticCost Component Properties:

Select Static component from the Toolbox and draw it to the right of the Item description.

Use the drop down on the Binding attribute to select object.Cost.

Size and No Colon settings.

Rearrange the components on the form so it looks something like this:

Click Save and close the form.

Unload Global Form Objects in both Runtime mode. Form->Definition->Unload Global Form Objects.

Let’s apply our ItemTile form to the grid on the CustomerPortal form.

Reopen the CustomerPortal form and select the gridItems component.

In the Properties panel, expand the Miscellaneous section and set the Tile Form field to ItemsTile and set the Tile When field to Always.

In order to see the items in our grid, we need to refresh the Items collection. Open the Form Details pane, and select the Event Handlers tab. Click the + icon in the bottom left corner to add a new Event.

Set the Name field to SignInBtn and click Ok.

Expand the Response section on the right and set the Type field to Collection Refresh. Click the ellipsis and set the Parameters field to object2.

After selecting the Parameters ellipsis, set the Collection field to secondary collection 2

Click Ok.

Click on the buttonSignIn2 component.

In the Properties panel, expand the Events section. Set the Primary event to SignInBtn. Adding the event here will force a refresh once the user logs in.

Click Save.

Switch back to the Runtime mode tab and reopen the CustomerPortal form. To test out our event, we first need to sign in. In the Customer ID field, type 1 and then click the sign in button. You should notice our logged in user is now displaying in the top right of the form, and the items grid is now displaying data using our tile form.

Next, let’s add our count field and cart button so users can add items to their cart. Switch back to the CustomerPortal form in the Web Designer.

From the Toolbox panel, select the Static component and drop it into the Count region of flexLayoutButtons.

Then select an Edit component and drop it into the same region.

From the Toolbox panel, select the Button component and drop it into the Cart region of flexLayoutButtons.

Using the Properties panel, set the following attributes for each of the three components we just added:

Name	staticCount	editCount	buttonAddToCart
Caption	sCount		sAddToCart
Theme Class			BlueButton
Bitmap File			ShoppingCart.png
Justification	Right	Left
Binding Type		Variable
Binding		variables.Count
Image and Text			HorizontalImageText
Size	20,1	7,1.5	20,1.5

staticCount Component Properties:

Click Ok on creating String value.

editCount Component Properties:

For the Binding Type, set it to variable and click the ellipsis for the Binding. Specify Count as the Variable name.

Click Ok.

buttonAddToCart Component Properties:

Click Ok.

For the BitMap File Name field, use the drop down to select ShoppingCart.png.

Click the Regenerate Form Icon.

This is how the HomePage region of flexLayoutMain should look so far:

Built the cart page

In this next part, we are going to build out the cart page where users can view their cart and save it to the Orders table.

From the Toolbox panel, drop a Static component, a Grid component, and a Button component into the CartPage region of flexLayoutMain. Give each component the following attributes. (View the build and properties of each component below):

Name	staticCount	editCount	buttonAddToCart
Caption	sCount		sAddToCart
Theme Class			BlueButton
Bitmap File			ShoppingCart.png
Justification	Right	Left
Binding Type		Variable
Binding		variables.Count
Image and Text
Size	20,1	7,1.5

starticCart Component Properties:

Click Ok.

gridOrders Component Properties:

buttonCheckOut Component Properties:

Click Ok.

Since the alignment of this region is set to Stretch we don’t want the button to stretch too wide across the screen, so we are going to set a margin on the component.

Select the buttonCheckOut component and click the Edit Flex Attributes icon.

Set the Margin field to 10,0,10,0

Click Ok.

Click the Regenerate Form Icon.

Next, we need to add some columns into gridOrders. Click on the gridOrders component and click the Edit grid column(s) icon in the top left corner.

Once the Contained Components modal opens, click the + icon on the bottom left to add two more columns.

Set the following attributes to the four columns:

Name	Binding Type	Binding
gridColOrdNum	Property	object.OrderNumber
gridColItem	Property	object.Item
gridColCount	Property	object.Count
gridColCustID	Property	object.CustomerID

gridColOrdNum Column Properties:

gridColItem Column Properties:

gridColCount Column Properties:

gridColCustID Column Properties:

Click Ok. With gridOrders still selected, in the Properties panel, expand the Behavior section. Set the Read-Only/Disable field to True.

Click the Regenerate Form Icon.

When finished, this is how the CartPage region of flexLayoutMain should look:

Create the dynamic navigation

In this next part, we are going to add functionality to our buttons that allow the user to click between pages. To achieve this, we are going to use the Enabled When attribute from the Properties panel. This editor will allow us to create a conditional expression that will evaluate automatically anytime the value in that expression changes. We are going to use a variable to achieve this.

First, we need to create our variable when the form opens. With our Orders form still open in the Web Designer, expand the Form Details pane at the bottom.

Click the Event Handlers tab and then click the + to add a new event. On the Event Handler modal, in the Name field select the standard Mongoose event StdFormPredisplay and click Ok.

Expand the Response section, set the Type field to Set Values. Click on the Parameters ellipsis to build the expression.

On the Event Handler Parameters modal, click the Variables ellipsis.

On the Edit Set Variable Values modal, click the New button.

On the Edit Set Variable Value Pair modal, set the Target field to Page (this is the name of the variable you want to create), and set the Value field to 1.

Click Ok.

Click Ok.

Click Ok.

The Parameters field should now read: SETVARVALUES(Page=1)

Next, we need to set some Visible When conditions on each of our pages. Select the flexLayoutMain component.

You can use the right-click menu Set Current Selection menu item to help you navigate within the FlexLayout components. This menu option presents a hierarchy view of the components based on the component that is currently selected.

With flexLayoutMain selected, click on the Edit Flex Attributes icon.

Add the following attributes:

ID	Visible When	Visible in Design Mode
Menu
Spacer1
SignInPage	#V(Page) = “1”	True
HomePage	#V(Page) = “2”	True
CartPage	#V(Page) = “3”	True
Spacer2

SignInPage Region Details:

Click the SignInPage region and in the Properties section scroll down to the Behavior section. Click the ellipsis on the VisibleWhen field.

On the Left Value field, select the Edit Value button.

Set the Value Type to Variable Value, then give it a value of page.

Click Ok.

Set the Operator value to =.

Click the Edit Value button for the Right Value.

Set the Value Type to be Literal and the Value to be 1.

Click Ok.

Click Ok.

Set Visible in Design Mode to True.

Select and Copy the Visible When statement.

Select the Home Page region and paste the statement into the Visible When attribute, change the value from 1 to 2. Set Visible in Design Mode to True.

Select the Cart Page region and paste the statement into the Visible When attribute, change the value from 1 to 3. Set Visible in Design Mode to True.

Click Ok.

Now we need to create events on our buttons that will set our Page variable value. Expand the Form Details pane, and select the Event Handlers tab. Using the + icon, create the following three events:

Name	Event Type	Parameters
SignInBtn2	Set Value	SETVARVALUES(Page=1)
HomeBtn	Set Value	SETVARVALUES(Page=2)
CartBtn	Set Value	SETVARVALUES(Page=3)

SignInBtn2 Event Details:

Set the Type to Set Values. Click the ellipsis on the Parameters field.

Click the ellipsis next to the Variables field.

Click New.

Set the Target to Page and the Value to one.

Click Ok. Until you return back to the home screen.

Expand the SignInBtn2 event and select the Event Handler we just created. Click the Copy button at the bottom.

Rename this event to HomeBtn.

Under the Parameters field, change the value of 1 to 2.

Click the Copy button again.

Rename this event to CartBtn.

Under the Parameters field change the Variable value from 2 to 3.

Collapse the Form Details pane.

Now that we have our events created let’s attach them to the buttons.

Click on the buttonSignIn component.

In the Properties panel, expand the Events section and set the Primary event field to SignInBtn2

Select the buttonHome component.

In the Properties panel, expand the Events section and set the Primary event field to HomeBtn.

Select the buttonCart component.

In the Properties panel, expand the Events section and set the Primary event field to CartBtn

Click Save.

We also want to set the page variable after a user logs in with their customer ID, so let’s set this on the Sign In button.

We will add an event handler to the SignInBtn event so that when the user signs in, it will change the page. On the CustomerPortal form in the Web Designer, expand the Form Details pane. Select the Event Handlers tab and click the + icon to add another event. On the Event Handler modal, select the SignInBtn event.

Click Ok.

Set the Type to Set Values. Click the ellipsis on the Parameters field.

On the Event Handler Parameters modal, click the Variables ellipsis.

On the Edit Set Variable Values modal, click the New button.

Set the Target to Page and the Value to two.

Click Ok. Until you return back to the home screen.

Here are the New additional SignInBtn event values.

Let’s set an initial value on the Count variable so it will default to 1. Click on the editCount component.

In the Properties panel, under the Data Source section, click the Binding attribute ellipsis.

On the Edit Variable Binding modal, set the Initial Value field to 1 and then click Ok.

Next, we need to set some dynamic Enabled When actions on the menu buttons so that they are only enabled after a customer signs in. We are going to use the CustomerID variable to achieve this.

Select the buttonSignIn2 component.

On the Properties panel, under the Behavior section, click the Enabled When ellipsis.

On the Edit Condition modal, click the Edit Value button on the Left Value field.

On the Edit Value Expression modal, for the Value Type field select Variable Value and for the Value field type CustomerID and then click Ok.

On the Edit Condition modal, change the Operator field to <>

Click the Edit Value button on the Right Value field.

On the Edit Value Expression modal, for the Value Type field select Literal and for the Value field, leave the field blank.

Click Ok.

Click Ok.

Click Ok.

Repeat this same process for the buttonHome component, using the same condition statement.

Select the buttonHome component.

On the Properties panel, under the Behavior section, click the Enabled When ellipsis.

On the Edit Condition modal, click the Edit Value button on the Left Value field.

On the Edit Value Expression modal, for the Value Type field select Variable Value and for the Value field type CustomerID and then click Ok.

On the Edit Condition modal, change the Operator field to <>

Click the Edit Value button on the Right Value field.

On the Edit Value Expression modal, for the Value Type field select Literal and for the Value field, leave the field blank.

Click Ok.

Click Ok.

Click Ok.

Repeat this same process for the buttonCart component, using the same condition statement.

Select the buttonCart components,

On the Properties panel, under the Behavior section, click the Enabled When ellipsis.

On the Edit Condition modal, click the Edit Value button on the Left Value field.

On the Edit Value Expression modal, for the Value Type field select Variable Value and for the Value field type CustomerID and then click Ok.

On the Edit Condition modal, change the Operator field to <>

Click the Edit Value button on the Right Value field.

On the Edit Value Expression modal, for the Value Type field select Literal and for the Value field, leave the field blank.

Click Ok.

Click Ok.

Click Ok.

Click Save.

Switch back to the runtime mode tab and reopen the CustomerPortal form. Now you will see that all of the Menu buttons are disabled until you sign in with a Customer ID.

Let’s go ahead and log in with our CustomerID of One and then click the sign in button.

Adding items to the Cart

In this next part, we need to add in functionality allowing a user to add items to the cart. In order to achieve this, we will use the Drag From and Drop On Events. This will allow a user to click on an Item from the Items Grid and drag it onto the Cart button.

Switch back to the CustomerPortal form in the Web Designer. Expand the Forms Details pane.

Select the Event Handlers tab and click the + icon to add a new event.

Set the Name field to SetNewCartEntry and click Ok.

Expand the Response section and set the event Type to Set Values and click the ellipsis for the Parameters field.

On the Event Handlers modal, click the Properties ellipsis.

On the Edit Set Property Values modal, click the New button.

On the Edit Set Property Value Pair modal, from the drop down set the Target field to Item (Item property from the primary collection). Click the ellipsis for the Value field.

On the Edit Entry modal, from the drop down set the Type field to Property Value. Select the secondary collection, from the drop down set the Collection field to secondary collection 2. Now from the drop down set the Value field to Item property (Item value from our secondary collection). Click Ok.

On the Edit Set Property Value Pair modal keep the Collection for Target field set to primary collection. This will set the Item property of our primary collection to the Item property of our secondary collection (i.e. the Item that the user selected). Click Ok.

Substitute the Count property with our Count variable. 

Click the New button to add another entry.

On the Edit Set Property Value Pair modal, from the drop down set the Target field to Count. For the Value field type: V(Count) and keep the Collection for Target field set to primary collection. Click Ok.

Click the New button to add another entry.

On the Edit Set Property Value Pair modal, set the Target field to CustomerID. For the Value field type: V(CustomerID) and keep the Collection for Target field set to primary collection. Click Ok.

Click Ok

Click Ok. You should now be back on the home screen.

Add Event Hander AddToCart.

From the Details pane, select the Event Handler tab, click the + to add another event.

Set the Name field to AddToCart and click Ok.

Expand the Response section and from the drop down set the event Type to Collection Make Current. Click the ellipsis for the Parameters field.

On the Event Handler Parameters modal, set the Collection field to primary collection. Click Ok.

Add another Event Handler to the AddToCart event.

Click the + to add another event.

Select the Name field to AddToCart and click Ok.

Expand the Response section and from the drop down set the event Type to Collection New. Click the ellipsis for the Parameters field.

On the Event Handler Parameters modal, set the Collection field to primary collection. Click Ok.

Add another Event Hander to the AddToCart event.

From the Details pane, select the Event Handler tab, click the + to add another event.

Set the Name field to AddToCart and click Ok.

Expand the Response section and from the drop down set the event Type to Generate Event. Click the ellipsis for the Parameters field.

On the Event Handler Parameters modal, from the drop down set the Event field to SetNewCartEntry. Check the Post Event Asynchronously box.

Click Ok. to return to the Home screen.

Click Save.

We need to add these events to the components on the form we want to drag and drop from. 

Select the gridItems component.

From the Properties panel, under the Events section, click the Drag From Events ellipsis.

On the Edit Drag From Events modal, on the Event to Add field, from the drop down select the AddToCart event and then click the Add button.

Click Ok.

Select the buttonAddToCart component.

From the Properties panel, under the Events section, click the Drop On Events ellipsis.

On the Edit Drop On Events modal, on the Event to Add field select the AddToCart event and then click the Add button.

Click Ok.

Now we need a way to Save our Order.

Add an event on the buttonCheckOut component that will save the cart to the Orders table. Select the buttonCheckOut component.

From the Properties panel, expand the Events section. Set the Primary event to the standard Mongoose event. Type in StdFormSave.

Click Save.

Final Test of the Customer Portal:

Switch to the Runtime Mode tab, and test it out by signing in with a Customer ID of 1, select an Item and drag to the cart.

To view your cart hit the Cart button and now you can see that our Bike was added with a count of 1.

Save our order to the database by hitting the Check Out button, which is running our standard form save event.

Because we built this as a flex form you can see if you shrink the browser that the form will  automatically adjust to the viewing size.

Summary:

Congratulations! You have completed the Hello World Mongoose Video Series. We only touched the surface of what Mongoose can do, some of the extended topics include:

• Form Scripting and Adding Code – add these into the IDO layer via .Net IDO extension classes
• Creating Subcollections – These allows you to create a link between a parent/child at the IDO level instead of at the table level. This is particularly useful in Order and Order Lines scenarios.
• Additional Component Types – such as Notebooks, Browsers, Diagrams, Vertical Grids, Dataviews and KPIs…
• Dataviews – Available on any collection on any form, providing in-place business intelligence, and you can create key performance indicator graphical displays, that can be added to any form.
• Application Event System (AES) – This is a major subsystem for adding server-side logic without writing code, allowing you to set rules for automation, workflow, and integration, leveraging IDOs and a wide array of other options.
• Integration – with ION, ION API, DataLake, and IDM.
• Reporting – Mongoose has its own built in report writer.
• Multi-device – Responsive breakpoints allow you to design for different devices. You create your core logic and permissions for a form one time, and the form adapts based on the viewing device.
• Security – Mongoose has security where you can set policies at the security role or user level for forms, IDOs, field-level and row-level policies.

Here is the Part 8 video showing the detailed steps to complete the previous tasks.

 

Resources

• Mongoose Online Documentation: Infor Mongoose User and Administration Library

Downloads