Building the Form

Click on Edit Form Properties at the bottom of the window.

Enter your Overall Form Properties

Create your commuter module.

Bind your table to the form.

From the Mobile Widgets tool bar, drag the Header widget on to your form

Enter your Mobile header section properties.

Expand the header element that you previously drew on the form to allow for more information. Next, from the Form Elements tool bar, drag the Image control on to your form into the header element.

Enter your Image properties. Below are screen images for multiple tabs.

From the Lists tool bar, drag the Unordered List control on to you form.

Enter your Unordered List properties for the Mobile tab.

From the Content Layout tool bar drag the Control Block control into your Unordered List.

Enter your Control Block properties. Below are images for multiple tabs.

From the Lists tools panel, drag the List Items control on to your form and into the Control Block element (which is inside the Unordered Lists element).

Enter your List Item properties. Below are images for multiple tabs.

From the Form Elements tool bar drag the Image control on to your Form into the List Item element (inside the Control Block element, inside the Unordered Lists element).

Enter your Image properties. Below are images for multiple tabs.

From the From Elements tool bar, drag the Text control on to the form. This should also be dropped into the List Item element (along with the Image element), inside the Control Block element (inside the Unordered Lists element).

Enter your Text properties. Below are images for multiple tabs.

Now this page is complete. It should look like the image below.

Click on the Edit Page Properties link at the bottom of the page.

Enter the Default Properties. Here you will assign which field gets the initial focus, and create an event that will get passed to the commuter module when the page is created.

From the Menu Tool Bar, go to File, Save.

Enter the name of this form (PIZZA_ENTRY).

Click the Yes button to build your commuter module.

From the System Editor you can edit the stored procedure created for this form (O4WCM2_PIZZA_ENTRY).

From the Menu tool bar, select Test Draw, Mobile to render your form.

Edit the Overall Form properties on the Behavior tab. Here you will add another page to this web form, and specify that its “handler” should be a “Custom” stored procedure.

Select the Header from Page 1 and click Copy.

Select Page 2 from the bottom page link menu. Note that there are now two pages listed in the form.

From this point, we will be working on page 2 of the form. Click the main overall section, and then click the Paste button.

After the paste, a copy of the header and its internal contents should be at the top of page 2.

Click on the “Page Properties” link on the bottom of the page, and enter the Default properties. Specify the name of the event you wish to call in the commuter module when the page is created.

From the Form Elements tool bar, drag the Header control on to the form and drop it below the mobile header that you pasted from page 1.

Enter the Header properties. Below are images for multiple tabs.

From the Form Elements tool bar, drag the Text control on to the form under the just-created header element.

Enter the Text properties. Below are images for multiple tabs.

From the Menu tool bar, click File, Save.

Rebuild the commuter module. Since we have not created any custom code in the previously generated commuter module, we can choose “Yes, and overwrite existing procedure” without fear of losing any user-entered information. If we had changed the commuter module manually, then we would have chosen “Yes, and download new procedure” to download the updated commuter module source into Notepad, and then manually integrated any changes.

Below you can see the recreated commuter module, with the PREDRAW_PAGE event and the “skeleton” of the event handler ready to be modified for invocation on page 1 or page 2.

Below is our modified commuter module.

Below we can Test Run the form and click on Soups to render Page 2.

Below is the result of click on Soups.

From the Lists tool bar, drag the Unordered List control on to you form.

Enter the Unordered List properties for the Mobile tab.

From the Content Layout tool bar drag the Control Block control into your Unordered List.

Enter the Control Block properties. Below are images for multiple tabs.

From the Lists tools panel, drag the List Items control on to your form and into the Control Block element (which is inside the Unordered Lists element).

Enter the List Item properties. Below are images for multiple tabs.

From the Form Elements tool bar drag the Header control on to your Form into the List Item element (inside the Control Block element, inside the Unordered Lists element).

Enter the Header properties. Below are images for multiple tabs.

From the Content Layout tool bar, drag the Section control on to your Form into the List Item element (inside the Control Block element, inside the Unordered Lists element, under the Header element).

Enter the Section properties for the Advanced tab.

Resize the section element that you just dropped into the List Item element so that it is only ½ as wide as the List Item area, and then drag another Section element into the right-hand side of the List Item element (next to the first section element).

Enter the Section properties for the Advanced tab.

From the Form Elements tool bar, drag the Text control on to your Form into the left side Section element (inside the List Item element, inside the Control Block element, inside the Unordered Lists element, under the Header element).

Enter the Text properties. Below are images for multiple tabs.

From the Form Elements tool bar, drag the Text control on to your Form into the right side Section element (inside the List Item element, inside the Control Block element, inside the Unordered Lists element, under the Header element).

Enter the Text properties. Below are images for multiple tabs.

From the Menu tool bar, Save your form.

Test run your form and click on SOUP.

Page 2 now displays the ITEM_DESC and PRICE.

Click on Edit Form Properties at the bottom of the page.

Edit the Overall Form properties on the Behavior tab. Here you will add another page to this web form, and specify that its “handler” should be a “Custom” stored procedure.

Select the Header from Page 2 and click Copy.

Select Page 3 from the bottom page link menu. Note that there are now three pages listed in the form.

From this point, we will be working on page 3 of the form. Click the main overall section, and then click the Paste button.

After the paste, a copy of the header and its internal contents should be at the top of page 3.

Click on the “Page Properties” link on the bottom of the page, and enter the Default properties. Specify the name of the events you wish to call in the commuter module before the page is created, and after the page is drawn.

From the Form Elements tool bar, drag the Header control on to the form and drop it below the mobile header that you pasted from page 2.

Enter the Header properties. Below are images for multiple tabs. Note that for the header text, you may use “^” as a placeholder; the actual value will be filled in by the data from the record (specified in the Data tab). While in design mode, the name of the field will be used instead.

From the Form Elements tool bar, drag the Text control on to the form and drop it below the Header control.

Enter the Text properties. Below are images for multiple tabs. As above, the caret (“^”) is a placeholder for the underlying data field value.

Note that the text field for ITEM_DESC has been “stretched” to accommodate a large amount of text from the data record. Next, from the Form Elements tool bar, drag the Text Input control on to the form and drop it below the Text control.

Enter the Textbox properties. Below is an image for the Required tab.

From the Form Elements tool bar, drag the Control Block control on to the form and drop it below the Text Input control.

Enter the Control Block properties. Below are the properties for the Block Type tab. The conditional evaluation script ensures that the elements inside the control block aren’t drawn if field 6 of the data record has no value (if len(@record<6>) = 0)

From the Content Layout tool bar, drag the Section control on to your Form inside the Control Block element.

Enter the Section properties. Below are images for multiple tabs.

As before, the “^” in the Header Text is a placeholder for the data value to be drawn at run time.

Make sure that the contents of the section do not “over flow” the allotted area by specifying that the section should “scroll” if its content is too large.

When in mobile mode, this section can “collapse” to hide its content.

From the Form Elements tool bar, drag the Select menu control on to your Form inside the previously created Section inside the Control Block element.

Enter the Listbox (Select Menu) properties. Below are images for multiple tabs.

The elements inside a Control Block can access information about the record list that the control block is iterating through. In this case, the list of items to display will be pulled from a control record stored in the PIZZA_ITEMS table, using the current @ID that’s being processed. The “!” is a placeholder that represents the current @ID.

The Static Values button must be set to No, as each pass through this Control Block will generate a new list of values and options.

From the Form Elements tool bar, drag another Control Block control on to the form and drop it below the first Control Block element.

Enter the Control Block properties. Below are the properties for the Block Type tab. As was done in the last Control Block, the conditional script will determine whether the Control Block (and the elements it contains) will be drawn, or skipped.

From the Content Layout tool bar, drag the Section control on to your Form inside this second Control Block element.

Enter the Section properties. Below are images for multiple tabs.

As before, the “^” is a place holder for the data value to be drawn at run time.

Make sure that the contents of the section do not “over flow” the allotted area by specifying that the section should “scroll” if its content is too large.

Mark this as a “collapsible” section when drawn in mobile mode.

From the Groups tool bar, drag the Checkbox Group control on to your Form into the Section inside the second Control Block element.

Enter the Checkbox Set properties. Below are images for multiple tabs. The source for the checkbox items will be a code record in a table.

The elements inside a Control Block can access information about the record list that the control block is iterating through. In this case, the checkbox items to display will be pulled from a control record stored in the PIZZA_ITEMS table, using the current @ID that’s being processed. The “!” is a placeholder that represents the current @ID.

Since the number of checkbox elements will vary depending on the particular item selected, the section is marked “grow” if the contents would exceed the originally defined parent section size.

Your screen at this point should look like the image below.

We can now have the O4W WYSIWYG designer generate an updated version of the commuter module, to reflect any changes in our events. Because we do not want to overwrite any changes we might have manually made in the commuter module’s basic+ code, we can choose to “download” the updated commuter module and have it put into Notepad in Windows. We can then manually integrate the new, automatically generated information with our existing commuter module stored procedure.

Your commuter module will now open in Notepad.

The highlighted text shows the new code that was automatically generated by the commuter module generator. This can now be “copied” and “pasted” into your existing commuter module in OpenInsight.

In the Stored Procedure Editor, open the original commuter mode and paste in the code above.

We now add custom code to the commuter module to retrieve the proper code information from the PIZZA_ITEMS table, based on the key and value number:

We also add in custom code in the postdraw_page event to populate the exclusive and inclusive option lists based on the current item key:

We will now test run the form.

From the Groups toolbar drag the Button Group control onto the main form of page 3, under the two Control Block elements.

On the “Mobile” tab of the button set, select “Yes” to mark the buttons as “mini sized.”

Drag a button from the Form Elements toolbar and drop it into the newly created button set element.

Edit your Button properties. Below are multiple images for each tab.

Make sure that the Yes option is selected for the Call commuter module question.

Drag another button next to the previous button inside the Button Set element.

Enter the Button properties.

Drag a third button next to the previous button inside the Button Set element.

Enter your Button properties.

Your screen at this point should look like the image below.

We can now have the O4W WYSIWYG designer generate an updated version of the commuter module, to reflect any changes in our events. Because we do not want to overwrite any changes we might have manually made in the commuter module’s basic+ code, we can choose to “download” the updated commuter module and have it put into Notepad in Windows. We can then manually integrate the new, automatically generated information with our existing commuter module stored procedure.

The highlighted text shows the new code that was automatically generated by the commuter module generator. This can now be “copied” and “pasted” into your existing commuter module in OpenInsight.

In order to only show the “add to cart” button initially, we add the following custom code to hide the other buttons.

When the “Add to Order” button is clicked, we collect the information from the form and store it away in the userFields@ common variable.

We store and retrieve our working record from the O4WTemp table:

Click on Edit Form Properties.

Update the Overall Form Properties, Behavior Tab, to add a new page (Shopping_Cart) as a Custom (Stored Procedure) page type.

Select the Header from Page 3 and click Copy.

Select the new Page 4 from the bottom page link menu. Note that there are now four pages listed in the form.

From this point, we will be working on page 4 of the form. Click the main overall section, and then click the Paste button.

After the paste, a copy of the header and its internal contents should be at the top of page 4. Drag a header element onto the main blank area of page 4 (below the overall header).

Edit the Header Properties of the new element on Page 4.

From the Lists tool bar, drag the Unordered List control on to the form and drop it below the “Shopping Cart” header that you just created.

Enter the Unordered List Properties for the Mobile tab. Set the “Filtered” and “Mobile Inset” radio buttons to Yes, and the Mobile Auto Divider to No.

From the Form Elements tool bar, drag the Control Block control on to the form and drop it inside the Unordered List control.

Enter the Control Block properties. Below are the properties for the Block Type tab.

From the Lists tool bar, drag the List Item control on to your Form inside the Control Block element.

Enter the List Item properties, specifying the dynamic userField@ common element maintained by the Form Wizard as the source of the elements.

From the Form Elements tool bar, drag the Text Area control on to your Form inside the previously created List Items element inside the Control Block element.

Enter the Text Area properties. Below are images for multiple tabs.

From the Form Elements tool bar, drag Text control on to the form and drop it below the Unordered List element.

Enter the Text properties.

From the Form Elements tool bar, drag another Text control on to the form and drop it below the Unordered List element, to the right of the previous Text control.

Enter the Text properties. Below are the properties for multiple tabs. Note that the caret (“^”) as the text value is a placeholder for the data that this element will access – in this case, field 15 of the userFields@ common variable.

Your screen at this point should look like the image below.

The highlighted text shows new code that needs to be added to your existing commuter module in OpenInsight.

We will now test run the form.

If the user clicks on an item in their shopping cart on the shopping cart details page (page 4), we want to “drill down” to the specific item to allow the user to change their order. We make the shopping cart line item a “link” to the detail page (page 3), passing in the line item number. We use “!!” as a placeholder for the value number in the control block/list item display.

Now we click on page 3 to return to the item details page.

We add a button set with three buttons to allow the user to add the item to the shopping cart, remove a previously-entered item from the shopping cart, and to cancel any changes to the item.

Drag a textbox onto the page in a blank area.

We will make this a “hidden” textbox on the page to store the line item number. If this value is set by the commuter module code, then we know we are editing an existing line item; if this value is not set, then we know this is a new item that may be added to the shopping cart.

Below are the changes that we need to add to the commuter module.

We will now test run our form.

Click on the page 4 link to return to the shopping cart page.

Drag a button group element from the Groups section onto the shopping cart. Drop the button group into the blank area of the page below “Order Total.”

Click “Yes” for Horizontal Layout of the button set on the Optional tab.

Click “Yes” for Mini Sized on the Mobile properties tab.

Select a button element and drag it into the Button Set that was just created.

Set the properties for the newly created button element as shown below.

Select “Yes” for Call Commuter Module when Clicked on the Events tab.

Drag another button element into the Button Set you previously created, and drop the button next to the Check Out button.

Set the properties of this button as shown below.

Once again, click “Yes” for Call Commuter Module when clicked.

Your form should now look like the following. Save the form.

When prompted, choose to rebuild the commuter module, downloading the updated procedure.

Copy the updated code (highlighted below) from Notepad into your OpenInsight stored procedure.

Add the following code:

You can now run the completed form.

Below is the complete commuter module stored procedure:

FUNCTION O4WCM2_PIZZA_ENTRY(CtlEntId, Event, Request)

 

* Auto-generated by O4W_DESIGN_FORM at 16:23:51  13 FEB 2018

 

* Standard equates

$Insert O4WEquates

$Insert O4W_Design_Form_Equates

$Insert O4W_COMMUTER_COMMON

 

rtnValue = 1

Begin Case

   Case Event _eqc 'PREDRAW_PAGE'

      * called when specified page is about to be drawn

      Begin Case

         Case ctlentid = '1'

           keepCart = O4WGetValue("KEEPCART")

           If keepCart <> "1" then

                Gosub deleteOrderInfo

                userFields@ = ""

           end

         Case ctlentid = '2'

           * pull up the category information the user has selected

           whichKey = o4wgetvalue("KEY")

           savedInfo = O4WCommuterUtility(whichKey, O4WUTILITY_OVERRIDE_READ$, "PIZZA_CONTROL")                 

         Case ctlentid = '3'

           * Item Details Page

           whichKey = o4wgetvalue("KEY")

           whichMV = o4wgetvalue("DRMV")

           lineItem = o4wgetvalue("LINEITEM")

           If lineItem <> "" Then

               * this is a call from the shopping cart page - pull up that line item

               Gosub getOrderInfo

               whichKey = currOrder<6, lineItem>

               whichMV = 0

           end          

           savedInfo = O4WCommuterUtility(whichKey:@VM:whichMV, O4WUTILITY_OVERRIDE_READ$, "PIZZA_ITEMS")        

      End Case

   Case Event _eqc 'POSTDRAW_PAGE'

      * called when specified page has finished being drawn

      Begin Case

         Case ctlentid = '3'

           * Item Details Page

           * the user clicked on an item

           * We may get here because the user clicked on an item to order OR because they clicked on a line item in the shopping cart

           lineItem = o4wgetValue("LINEITEM")

           If lineItem <> "" Then

               * the user clicked on a line item in the shopping cart

               * pull up the selected item, and set the defaults to whatever they've already selected

               Gosub getOrderInfo

               whichKey = currOrder<6, lineItem>

               itemInfo = Xlate("PIZZA_ITEMS", whichKey, "", "X")

               currQty = currOrder<7, lineItem>

               exclusive_default = currOrder<8, lineItem>

               inclusive_defaults = currOrder<9, lineItem>

               Convert @SVM To @VM In inclusive_defaults

               showOrHide = "SHOW" ;* show our additional buttons          

           End Else

                * pull in the item information and set up the defaults

                thisID = o4wgetvalue("KEY")

                itemInfo = Xlate("PIZZA_ITEMS", thisID, "", "X")

                currQty = 1

                exclusive_default = itemInfo<7>

                inclusive_defaults = itemInfo<11>

                showORHide = "HIDE" ;* hide everything except the "add to cart" button

                lineItem = " " ;* so it's not just a null

           End

           * now, update the fields with the new or existing info

           qtyElement = O4WCommuterUtility("", O4WUTILITY_FORMELEMENT_CONTROL$, "QTY")

           O4WUpdate(qtyElement, currQty, O4WResponseOptions(1))

           If exclusive_default <> "" Then

               ourStyle = O4WMarkedOptions("", exclusive_default):O4WResponseOptions("","1")

               O4WUpdate("ELEMENT_37", "", ourStyle)

           end

           If inclusive_defaults <> "" then

               O4WUpdate("ELEMENT_40", "", O4WMarkedOptions("", inclusive_defaults):O4WResponseOptions("","1"))

           end        

           o4wqualifyevent("",showORHide,"ELEMENT_44")

           o4wqualifyevent("", showOrHide, "ELEMENT_45") 

           If lineItem = "" Or lineItem = " " Then

               O4WUpdate("ELEMENT_43", "Add to Cart", O4WResponseOptions(1))

           End Else

               O4WUpdate("ELEMENT_43", "Update Cart", O4WResponseOptions(1))

           end

           storageElement = O4WCommuterUtility("", O4WUTILITY_FORMELEMENT_CONTROL$, "SAVED_LINEITEM")

           o4wUpdate(storageElement, lineItem, O4WResponseOptions(1)) ;* save our line item (if any)          

      End Case

   Case Event _eqc 'CLICK'

      * called when button clicked

      fieldName = O4WCommuterUtility(CtlEntId, O4WUTILITY_FIELDNAME$)

      clickType = O4WCommuterUtility(CtlEntId, O4WUTILITY_CONTROLTYPE$)

      Gosub getOrderInfo     

      Begin Case

         Case ctlentid _eqc 'ELEMENT_43'

            * Button 'Add To Order'

            * called from click

            * load in the values from the page

            qty = O4WGetValue("QTY")

            options = O4WGetValue("INCLUSIVE_OPTIONS")

            exclusive = O4WGetValue("EXCLUSIVE_OPTIONS")

            * load in the information from the control record

            thisID = DRKeys@<1,1>

            itemInfo = Xlate("PIZZA_ITEMS", thisID, "", "X")

            total = 0

            lineItem = o4wgetvalue("SAVED_LINEITEM")

            If lineItem = " " Then lineItem = ""

            If lineItem = "" Then

               * update our "order record" information with this new item to add to the order

               lineItem = dcount(currOrder<6>, @VM) + 1

            end

            userFields@ = currOrder

            text = qty:" of ":itemInfo<1>

            total += qty * itemInfo<4>

            excCost = 0

            If exclusive <> "" Then

               text := " (":exclusive:")"

               excCost = 0

               Locate exclusive In itemInfo<6> using @VM setting posn Then

                    excCost = itemInfo<8, posn>

               end

            End

            total += qty * excCost

            incOptions = ""

            num.options = dcount(options, @VM)

            If num.options Then

                 text := " with "              

                 For each.option = 1 To num.options

                    this.option = options<1, each.option>

                    text := this.option

                    this.cost = 0

                    Locate this.option In itemInfo<10> using @VM setting posn Then

                         this.cost = itemInfo<12, posn>

                    end

                    total += qty * this.cost

                    incOptions<1,1,-1> = this.option

                    incOptions<2,1,-1> = this.cost

                    Begin Case

                         Case each.option = num.options - 1

                              text := " and "

                         Case each.option <> num.options

                              text := ", "

                    End case

                 Next each.option

            End

            userFields@<5, lineItem> = text

            userFields@<6, lineItem> = thisID

            userFields@<7, lineItem> = qty

            userFields@<8, lineItem> = exclusive

            userFields@<9, lineItem> = incOptions<1>

            userFields@<10, lineItem> = incOptions<2>

            oldLineTotal = userFields@<11, lineItem>

            userFields@<11, lineItem> = total

            oldGrandTotal = userFields@<15>

            userFields@<15> = oldGrandTotal - oldLineTotal + total

            currOrder = userFields@

            o4wgotopage("Shopping_Cart", "4")

         Case ctlentid _eqc 'ELEMENT_44'

            * Button 'Remove From Order'

            * called from click

            lineItem = o4wgetvalue("SAVED_LINEITEM")

            If lineItem = " " Then lineItem = ""

            If lineItem <> "" Then

               * remove the specified item

               userFields@ = currOrder

               oldLineTotal = userFields@<11, lineItem>

               oldGrandTotal = userFields@<15>

               For each.Field = 5 To 14

                    userFields@ = Delete(userFields@, each.Field, lineItem, 0)

               Next each.Field

               userFields@<15> = oldGrandTotal - oldLineTotal

               currOrder = userFields@

            End

            o4wgotopage("Shopping_Cart", "4")           

         Case ctlentid _eqc 'ELEMENT_45'

            * Button 'Cancel Changes'

            * called from click

            O4WGotoPage("Shopping_Cart", "4")

         Case ctlentid _eqc 'ELEMENT_60'

            * Button 'Check Out'

            * called from click

            Open "PIZZA_ORDERS" TO order.fl then

                 Write currOrder On order.fl, DATE():"*":TIME()

                 Gosub deleteOrderInfo

                 userFields@ = ""

                 o4werror("Congratulations!  Your order is on the way!", "Checkout", "<<page>>Main_Menu", "&PAGENAME=1")

            End Else

                 o4wError("Unable to update PIZZA_ORDERS table!")

            end           

         Case ctlentid _eqc 'ELEMENT_61'

            * Button 'Return to Menu'

            * called from click   

            O4WGotoPage("Main_Menu", 1, "", "KEEPCART=1")         

      End Case    

      Gosub updateOrderInfo

End Case

 

Return rtnValue

 

deleteOrderInfo:

delete O4WTempFile%, O4WSessionId%:"*PIZZAORDER"

Return

 

getOrderInfo:

Read currOrder From O4WTempFile%, O4WSessionId%:"*PIZZAORDER" Else currOrder = ""

Return

 

updateOrderInfo:

Write currOrder On O4WTempFile%, O4WSessionId%:"*PIZZAORDER"

Return