About the Project#

This application implements a simple food ordering form through a phone service.

The initial request will return a menu to let you select breakfast or lunch. After the user makes their selection, the appropriate food menu will be displayed. After they make their food selection, a response message is sent.

Build the project#

Create the Project#

1. Launch the Cisco Unified Application Designer.

2. Select File -> New Project.

3. Create a new project named SimpleIpPhoneMenuTree.

4. When creating a new project, the Designer will prompt you to name the first script and to select a triggering event for that script. For this example we will just go ahead and keep the default script name 'script1', but we are going to select a specific triggering event. For this application select the 'Metreos.CallControl.Http.GotRequest'event:

Add OnGotRequest Events#

This application will have 3 events tabs, each corresponding to a unique http request. The first GotRequest tab was created when we specified the trigger upon creating the application; this will let the user pick lunch or breakfast. Then we have to add in two more http events- one to handle the food menu, and then the other to issue the success response. These events, GotRequest1 and GotRequest2, will have to be manually added.

1. Click on the script1 tab. Under the toolbox, expand the HTTP tab and drag and drop GotRequest onto the canvas two times. You will see the listings for OnGotRequest1 and OnGotRequest2 appear under OnGotRequest, as well as the events tabs at the top of the canvas.

2. The default GotRequest tab is invoked by an incoming request with "url" parameter equal to "/lunchOrder". We will define this parameter here (note that you can also later add trigger values to a deployed application in the CUAE). Click on the default triggering OnGotRequest listing under Events and Functions. Then go to its Properties window in the lower right hand corner. Change the url field to /lunchOrder, as shown below.

3. Similarly, OnGotRequest1 will be triggered by an incoming http request with the url parameter equal to /showMenu. Select OnGotRequest1 on the canvas and then set this parameter in its Properties window.

4. And OnGotRequest2 will be triggered by an incoming http request with the url parameter equal to /menuSelection. Select OnGotRequest2 on the canvas and then set this parameter in its Properties window.

Define OnGotRequest#

Add Local Variables#

1. Click on the OnGotRequest tab at the top of the canvas. We will be using several local variables in this example. Local variables can only be accessed on the event tab in which they are created. To view the Variables Tray, R-click anywhere on the OnGotRequest canvas and click Variables Tray (or you can can do View > Variables Tray). This action toggles the variable tray from viewed to hidden. You should now see a line at the bottom of the canvas and the message "(tray empty)".

2. To add a variable, R-click on the variable tray and select Add New Item. Call this new variable textXML. Add variables remoteHost, host, and routingGuid the same way.

3. Select the variable textXML by clicking on it. Go to its Properties window and set its type to Text. Leave DefaultValue, InitializeWith, Reference Type, and Variable Name to their defaults.

4. In a similar manner, set the following Properties for the following variables:

remoteHost

remoteHost

remoteHost

Add CreateText#

1. In OnGotRequest, we want to create and send an XML object with two softkeys, one for breakfast and one for lunch, and send the resulting XML object. The first action we want is CreateText, which is a part of the CiscoIpPhone group. Go to the Toolbox in the upper right hand corner and click on the CiscoIpPhone heading to expand its menu. Find the CreateText listing.

2. Drag and drop the CreateText action onto the canvas. Note that since it is the first action on the canvas, it is automatically connected to the Start node, but in the future we will have to make connections ourselves.

3. Select CreateText on the designer canvas. Notice it is highlighted by a green box. Go to its Properties window and set the following parameters.

Add SoftKeyItems#

1. Now to add the soft key items. Go to the Toolbox and expand CiscoIpPhone. Drag and drop two AddSoftKeyItem actions onto the canvas. Connect one to the CreateText icon by hovering your mouse over the center of CreateText until it becomes a hand, then dragging towards the AddSoftKeyItem icon until an arrow appears. Then connect the second AddSoftKeyItem icon to the first. Leave the connection condition as "default".

2. Go to the Properties window of the first AddSoftKeyItem action and set the following properties:

2. Go to the Properties window of the second AddSoftKeyItem action and set the following properties:

Add SendResponse#

1. Now that we have created the XML object (saved into our local variable textXML), we want to send it to the browser, or phone, that triggered the request. Go to the Toolbox and expand HTTP. Drag and drop SendResponse onto the canvas and connect it to the second AddSoftKeyItem icon.

2. Go to the Properties window of SendResponse and set the following properties:

Add EndFunction#

1. Now we are finished implementing the logic of OnGotRequest. However, since the other OnGotRequest events will be executing, we don't want to end the script yet. Let's just add in an EndFuction instead. Go to the Toolbox and expand Application Components. Drag and drop EndFunction onto the canvas and connect it with SendResponse.

Define OnGotRequest1#

Add following flow to your script's GotRequest1 tab, to service url(s) created by the GotRequest function. The screen is showing a number of actions. Recreate the variable from GotRequest in this tab, except instead of textXML, create a variable called menuXML, of type Menu. You will also need to add a variable query (properties shown below). Next 4 pics following the Figure 11 below, show the property grids of the 4 actions used within this tab.

Figure 12. OnGotRequest1 function. Shows the logic flow.

Figure 13. query local variable

Figure 14. CreateMenu action

Figure 15. Switch action

Figure 14. AddMenuItem action

The AddMenuItem in Figure 14 is adding "Pancakes". Follow same url format and add "Eggs" to the other AddmenuItem under Breakfast branch. And add "Pizza" and "Burger" under Lunch branch. The SendResponse action is same as previous function OnGotRequest.

Define OnGotRequest2#

Add following flow to your script's GotRequest2 tab, to service url(s) created by the GotRequest function. The screen is showing a number of actions. Define the local variables menuXML, remoteHost, and query with the same properties as shown for OnGotRequest1. The pic following the Figure 15 below, show the property grids of the AddMenuItem action used within this tab. The AddMenuItem in Figure 16 is formatting a string confirming the order. The SendResponse action is same as previous function OnGotrequest.

Figure 16. OnGotRequest2 function. Shows the logic flow.

Figure 17. AddmenuItem action

Installing the Application#

Go to Tools>Options>Connectivity to specify a server to install the application on. Go to Build>Deploy to build and deploy your application at the same time.

To set a trigger for the application, logon to the CUAE Admin console and go to Applications> Trigger> SimpleIpPhoneMenuTree. Enter "url" and "/lunchOrder" and click Add Parameter.

Running the Application#

Adding the Phone Service#

1. We want to add this application as a phone service. To do this, first login to the call manager of your phone. Go to Device> Device Settings> Phone Services. Click Find and then Add New. Set both the Service Name and ASCII Service Name to "Lunch Order". Set the service URL to http://localhost:8000/lunchOrder. Save the changes.

2. To add the service to your particular IP Phone, lookup your phone under Device>Phone. Under the Related Links drop-down list at the top, select Subscribe/Unsubscribe Services and Go. Select Lunch Order from the drop-down and select Next and then Subscribe. You will have to reset your phone now for the changes to take effect.

Executing the Application#

Now that the service has been applied to the phone, you can access the lunch menu by pressing the Services key on your phone. Select the Lunch Order softkey and the menu should load.