Dynamic Navigation & Final Testing

Expanding the Zero-Training Portal with Tile Forms & Dynamic Actions

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:

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.

NOTE: We want this event to fire when the user signs in with their Customer ID.

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:

staticCount Component Properties:

NOTE: Make sure to create the string values for Caption, by clicking the Ellipses on the Caption attribute.

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:

NOTE: Make sure to create the string values for Caption, by clicking the Ellipses on the Caption attribute.

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):

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:

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:

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.

NOTE: Here is where we can build our conditional statement.

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.

NOTE: If the Visible in Design Mode value is not displayed, you may need to refresh the Properties. (Go out of the Region and back in).

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:

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.

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.

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

Downloads