View source for SM Tutorial 1: A One Page Static Menu

=Introduction=

In this survey we shall build a survey that can act as the default front menu page for your surveymanager organisation.  You have seen this in the demo examples.  Remember, we are only building the "appearance of the survey", the content of the questions/menus and headings is up to you.  This presentation is suitable for an anonymous entry point (as you can force a login to each survey.  You could combine it with the cool blue look to get a blue page instead. It is easy to change the colouring and fonts etc to suite your needs.


The survey includes a number of interesting features, like surveys within surveys, and display of random news messages, using the built-in surveymanager news engine, and floating help prompts at the bottom of the page as you mouse over the buttons.  Each time you refresh the page, the news display changes, and when you click a button a survey is launched that returns to this page when in completes.


This is what it looks like with questions loaded:


[[Image:TutSM2_SurveyExampl1.gif]]


=Getting This Look=



==Stage 1. Making the Main Survey==


Step 1: Create a new survey in one of the BPC SurveyManager clients and call it whatever you like.  If you want this to be the default survey executed if no survey is requested (and no org id is provided), make sure you call it "default" and store it in the "default" organisation.  If you just want it to be the default for an organisation, then store it as "default" in which ever organisation on which you are working.
Step 2: Working in the header section only, past the following into the "Layout-Form Shell" field:

<pre>
<HTML>
<HEAD>
  <#JVScriptLib1>
</HEAD>
<BODY id="pagecontainer" >
  <table width=100% bgcolor="black" >
  <tr>
     <td><table><tr></tr></table></td>
     <td align=center >
        <br ><H1 ><font color="yellow"><#surveyname ></H1><br>
        For Organisation: <#OrgID > (<#orgdescription > )
     </td>
     <td align=center ><#fimage FSRC="/BPCF8aBlackLR.jpg" width="110" height="120" ></td>
  </tr>
  </table>
  <BPCDEBUG >
  <table width="100%" >
    <tr ><td ><font color="red" ><i><#errormessage ></i ></font ></td ></tr >
  </table >
  <table border=1 width="100%" >
  <tr >
    <td colspan=3 >
       <#news OID=default ITM=any height=80 >
    </td >
  </tr >
  <tr >
    <td VALIGN=Top >
      <#SurveyBody SID=MENU2 SIDO=default >
      <#SurveyBody SID=MENU6 SIDO=default >
    </td >
    <td >
      <#SurveyBody SID=MENU3 SIDO=default >
      <#SurveyBody SID=MENU4 SIDO=default >
    </td >
    <td >
      <#SurveyBody SID=MENU5 SIDO=default >
      <#SurveyBody SID=MENU7 SIDO=default >
    </td >
  </tr >
  <tr >
    <td colspan=3 >
       <div name=hintbox id=hintbox ></div>
    </td >
  </tr >
  </table >
  <br><br><hr >
  <BPCDEBUG >
</BODY>
</HTML>
</pre>

Step 3: In the "Layout - Rows" clear any entries.

<pre>

</pre>


Step 4: In the "Survey Properties" tab (or window - depending on the client you are using) delete all entries. 

<pre>

</pre>


Alternatively, you can remove any value for any properties present.


Step 5: (Optional) Replace the FSRC reference in the layout: <#fimage FSRC="/BPCF8aBlackLR.jpg" width="110" height="120" > with the path to your logo/image in the SM database (or change the tag to a conventional image tag with a reference to a logo you have stored at a conventional URL.


Step 6: In the "Survey - Script" tab/window of the header clear any script that is present and in the survey header, set default questions per page to 0.  In other words - this survey has no questions.


This completes the definition of the main menu survey.



==Stage 2.  Making The Menus==


Repeat these steps for each menu survey you referenced in the layout of main menu survey above.

Step 1: Create a new survey in one of the BPC SurveyManager clients and call it "MENU2" (or whatever name(s) you used for your menus).  Change the default "Row Layout Type" to "GRIDTABLE" in the header.
Step 2: Working in the header section only, past the following into the "Layout-Form Shell" field:

<pre>
<table width=100% >
  <tr>
    <td align=center >
      <br ><H1 ><font color="darkred"><#surveyname ></H1><br >
    </td>
  </tr>
</table>
<BPCDEBUG >
<#SurveyBody >
<br><br>
<hr >
<BPCDEBUG >
</pre>

Step 3: In the "Layout - Rows" paste the following:

<pre>
GR_TH=<!- comment >
GR_TR=<tr ><#Question align="center" style="width:100%%" ></tr ><tr ><#OpType align="center" style="width:100%%" ></tr >
GR_TRSTART=<tr ><td style="width:100%" ><table width="100%" >
GR_TREND=</table ></td ></tr >
GR_TTSTART=<table Width="100%" BgColor="white"  >
GR_TTEND=</table >
</pre>


Step 4: In the "Survey Properties" tab (or window - depending on the client you are using) copy and paste the following.  You paste by right clicking on the edge of the grid and choosing paste (If paste is not highlighted, then switch the "row select" on and off in the contect menu and it should enable paste).

<pre>
<smxmlpacket ><survey_propertyQry ><rowset ><OrgID >default</OrgID ><SID >MENU2</SID ><InstanceID >default</InstanceID ><PropertyID >MOHint</PropertyID ><PValue >True</PValue ></rowset >
<rowset ><OrgID >default</OrgID ><SID >MENU2</SID ><InstanceID >default</InstanceID ><PropertyID >MOHintID</PropertyID ><PValue >hintbox</PValue ></rowset >
<rowset ><OrgID >default</OrgID ><SID >MENU2</SID ><InstanceID >default</InstanceID ><PropertyID >NoContinue</PropertyID ><PValue >True</PValue ></rowset >
</survey_propertyQry ></smxmlpacket >
</pre>


Note, that you do not need to edit this packet even if your survey has a different name as the paste function will replace these entries with the right entries for your current survey.


Alternatively, you can enter the properties manually use InstanceID="default" in all cases for each PropertyID:

*MOHint= True
*MOHintID= hintbox
*NoContinue= True


The MO_ properties are used by the BPCSM javascipt library to decide whether to display mouse-over hints, and where to display them.  This is how the mouse-over help is done.
 

Step 5: In the "Survey - Script" tab/window of the header enter "@(.[*])" (minus the quotes) and set the default page size to 1 question.


Step 6: In order to make sense of this menu survey you need to add a single question (as the survey has only one "selectop" question, which causes the button menu to display.  This is really the only tricky bit of this whole survey set up.
(Note - you may want to do Step 7 first, but read this so you know what is going on).

We are going to add a single selection list type question & response, and display it as a vertical list of buttons that launch BPC SurveyManager surveys when clicked. We will call that list "mstart4" - but you can call it anything you like - but use only letters and numbers (and no spaces) in the name.  We will make that list in step 7, but it would really be better if you did that first and then returned to Step 6 after.

* Add a single question with the name of your menu as the text.  In the example it is "Staff Survey Examples".
* Set the input type to "selectop" and the display type to "jsmbutton"
* Set the question properties to:
**ItemFrmt: style="width:100%"
**RadioAln: Vert
* Next set the OpGroupID to "mstart4" or whatever you have defined the selectop group you want to use for the menu to. (Haven't made one yet?  Then read on...)


Step 7:  Making the survey selection list.

The survey selection list can take a number of forms, and the differences depend on how you have set up each survey and the launch mode intended to be used.  At its simplest, the launched survey inherits all the identifying information such as PID, RK and ORGId etc from the launching survey.  So if you accessed the launching survey with a login, or through an invitation, that information will be inherited - unless it is overridden in the launch method.  The jsmbutton is a launch method that assumes you want as much to be inherited as possible.

Go the section of your client that allows you to create selectop lists (this varies depending on which client you are using).

You will need to create one selectop for each button (and therefore survey) you want to  be available in the button menu.  All selectops in the menu will have to share a common selctop group ID (in our example we are calling this "mstart4").  Each selectop will need a unique selectop id (this is normally auto-allocated, but can be done manually as well).

For each slectop you will need to provide:
*OpGroupID (This is the shared group name the links all the selectops into a single group. It should be the same for each member of the select group.)  Eg: "mstart4"
*OpDisplayStr (This is the text displayed on the button)  Eg: "Staff Survey 2003 with Side Menu"
*OpValStr (This is the value ascribed to the selection and in the case of the jsmbutton it is the SurveyID launch string - effectively action performed when you press a menu button) Eg: "Survey001".  Any special launch modes or data you want to override should be added to this entry.  For example, if you want to launch the survey in report mode you might use "Survey001&VOM=report".
*OpVal (This is the numeric value of the option.  It is a good idea to use a unique number, but this item has little importance in this example.)
*OpOrder (This is just the numeric order in which the selectops in the group are displayed.  If it is blank, the opgroupid is used in ascending alpha sort order.)
*OpHintStr (This is the hint that will be used by the mouse over to display in the hintbox defined in the parent survey). Eg: "Show a staff survey with a side menu, popup hints, questions that appear based on reponses to another question and various format changes throughout."


Repeat this for each survey you want to launch from a menu button.  Of course you might be launching the same survey in different modes - data entry, numeric report and graphical report, preview and a variety of others.  You can have exactly the same OpValStr for each selectop - it doesn't matter (although it would be rather pointless).


After you have created and saved your selectop group members, go back to step 6 and make sure you have set the selectop group id to "mstart4" or whatever you called this group. 



This completes the definition of the main/default and submenu surveys.



=Stage 3.  Add Some News=


The built in news engine has an very simple news editor as part of the survey manager library.  It is accessed with the the command: /DoEdNews.  For example if you typed the following into the browser header to bring up the survey manager surveys:

<pre>
http://myorg.com/sm/MySurveyManager1.dll/DoSurvey
</pre>

You would enter the following into your browser:

<pre>
http://myorg.com/sm/MySurveyManager1.dll/DoEdNews
</pre>




=BackLinks=

{{#dpl: linksto={{FULLPAGENAME}} }}