Responsive Flex Design & User Engagement

Responsive Design: Flex Forms and Layout Components

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.

NOTE: The FlexLayout attributes can also be accessed by clicking the ellipsis in the Properties panel under Layout -> Flex Attributes. By default the FlexLayout component arranges the regions horizontally.

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

Then select each region, and add the following attributes:

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:

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:

NOTE: Remember to create the string for the Caption field by clicking on the Caption ellipsis.

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:

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:

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:

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:

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:

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:

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:

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.