Tools-Screen Designer
The Screen Designer is a powerful program that allows you to set the display for screens throughout the system. For example, you might want the Product Properties screen to display a certain way for all of the users in the store. You set that display here in the Screen Designer.
Note: |
What you set in the Screen Designer is system wide and is not user definable. Once you set up the display for a program (such as Product Properties), it will be the same for every user in the store. If you want to alter the display at a later time, though, you can come back into the Screen Designer and make the changes you want. |
To access the Screen Designer:
Select Tools from the [i] Merchant Desktop. A submenu appears.
From this submenu, select Administration-Designers-Screen Designer. The Screen Designer window appears.
At this point, you need to open the Screen Designer and select which program and, if applicable, which industry you want to work with.
Select File at the top left of the window. A submenu appears.
To open the Screen Designer, select Open from Database. Another submenu appears. This menu lists the programs for which you can define the display using the Screen Designer. Select the program you want to set or alter the display for. If you select Customer Properties, the Screen Designer opens right away. If you select Product Properties, another submenu appears that lists the various industries available. From this submenu, choose the industry you want. (You can and should set up the Screen Designer for each industry you use in your store.) Once that's done, the Screen Designer opens.
One note here. Notice one of the choices available is called "Alternate Product Properties." This is completely optional. Selecting this opens another submenu, and from this menu, you need to choose an industry. What you are defining here is different from the basic Properties mentioned in the above paragraph. The Alternate Properties allow you the chance to create a more detailed Properties screen for the industry you select.
Then, when you are in Product Properties for the industry in question, you can toggle back and forth between the basic and the alternate Properties views. This gives you the flexibility to create a more basic form and a more advanced, detailed alternate form for each industry's Properties page.
The Product Viewer selection also calls up a submenu. From this submenu, select the module you want to open the Screen Designer for.
Note: |
Two of the selections on the submenu give you a choice, once selected, to use either the standard design for the screen in question (designed ahead of time, canned within the [i] Merchant system) or the user-designed screen. You can work on the screen as you wish but still elect to check the Standard design option beneath the Design Default menu option. This will keep the design created by Computac. Or you can check the User Design option, telling the system to use the screen you have designed. The two options that allow this choice are: Purchase Order Product and Receiving Detail. You can either design (and use your design for--the User Design option) the product detail area for both of these programs (or one of them), or leave the product detail area as is (Standard design option). |
Whether creating a basic Properties page or an Alternate one, there are two distinct aspects in the Screen Designer: the work screen, where you set the display for the program screen you are working with (for example, Product Properties) by arranging different fields; and the Palette, where you select which fields you want displayed on the screen.
Note: |
Computac will have a default Screen Designer in place for several of the programs defined by the Screen Designer, complete with work screen and Palette. From this point, you can alter the Screen Designer any way you want. |
Since the Palette is where you choose which fields you want displayed on the selected program screen (and for the selected industry, if applicable), let's start there. The Palette is a long, narrow rectangle that displays on the right side of your screen when you open the Screen Designer. If you are working in the Screen Designer for a program attached to industries, such as Product Properties, the choices in the Palette are the same for each industry. However, the Palette choices will be different among different programs--for example, the Palette choices for Product Properties will differ from the Palette choices for Customer Properties.
You can place as many selections from the Palette onto the work screen as you want. Always keep in mind, the Screen Designer work screen will reflect how the selected program screen (such as Product Properties) will display for (if applicable) the selected industry.
To select something from the Palette:
Use the scroll bar at the right side of the Palette to scroll through the options.
Click on the option you want.
Drag it onto the Screen Designer work screen. Place it wherever you want on the work screen.
Note: |
If at a later point you want to move the selection to another spot on the work screen, you can do that simply by grabbing the selected field and dragging it to the desired spot. You know you have the entire field selected for dragging when you have the cursor over it and the cursor turns into a cross with arrows. You can also resize individual fields by placing the cursor either on the left edge or right edge of a field. You will see the cursor turn into a horizontal line with arrows. At this point, make the field wider or more narrow. |
Repeat this process until you have all of the desired options from the Palette on the work screen.
Please take note of two kinds of options in the Palette: _Code and _Field options. There are several of these. For example, CA_Code2, Cust_Code3, PD _Field3, PD_Field4, and so on (depending on which program you are working on--Customer Properties or something else--the letters before the _ will be different--CA and Cust for Customer Properties, PD and Prod for all other programs). These are user-definable fields. You can drag them onto the work screen and then rename them to whatever you want and use them for whatever you want. This gives you increased flexibility. For example, let's say you want to create a field called "Monday Specials" and move it onto the General Merchandise Product Properties screen. Simply drag one of the PD_Fields onto the Screen Designer work screen, right click on the field, and rename it to "Monday Specials."
There is an important distinction between _Code and _Field options. They are both designed for you to rename them, but one is attached to codes and one is free-form. The _Code fields are code-driven. The selections within these fields must be attached to a valid code. For example, Book Class would be code-driven. The description of a Book Class might be Bound Copy, and the code might be BC. When you drag a _Code option onto the work screen, a pulldown arrow displays on the right side of the field. When you access this field from the program screen (i.e., Customer Properties screen, Product Properties screen, etc.), clicking on this arrow will create a dropdown menu from which you can choose a selection. Each selection has a code attached. (For example, Store Number is code-driven.)
_Field options are free-form. They have no codes attached and have no lookup windows. Therefore, no dropdown arrows will display at the right of these fields. When creating a free-form field, simply name it what you want. You will not need to attach it to any existing valid codes.
Once you drag a Palette field option onto the work screen, you can view the properties of the field or delete it from the work screen. To do either:
Right click on the field. A menu appears.
To delete the field, select Delete from the menu. It is deleted. If you want to add it to the work screen at a later point, simply drag it onto the work screen from the Palette.
To view the Properties box for the field, select Properties from the menu. The Properties box appears.
The Properties box is split into two sections: Window Properties and Field Properties. The Windows Properties has to do with where the field is displayed on the screen. Much of this you can essentially ignore. It is strictly informational. Location X and Location Y tell you exactly where in the window the field is. The Displayed Width tells you just that--the displayed width of the field. Generally, you will never need to adjust this.
The Tab Order tells you the Tab sequence for the selected field. In other words, if the Tab Order is 2, then you will hit the Tab key once to arrive at this field (Tab Order 1 would represent the first Tab field). The way the fields are displayed on the screen does not necessarily coincide with the Tab Order. Remember, you can move fields all over the work screen. So, for example, maybe you move the field with a Tab Order of 2 to the lower right corner of the screen. In this example, if you hit the Tab key once, the cursor will jump all the way to this field, even though it is in the lower right corner. If you do not like the Tab sequencing, you can always adjust the Tab Orders for the fields on your work screen.
Note: |
Tab Orders are a little different when dealing with grouped fields. An explanation of grouping fields is provided below. |
The Use Short Caption line refers to the Field Properties section of the Properties box. In the Field Properties section, you will define a Caption for the field as well as a Short Caption. If you check the Use Short Caption box here, the Short Caption for the selected field will display on the program screen you are defining (such as Customer Properties or Product Properties).
The Display Code Only line applies only to fields that are attached to codes. If they are not attached to codes, this will be grayed out. If active, you can check the Display Code Only box if you want. If you check it, the description in the field on the program screen you are defining will display the code for the field rather than the description. For example, if you wanted to have the code displayed for the Store Number field, the value in the field would only display the code: so, for Store 1, the field would display the code (most likely, 1) rather than the description for Store 1 (which might be Main Street Books, or Johnson's Hardware, etc.).
The Field Properties section in the lower half of the Properties box deals with the field itself. The first two lines here--Caption and Short Caption--are used for naming the selected field from the Palette. The Caption is the regular name. The Short Caption, an optional line, is used as an abbreviated name. The Caption defaults to the name as it is presented in the Palette. If you want to change it, this is the place to do it.
Note: |
When you set or change any of the Field Properties, you change them throughout the [i] Merchant system. If you set the caption for a field as "Retail Price," for example, it will display as "Retail Price" throughout the system. |
Note: |
Though the Short Caption line is optional, we highly recommend that you fill it in, even if you do not plan to use it here. Not all forms and programs are user-definable in [i] Merchant. Some of the ones that are not will automatically display the Short Caption for fields. |
You may or may not be able to alter the other portions of the Field Properties section. If not, they will be grayed out. If they are not grayed out, you can alter them. The main field of consequence in this section is the Max data size field. If active, you may define the maximum number of characters the selected field can contain.
If you check the Numeric Only box, the selected field can only include numerals. No alpha characters will be permitted.
At the very bottom of the Field Properties window, there is a "Required" box. If you check this box, the field in question will be required to be filled in. If unchecked, the field is allowed to be left blank.
Once you are through setting up or altering the Properties box, click on the Save button in the upper right corner of the window. Review or change the Properties for as many fields on the work screen as you want.
While you can drag Palette options onto the work screen individually, you can also group them. Take note of two options at the top of the Palette: Group Box and Tab Control. These two options are entirely optional, but you may want to take advantage of them.
The Group Box lets you put several fields together inside one well-defined boundary. When you select the Group Box from the Palette, it is just a blank box. Fill it in with individual fields selected from the Palette.
Note: |
You can put as many Group Boxes onto the work screen as you want. Additionally, you can have any individual field appear on the work screen more than once, if you want. For example, you can have the Store Number field appear in the Group Box as well as outside the Group Box. You have complete control to set up the work screen any way you want. |
The main advantages of the Group Box are visual and organizational. The Group Box itself has a clearly defined outside border, so every field you put in there is surrounded by the same border. This, in essence, groups several fields together, and that is a visual theme you might want to take advantage of. Organizationally, you can move the Group Box around the work screen, just as you can move individual fields. When you move the Group Box, all of the fields inside of it get carried with it. This is a nice convenience. You can also move individual fields' positions within the Group Box itself.
Move the Group Box the same way you move individual fields:
Place the cursor over the Group Box (making sure not to place it over one of the individual fields within the Group Box) until it becomes a cross with arrows. Then move the Group Box.
Resize the Group Box by placing the cursor over one of its edges until the cursor becomes a horizontal line with arrows. Then make the Group Box wider or more narrow.
To delete a Group Box (and therefore all of the fields inside of it):
Right click inside of the Group Box (making sure not to place the cursor over any of the individual fields inside of it) and then select Delete from the menu. You can also delete an individual field within a Group Box. Simply right click over the individual field and select Delete from the menu that appears. Just that field will be deleted.
To view the Properties box for the Group Box:
Right click inside of the Group Box (making sure not to place the cursor over any of the individual fields inside of it) and then select Properties from the menu. The Properties box appears for the Group Box.
The Properties box for the Group Box looks a little different from the way it appears for individual fields, but the fields within it work the same way. Inside the Properties box, fill in the Name line if you want the Group Box to have a name. The name will appear at the top left corner of the Group Box.
Note the Tab Order within the Properties box. This works the same way as it does for individual fields except it pertains to the Group Box as a whole. So, if the Tab Order for a Group Box is 1, then the cursor defaults to the Group Box when you open the Product Properties screen for the selected industry. If it is 2, then when you hit Tab once, the cursor will go to the Group Box.
After making alterations inside the Properties box, click on the Save button inside of the Properties box.
To change the color of the Group Box's background:
Right click inside of the Group Box (making sure not to place the cursor over any of the individual fields inside of it) and then select Color from the menu that appears. The Color box appears. Simply select the color you want and then click on OK at the bottom of the Color box. (You can also use the Custom Colors option at the bottom of the Color box, if you wish. In your spare time, you may want to experiment with Custom Colors.) The new color will immediately display in the Group Box. Experiment as many times as you want, but just be sure that the background color stands out sufficiently from the material in the foreground or else that material will be invisible to the eye. If you want to get rid of color, select No Color from the menu after right-clicking inside the Group Box, and the background color will disappear, replaced by the default gunmetal gray.
Note:
To view the Properties box for an individual field within a Group Box, right click directly over the field. In the menu that displays, select Properties. The Properties box will appear for the selected field.
Individual fields within Group Boxes have Tab Orders that pertain to their position inside the Group Box. If you have five fields within the Group Box, each field will have a different Tab Order. Keep in mind, these Tab Orders only pertain to the fields' Tab Orders within the Group Box. So if a field within a Group Box has a Tab Order of 5, it is the 5th Tab sequence within the Group Box. The Group Box itself, as a whole, will have its own Tab Order. And another individual field located outside of the Group Box will have a Tab Order of 5 (if there are at least five fields on the work screen, including the Group Box as a whole).
Another way you can group individual fields together is to place them inside of a Tab Control box. This is very similar to a Group Box, but it provides you with an added layer. It is similar to the Group Box in that it has a defined area within which you can place individual fields. What is different is that you can create as many layers of groupings within a Tab Control box as you want.
To create a layer:
Right click inside of the Tab Control box (making sure the cursor is not hovering over an individual field within the Tab Control box). In addition to the standard Delete and Properties choices, a third choice--Add--will be on the menu.
Select Add. The Properties box appears.
Key in a name for the new layer, then click on Save at the bottom of the Properties box. A new layer has been added to the Tab Control box. It will display in the upper left corner of the Tab Control box, and it will have the name you just assigned it.
Once you create a new layer, you can drag individual fields into the Tab Control box for that layer. Select the layer you want by clicking on it in the upper left corner of the Tab Control box. When a layer is selected in the upper left corner, it is raised a little higher than the layer names beside it.
You can create as many layers as you want. This gives you tremendous flexibility. Any time you want to change any aspect of an existing layer, simply select it by clicking on it in the upper left corner of the Tab Control box. Then right click within the Tab Control box to access the Properties box for that layer and make adjustments there, if desired, or to change the background color, as you explained above. Or move individual fields around (or add new fields or delete existing ones) within the Tab Control box for the selected layer.
After setting the Screen Designer template, you may want to save the screen to a separate file. By doing this, you have not yet accepted the changes into [i] Merchant. Until you are certain you have the Screen Designer the way you want it, this is a recommended approach.
To save your Screen Designer template to another file outside of [i] Merchant:
Select File from the top left corner of the Screen Designer. A menu appears.
Select Save to XML. A dialog box opens, allowing you to save the template you just created to your PC. Go ahead and save it to a location on your PC of your choosing.
Later, once you are sure you want to use this template, you can go back in to the Screen Designer program, select the appropriate program and, if applicable, industry, and then access the file. To do this:
Select File from the top left corner of the Screen Designer. A menu appears.
Select Open from XML. A dialog box opens, allowing you to open the template you saved to your PC earlier. Once you open the file, it automatically is brought back to your Screen Designer screen.
At this point, once you know you want to adopt this template for the selected industry, select File from the top left corner of the Screen Designer.
From the menu, select Save to Database. The template is saved within [i] Merchant.
There is also a Save As function for the Product Propertes and Product Viewer Screen Designer menus. In the Product Properties Screen Designer, it is under File-Save as Alternate Product Properties. This will save the template you are working on as the Alternate Product Properties template. In the Product Viewer, the Save As option allows you to select another module, saving the template you are working on to that other module. At that point, you can tweak the Saved As template for the other module as needed.
Once you are finished setting up the Screen Designer template for a particular program and, if applicable, industry, go ahead and create templates for the remaining programs and industries that apply to your store.