To coincide with the Dexterity Fundamentals training bootcamp that is starting today in San Antonio, Texas, USA, here is a cheat list for creating window layouts that match the Microsoft Dynamics GP user interface standards.
The documentation of the user interface standards uses mathematical formulas to tell you where fields should be located. It is much simpler to use the tips in this article with the grid and offsets instead of the formulas. This article is relevant for working with Dexterity or Modifier.
All of the following tips are based on Dexterity being configured with the standard settings for the grid and the grid being enabled in the layout editor. The grid should be set to a Grid Height of 19 and Grid Width of 16. This means that fields of height 20 will be laid out with the top and bottom edges overlapping to create a single line. The Grid settings are on the General tab of the Options window (Edit >> Options).
In the Layout Editor make sure that the Grid is enabled on the Layout menu. The options Show Grid and Show Field Names are optional. I prefer them both unselected so that the window in layout mode more closely resembles how it will look when the code is running.
Note: If you do wish to enable Show Grid, at least select Grid to Back to put the grid behind fields on the window.
Mouse versus Keyboard
Using the mouse to move fields around moves the fields one grid at a time. You can select multiple fields using Shift or Control clicks, or by drawing a lasso line around them. Only fields fully surrounded by the lasso line will be selected.
Using the arrow keys on keyboard to move fields around moves the fields one pixel at a time and should NOT be used unless intentionally moving the field off the grid or resizing a field.
You can use Shift and an arrow key to make a field one pixel bigger in that direction. You can use Control and an arrow key to make a field one pixel smaller in that direction. So, Shift-Right Arrow can be reversed with Control-Left Arrow.
You can use Control-I (or Layout menu >> Align to Grid), to move the selected fields back to the grid.
Use the Align Tools (Toolbox >> Arrange tab) to align fields added to existing windows when the original window has fields off the grid.
The Align Tools has a Size to Default button if you want to restore a field to the size it had when dragged onto the layout.
Creating Windows
When a window is first created in Dexterity, it is not aligned to the grid. So immediately after adding the window, just grab the bottom right corner and resize it to align with the grid.
It is also best practice to enter in the window properties, such as Name, Title, WindowType, and ControlArea. Before adding any fields, close the window and save and click OK on the Form Definition. You can then reopen the form and window and continue with the layout. This will ensure that the window layout has been saved and minimize the chances of losing any work on the window.
Closing and re-opening after enabling the ControlArea option will also make sure that the grid aligns correctly when the Toolbar is added.
The window should be sized to fit all the desired fields but also try to stay within a maximum size of 800 x 600 pixels. This helps ensure compatibility with lower resolution displays or when a high DPI percentage is used on a higher resolution display. See this article for how to fix Scaling issues on High DPI monitors:
Adding Fields
When Adding Fields, the usual process is to add the fields first and add the prompts afterwards. So, as you add the fields make sure to leave space for the prompts to the left of the fields.
Add the fields in the order you want the tab sequence to be, this will minimize changes needed when setting the final tab sequence.
If adding two fields next to each other, there will be a double thick vertical line between them. Select the left-hand field and type Shift-Right Arrow to make the field one pixel wider. Do not move the right-hand field left as that would take it off grid.
Make sure Prompts leave at least a quarter of the space blank. This will make the fields look less cramped and leave space for a longer prompt if the dictionary is ever translated into another language and needs more space for the translated wording.
Make sure the Prompts are all dragged out to the full width and set to Appearance: 3D Highlight and Border: True.
Make sure there are no grid spaces around the outer edge of the window and that there is only one grid space between sections and columns.
Adding Checkboxes
Checkboxes should always be moved 3 pixels to the right of grid when dragged onto the window. Press the Right Arrow key 3 times.
If the Checkbox does not have a prompt built in, and one is being added and linked manually, the prompt can stay on the grid, but make sure the checkbox is dragged out to the desired width and the prompt is dragged out to match.
When there is a separate prompt, it is recommended to change BackColor: Transparent for the prompt.
Adding Radio Buttons
When adding Radio buttons, always drag out the Radio Group first and size it to approximately what is needed. The Radio Group will be one pixel too small vertically, so press the Shift-Down Arrow key to expand it one pixel.
Then drag out the Radio Button fields in the order you want them displayed. This will ensure the correct tab sequence of Radio Group, followed by Radio Buttons. The first Radio Button will have the value of zero and the other Radio Buttons will increment by one.
As you drag out each Radio Button, press the Right Arrow key 3 times to move it 3 pixels right of grid, as we did for the checkboxes.
Adding Horizontal Lines
When adding a horizontal line for the full width of a window, start from as close to the left edge as possible and drag the line across the full width of the window.
Then use the Left Arrow key to move it as far left as it can go. While still selected press Shift-Right Arrow 3 times to increase its width by 3 pixels. This will ensure the line is the full width of the window.
Then press the Up Arrow 10 times to move it to mid grid. This will also cover the black line under the Window Control Area for the Toolbar.
If necessary, use the mouse to add extra grid widths to the line.
Adding Toolbar Buttons
Enabling Layout >> Show Field Names when adding Toolbar Buttons can make it easier as you will be able to see the borders of the buttons.
Drag the button into the Window Control Area and use the left and right arrows to ensure the first button is as far left as it can go and that there is a 2-pixel gap between each button.
As each button is dragged out, change the properties Appearance: 3D Highlight and BackColor: System – Toolbar.
Buttons should be a minimum width of 72 and can be expanded for wider text one grid space at a time.
To the right of each button there should be a vertical line with the properties: Position-Top: 3 and Size-Height: 16. Create the vertical lines needed in a space to the right of the window below the window control area. Then select all of the lines and change their Top and Height properties. Then place each one close to the gap between the buttons and use the Left Arrow and Right Arrow keys to position 1 pixel to the right of each button.
Remember to make buttons like Clear and Delete Hyperspace: True so they can be clicked on without gaining focus and forcing the currently selected field to validate.
Disable Layout >> Show Field Names, if you enabled it.
Adding Additional Navigation Buttons
Additional Navigation buttons should be placed at the bottom of the window on the right-hand side.
The buttons should be moved 4 pixels left of grid, so press Left Arrow 4 times while they are selected.
Buttons should be a minimum width of 72 and can be expanded for wider text one grid space at a time.
Adding Arrays
You can drag out an entire array in one go if you hold the Control key on the keyboard as you drag out the field. The elements of the array will be tiled underneath the field you dragged out.
While the fields are still selected press Control-I to align to the grid. You can then use the mouse to close any gaps created if the nearest grid is below.
Adding Scrolling Windows
The fields for a scrolling window are added inside the scrolling window (double click to open). Layout the fields as desired. Drag them out in the order of the tab sequence you desire.
Once the fields are laid out, draw horizontal lines underneath the fields for each line of the scrolling window. Use Shift-Right Arrow 3 times to make the line 3 pixels wider to ensure it covers the full width of the scrolling window. As each line is drawn, change the property Appearance: 2D Border.
Draw vertical lines between each field. As each line is drawn, change the property Appearance: 2D Border. Make sure that each line is only 20 pixels (1 field) high. Use two lines rather than making a vertical line taller.
Once all the lines are drawn, select all the fields and change the property Border: False.
When setting Small Line Item and Big Line Item from the Tools menu, don’t try and click on the line, instead click in the middle (vertically) of the field you want the Line Item to fall below.
Headings for a scrolling window are created on the parent window using Prompts and setting the following properties; Border: True, BackColor: System – List Header2, FontColor: System – List Header2 Text. Double thick borders between the fields are fixed by using Shift-Right Arrow on the left-hand prompt.
Using drawn lines rather than field borders makes the lines show on the entire scrolling window and not just lines where records are displayed.
Adding Fields with Hidden Buttons
Add the fields first and set the properties as appropriate. Then drag out the buttons and use the Align Tools (Toolbox >> Arrange tab) to make the buttons the same size as the fields they are covering. Set the appropriate properties on the hidden buttons.
Dragging out the hidden buttons after the fields will place the hidden buttons on top, so the change script can be easily edited by double clicking on the button.
Using the Align Tools
Note: There is no “undo” when using the Align Tools (Toolbox >> Arrange tab). It is recommended to close and save the layout window before using the Align Tools. You can then reopen the layout window and continue. If you make a mistake, you can close the layout window without saving to go back to the last save.
Setting the Tab Sequence
Check the Tab Sequence for all windows, including inside scrolling windows.
If you need to change the tab sequence of overlaid fields, such as a Radio Group and Radio Buttons, temporarily move the fields so they are not overlaid. Don’t forget to return them to the correct positions after setting the Tab Sequence.
Select Layout >> Tab Sequence and the first field in the sequence will be highlighted. If it is not the correct field, double click on the correct field to change it. Then press the Tab key. Repeat this process, double clicking to make changes any time it goes to the wrong field as you tab through the sequence.
Shift-Tab can be used to move backwards through the sequence.
The sequence should go down the fields (and across fields on the same line) to the end of the section. If there are multiple columns, it can then go to next column to the end of the section. Then it should continue back at the first column for the next section and repeat. Once the sequence has gone through all data entry fields, it should include the toolbar buttons and then additional navigation buttons.
Select Layout >> Tab Sequence once completed to exit tab sequence mode.
Any fields that should not be in the tab sequence can be removed using the property; TabStop: false.
Note: If you enter tab sequence mode and then just double click on all the fields without using the Tab key, you will effectively reverse the tab sequence from your desired result.
Other Steps
Make sure to link all the fields to their prompts: Tools >> Link Prompts. Drag from field to prompt.
Make sure to link all the fields to their lookups: Tools >> Link Lookup. Drag from field to Lookup button.
Make sure to link all the numeric fields to their format selector: Tools >> Link Format Selector. Drag from field to integer field or list field.
Position the window away from the top left corner, use Layout >> Position window, move the window to the desired location and click OK.
More Information
The documentation for the user interface standards can be found in Appendix F of the Dexterity – Basics training materials (see Training Links).
Hope you find this list of quick tips useful.
David
This article was originally posted on http://www.winthropdc.com/blog.