Note: Knowledge of HTML is highly beneficial to enjoy full control over page layouts. This section assumes the designer has an understanding of HTML.
While the Logo Manager enables you to upload images to appear within the survey, the Page Designer, by contrast, allows you to control the look-and-feel of the page containing the survey. For example if you want to add a custom header and footer to your survey to keep the look-and feel of it consistent with the rest of your Web site, use this form to submit your HTML design. Just be sure to enter @@Content in the HTML, between header and footer, which is where you'll want the Survey form is to be positioned.
The @@Content variable must appear one time for every design and, depending on the version of E-Data Collection you use, the @@Footer variable may also be required.
When loading pages, @@Footer is replaced with the standard E-Data Collection footer.
The Page Designer form is only available to Department Admin users and Survey Publishers (roles that have sufficient rights to manage designs within their respective departments).
The admin URL to Page Layouts is: http://mavalon.webhost4lifemysql.com/EDCv4/admin/Design.aspx (See screenshot on the next page).
Like all resources, you are required to give each new design a unique Name.
Select the Layout Type from the following options: Multi-Purpose, Survey Page, Collection Page, Index Page. The survey engine produces three types of page. When you design layouts you can specify which page type it should apply to. If one design should be used for all types of pages, you can choose to create just Multi-Purpose layout. On the other hand, for greater control over the look-and-feel of each page type, you can create three separate designs, one for each page type: Survey Index, Survey Collection and individual Survey.
Page types and the functionality each provides follows:
- Survey Index: When a department is specified, this page lists all active collections within the department along with collection descriptions.
- Collection Page: When a collection contains more than one survey, this page lists all the available surveys within the selected collection. If only one survey exists, this page will automatically redirect to the one survey contained therein and load it.
- Survey Page: Displays the survey form.
Examples of each of these designs are available through the Help button (icon) beside the Page Layout dropdown list.
Once the Layout Type has been decided upon, it's time to upload the HTML. One method to quickly and easily submit the design is to open a Web browser to the URL of your Web site (which presumably is essentially the same design that shall be applied to the E-Data Collection content pages). With your Web site's page open in a browser, click on Page in the browser's toolbar and select Save As... and save Web Page (HTML Only) to your hard drive.
It is important to note that, no Design resources such as stylesheets, script files or images may be uploaded to E-Data Collection. Therefore, you are required to verify that all references to images and other files have specified Fully Qualified URLs. Thus relative references such as ../images/logonew.gif is not sufficient and must be replaced with the complete URL such as http://www.dotnetgoodies.com/images/logonew.gif.
Once you have created an HTML file that meets the requirements (including the presence of the two required variables -- @@Content and @@Footer), either upload the file or copy the HTML and paste it into the editor in source view.
Aside from the required variables, there are several others that can be used in your design to include other dynamic content. The full list of variables follows:
||Enter this where the page's main content (such as the survey form) ought to go.
||Enter this where you want the standard footer the appear.
||Creates a dropdown list of surveys to choose from.
||Gets the name of the current department.
||Links to the current department's index page.
||Gets the name of the current collection.
||Links to the current collection's main page.
||Get's the current survey's name.
An example of using the above variables would be to create breadcrumbs as seen in the capture to the right. The breadcrumbs at the top of the page are created simply by adding the following to the HTML:
@@DepartmentUrl > @@SurveyGroupUrl > @@SurveyName
(The dropdown list was created by adding the @@List variable to the HTML.)
Follow these important guidelines for using variables:
- All layouts must include one @@Content and one @@Footer variable (and no more than one of each).
- If using the @@List variable, it must precede @@Content (and there must be no more than one @@List variable per layout).
- The @@Content variable must precede the @@Footer variable.
- The @@List option is not available for Department index pages.
If you upload HTML, you MUST wrap your content in <BODY> tags with no attributes specified. In other words if you use <BODY onload="someFunction();">, the layout will not be read. You can optionally add some <HEAD> information; but again, when uploading, the HEAD tag in the uploaded HTML file must not have any attributes; otherwise it will be ignored.
When you upload HTML successfully, the HEAD information will be placed in the first TextArea below the upload control. The BODY (i.e., page content) will be placed in the Rich Text Editor. Note that the changes will not be committed until you have submitted the form.
To Edit the HTML using the Rich Text Editor, click on the toggle source button in the editor toolbar -
To Edit in Full screen mode, click the toggle full screen button in the editor toolbar-
PAGE ELEMENTS & STYLES
When creating a design it is important to pay special attention to Element ID's if, in fact, you assign ID's to your elements. Make sure that they do not conflict with any of the ID's of the dynamically created controls. Furthermore, if you add styles to the HEAD or reference a stylesheet, you will want to make sure that the class names do not conflict with existing styles in the default stylesheet (unless you want to override the style defined therein).
To review all the styles in the default stylesheet, click the Help icon and scroll to the bottom of the help page where the download link is given. An overview of predefined styles follows:
|TEXTAREA||Standard||All||Textarea (multiline textbox) formatting|
|a (Anchor)||Standard||All||Link style|
|PageTitle||Custom||All||Page Title Text (e.g. Survey Group Name for Surveys)|
|SubTitle||Custom||All||Subtitle Text (e.g. Survey Name for surveys)|
|SelectSurveyClass||Custom||Group/Survey ||Title text for Survey dropdownlist|
|SurveyBulletHeader||Custom||Group||Bulleted list items (in list of available or unavailable surveys)|
|arrow||Custom||Group||Bulleted list of surveys (list tag)|
|IndexSectionText||Custom||Index||Section Text (Survey Group description)|
|IndexLink||Custom||Index||Link to Surveys|
|InstructionText||Custom||Survey||Survey instructions (or any other text to appear at the top of the survey)|
|SectionDescription||Custom||Survey||Section Description Text|
|headstyle||Custom||Survey||Matrix Column Group Header|
|valueheader||Custom||Survey||Matrix column Header|
|tdstyle||Custom||Survey||Matrix row header|
|TextOnly||Custom||Survey||Question text for questions with NO responses|
|QuestionText||Custom||Survey||Question text for questions WITH responses (data entry controls)|
|Confirmation||Custom||Survey||Confirmation text formatting.|
|InstructionTitle||Custom||Survey||Instruction Title (title is set in Web.Config, and appears whenever Instruction Text is specified for the survey)|
To apply a layout to the Department's survey index page (which lists all available survey collections and their child surveys, select the desired layout from the Index Layout dropdown list on the Department Manager admin page. (If you are not logged in on with Master Admin account, navigate to this page by clicking on Default Design on the Manage tab's panel.)
To apply a layout to the Survey Group or Survey, navigate to the Survey Builder admin page, by clicking on the Survey Builder link on the Build tab's panel, select either the group or one of its child survey's, select the desired design from the Group Layout or Page Layout dropdown list, and update the resource.
The options in the respective dropdown lists will include the designs that were created specifically for the page type of the element being updated as well as any layout that was created as a Multipurpose Layout. If any designs are available from the [Default] department for the respective page type, those layouts will also be listed along with your department-specific layouts.
When the index page is accessed without specifying a department, a list of all departments is presented with links that direct the user to the selected department's index. The department list page can be formatted with a page layout by specifying the default layout in the Web.Config file in the application's root directory.
The Web application's administrator can follow these steps to apply a layout to the department list:
- Follow the instructions laid out in this section to create layout.
- Open the SQL Database table tbl_Designs in the SQL Server Management console and find the record with the name supplied when creating the layout and note the DesignId.
- Locate and open the Web.Config file found in the Web application's root directory.
- Under the Default Designs comment in the appSettings section, locate and update the MainIndexDesign element with the appropriate DesignId.
- Save the file.
Once completed, the layout should be applied to the department list.