I am more than just a survey tool : Menu system

So we have designed our login system, what’s next ? Well once we have logged in we need to have the ability to choose some menu options. In this article I will show you how we can take a single response question and convert it into a menu. We will also setup on one of the menu options a sub menu so that you will be able to make your menu system as deep as you require.

First off we need some metadata,

    MainMenu ""
    categorical [0..1]
    {
        mExit "Exit"
            style(
                Width = "7em",
                Control(
                    Type = "Button"
                )
            ),
        mOption1 "Option 1"
            style(
                Width = "7em",
                Control(
                    Type = "Button"
                )
            ),
        mOption2 "Option 2"
            style(
                Width = "7em",
                Control(
                    Type = "Button"
                )
            ),
        mOption3 "Option 3"
            style(
                Width = "7em",
                Control(
                    Type = "Button"
                )
            ),
        mOption4 "Option 4"
            style(
                Width = "7em",
                Control(
                    Type = "Button"
                )
            ),
        mOption5 "Option 5"
            style(
                Width = "7em",
                Control(
                    Type = "Button"
                )
            )
    };

as you can see we have a standard categorical question and we have changed each element style to a button. We have also set the width of each button to make the menu uniform. We also need to make a page for our menu to sit in , so add this metadata also,

    pMainMenu ""
    page(
        MainMenu,
        Message
    );

On our page we will also add our message info item. This item will be used to display our content, but more on that in our next article. Next we need to add some routing. We will place the code we need before our Functions section ,

' **************
' ************** Menu Section
' **************

pMainMenu:

MainMenu.Style.Columns = 10

IOM.Navigations.Remove(navigationtypes.nvNext)
IOM.Navigations.Remove(navigationtypes.nvStop)
IOM.Navigations.Remove(navigationtypes.nvPrev)

pMainMenu.ask()
		

First off we need a bookmark, the idea of this label is to allow our menu system to loop around the options. Next we set the number of columns for out menu question. I always make this number greater than the number of options, that way if I add more options I don’t have to change that bit of code again. Next and because this is the navigation system I remove the navigation buttons. Our menu , because its categories have a type of button will submit the page when they are clicked so we don’t need the normal buttons. We then ask the menu page question.

		
	Select Case MainMenu

		Case = {mExit}		
			Goto EndOfSurvey
		Case = {mOption1}
			message.Label.Inserts["MESSAGE"] = "<h1>Option 1</h1>"
		Case = {mOption2}
			message.Label.Inserts["MESSAGE"] = "<h1>Option 2</h1>"		
		Case = {mOption3}
			message.Label.Inserts["MESSAGE"] = "<h1>Option 3</h1>"
		Case = {mOption4}
			message.Label.Inserts["MESSAGE"] = "<h1>Option 4</h1>"		
		Case = {mOption5}
			message.Label.Inserts["MESSAGE"] = "<h1>Option 5</h1>"		

	End Select
	
	Goto pMainMenu
	
 EndOfSurvey:

' **************
' ************** Functions Section
' **************

Once we have asked the page we need to capture and act on the results , the easiest way to do this is with a Select case statement and from this code you should see that when you click a certain option you will either jump back to the bookmark we created earlier or we will exit the survey. So once you have all this working you should be able to click the buttons and the content of message item will be changed depending on what you click on.

So how do we make a sub menu , well lets create the menu metadata,

    Option1Menu ""
    categorical [0..1]
    {
        mBack "Back"
            style(
                Width = "7em",
                Control(
                    Type = "Button"
                )
            ),
        mOption1_OptionA "Option A"
            style(
                Width = "7em",
                Control(
                    Type = "Button"
                )
            ),
        mOption1_OptionB "Option B"
            style(
                Width = "7em",
                Control(
                    Type = "Button"
                )
            )
    };

the page for the menu,

    pOption1Menu ""
    page(
        Option1Menu,
        Message
    );

now we have the metadata we need to add the routing. This we place inside the existing select case statement,


		Case = {mOption1}
			message.Label.Inserts["MESSAGE"] = "<h1>Sub Menu</h1>"
'***********************************************
			pOption1Menu:
					
					Option1Menu.Style.Columns = 10
					pOption1Menu.ask()
							
						Select Case Option1Menu
					
							Case = {mBack}		
								Goto pMainMenu
							Case = {mOption1_OptionA}
								message.Label.Inserts["MESSAGE"] = "<h1>Option A</h1>"
							Case = {mOption1_OptionB}
								message.Label.Inserts["MESSAGE"] = "<h1>Option B</h1>"		
				
						End Select
						
						Goto pOption1Menu
'***********************************************
		Case = {mOption2}
	

You will notice that this new code is realy just the same as the previous code , but the thing i would like to mention it the use of the comments. Trust me , comment the sub menu sections so you can see the whole sub section code easily , because the code , as you add more features can become hard to follow. When you have all the code in place you should see something similiar to these,

First Page
Select option 3
Selection of option 2
Sub Menu

Leave a Comment

%d bloggers like this: