Environment: Web Access 7.4
PLEASE NOTE: This article does not apply to Web Access version 7.5. In Web Access 7.5 a number of software changes were made based on customer feedback regarding the form design. Some form design advice has now been included in the Web Access or New Features manuals for 7.5 under the section "Advice for Web Access window design".
Customers running Web Access on Service Desk version 7.4 have been asking for some design tips for creating Web Access windows. Here is some advice based on the FAQs that have come into the Support teams and how customers have tweaked their designs as a result.
Creating a Web Access window
Before you start you need to ensure that you make your windows available for Web Access. Until you do this you will have no control on how the window is designes and Web Access may just place your attributes in a list on the window. You make a window available by high-lighting the window that you want in Window Manager and clicking the "Make Available in Web Access" action on the action panel. There are also methods to make more than one window available to Web Access. For more details on what this step does and some guidance on which windows to make available, please see the Designer guide here on page 86.
General Design advice
The way in which the windows will display in Web Access is by using a grid concept rather than the absolute positioning of items that is used in console. When designing your windows imagine that there are columns going down and across the screen - like a grid or a table. When organising your windows, if you want controls to line up in the same column then you will need to ensure that they are aligned with each other. If not, the control may be moved out of that column and moved into the next column as the designer believes that you are trying to move that control out of the column. A tip on how to ensure that controls are 100% aligned, and do this automatically, is to highlight the fields in question and then click on the Format option on the toolbar. Then select Align and then desired option (for example Left).
Below is a Web Access form shown with a browser add on which highlights how the grid is formed:
Setting a fixed attribute size
There is an enhancement request on the community which relates to the ability to set a fixed size for attributes. This functionality was improved in version 7.5 so that attributes will size so that they are left and right aligned. If you want to vote on the enhancement it is located here As well as voting, it is always very useful to us if you can add a comment to the enhancement describing how you would ideally like the area of functionality.
There have been reports that the alignment of labels on a window appears inconsistent even when they look to be aligned in Window Manager. This functionality has been improved in version 7.5. Here is an example below of how this could look in Web Access in version 7.4:
The quickest way to improve this in 7.4 is to place the items that you want to align with each other within a group box. By doing so, this is how our example would now look (this example has an extra label in the design which would hold extra text as this is what the particular customer wanted):
Attribute start position within a group box is based on label length
If you place your labels to the left of your fields and then all the labels plus their associated fields that you want aligned within a group box, you will find that your attributes will line up automatically based upon the length of the longest label within the group box. This is done that your labels align automatically and also to allow for the maximum amount of space for the attributes themselves. A customer has reported that they have designed their screens with two group boxes directly below each other and each group box contains labels of a different length. Therefore the alignment of two group boxes below each other will look inconsistent.
Here is an example of how this might look:
If this is a concern, once you know that this alignment is governed by the label length some customers have chosen to ensure that within each group box the longest label is of equal length to other group boxes (same number of characters). Alternatively if appropriate, you could consider splitting your groupboxes with another control inbetween so the difference isn't apparent or placing the groupboxes side by side instead. Here's our example once we have made the longest label length in each group box equal:
Multiline Attributes grow from one line
When you add a non-html multiline string attribute onto a Web Access window, when the window first loads it will show as one line and then as you type into it the box will expand. This is to allow for maximum space on the screen so that multi line attributes not being used in this instance of the window don't fill the window with a blank box. However a customer raised a concern that they felt that this would prove confusing to their end users. There is an enhancement request here that you can vote on if you would prefer that this functionality was altered. As well as voting, it is always very useful to us if you can add a comment to the enhancement describing how you would ideally like the area of functionality.
One way that you could consider working around this is to create a template which populates your multi line field with some text and some carriage returns (ENTER key) to expand the box. If you apply this template to your process shortcut then you will find that the window will always loads with the box pre-populated and expanded. For more information on creating templates please see the Designer Guide. Here's an example of how your multiline attribute might load with this configured:
If you wanted to achieve a similar thing on a window that you cannot set values on from a template (for example your Incident Note window) you could do this via Process Designer. On a deactivated process select your action (for example on the Open status look at Optional Actions - Add Note) and in the Action Instance Data set the value as required:
Here is how this would look:
How to set boolean attributes to show as check boxes instead of drop down lists
Please see this article here for details on how to achieve this.