Working with Panels

The following examples show how a panel is prepared and created. A panel can have anything from a simple setup to a complex one. Simple panels use only Button pad controls when more complex panels use many types of controls.

Example - A semi-simple panel: The #NUMPAD panel

Example - a complex panel: The #POS panel

The examples exist in the Demo Data.

Example - A semi-simple panel: The #NUMPAD panel

The #NUMPAD Panel is the panel that is widely used in the POS. This panel is an example where two types of controls are used, button pad and input controls.

Step 1

  • Define the parts needed for this panel.
  • Two parts: the message text and the buttons:

  • Define the information needed for each part:
    • A menu which displays the Information text.
    • A menu with Yes and No buttons.
  • Give each part a number.
  • Part 1: Information text.
  • Part 2: A menu with Yes and No buttons
  • Four parts:
    • Title
    • Input
    • Number buttons
    • Command buttons

  • Define the information needed for each part:
    • Title, the system automatically puts in the text, depending on the command using the panel
    • Input part, users must be able to put in their quantity.
    • Since the POS is usually a touch screen, you need to be able to use buttons to enter the input.
    • Commands that the user is able to use in this operation.
  • Give each part a number:
    • Part 1 for the Title.
    • Part 2 for the Input.
    • Part 3 for the Number buttons.
    • Part 4 for the Command buttons.

Step 2

  • Divide the panel into rows and columns, depending on the defined parts:
    • 2 columns
    • 3 rows
  • Give each column and row a number:
  • Define the size of the panel;
    • Decide the size of the panel, is it a full-screen panel or not?
    • The panel below is not a full-screen one, so you must specify its size, length, and width.

Step 3

  • Create the panel for the Interface Profile you want it to be in.
  • Fill out the fields for General FastTab:
    • Give the panel a Control ID: #NUMPAD.
    • Fill in the number of columns and rows, 2 and 3.
    • Fill in the Width and Height for the panel, in this example the value is %, 35% for the width and 60% for the height:

  • Fill in the fields in the POS Panel Row/Column List FastTab:
    • You see as many columns and rows as were entered in the General FastTab.
    • Look at the Size Type for each column. There are different options, an ideal one to use here Percent.
    • Fill out Size for the columns and rows as needed and as fits your setup.
  • The POS Panel Control Lines FastTab:
    • Fill in your lines, one line per part.
    • You set the line number example 1, 2, 3 , 4 and so on. In the example there are 4 lines since there are 4 parts.
    • Put the parts into the correct column and row.
    • For this example, you have to look at the Column Span since the first two lines span two columns.
    • Control Type, here you are looking at the controls that belong to Interface Profile.
    • Control Type Button Pad is for the menus.
    • Control Type Input is for the input field.
    • The top part of the panel where the text is displayed. Here you can see this is a Button Pad and it is linked with a menu with ID #NUMPADTITL. This menu is set up with one button and it is the program that takes care of putting in a correct header into this field: when you change quantity, the title is Change qty, when you enter discount, the title is Disc. %, and so on.

Example - a complex panel: The #POS panel

The #POS Panel for Store S0001 with #FASHION2 Interface and Menu profiles looks like this:

Step 1

  • Define the parts needed for this panel.
  • There are eleven parts.
  • Define the information needed for each part and give each part a number:
    • 1 - for the Input.
    • 2 - for the Information message.
    • 3 - for the store’s logo. Images of items can be viewed here as well.
    • 4 - for the Journal.
    • 5 - for the Totals.
    • 6 - for the member/customer information to be displayed.
    • 7 - for the Functions - Main menu.
    • 8 - for a menu.
    • 9 - for another menu, this one changes according to what is selected in menu on area 8.
    • 10 - for the Main menu.
    • 11 - for the Status Bar information.

Step 2

  • Divide the panel into rows and columns depending on the defined parts.
  • 5 columns and 6 rows.
  • Give each column and the row a number.
  • Define the size for the panel; if it is a full- screen panel or not. Note: This panel, the #POS, is usually a full-screen panel
  • Check if some parts span more than one column or row:
    • In this setup
      • Part 1 spans 3 columns
      • Part 2 spans 3 columns
      • Part 4 spans 3 columns
      • Part 7 spans 3 columns
      • Part 8 spans 2 rows
      • Part 9 spans 2 rows
      • Part 10 spans 3 columns
      • Part 11 spans 5 columns or all the columns.

Tip: It can be a good idea to print out the layout of the panel and make lines for the needed columns and rows so it will be easy to define each area of the panel.

Step 3

  • Create the panel for the Interface Profile.
  • Select the Interface Profile ##FASHION2 since this is its POS panel.
  • Fill out the fields in the General FastTab.
  • Give the panel a Control ID: #POS.
  • Fill in number of columns and rows, 5 columns and 6 rows.
  • This is a full-screen panel so nothing needs to be entered for the size.
  • Fill in the POS Panel Row/Column List.
    • Five column lines and six row lines with Size as is in the below image.
    • Specify Percent as Size Type as for all lines.
  • Figure out the percent size by measuring the size of the parts and convert the size to percentage.
  • Fill in the POS Panel Control Lines.
  • Eleven lines in total.
  • See the how the lines are filled out in the below picture.

 

Part Control Type Control ID Comment
1 Input #CURRINPUT The #CURRINPUT Input Control is used here.
This is a field which the user fills out, enters information for the sale.
The #CURRINPUT should only be used in the #POS panel.
2 Button pad #POSINFO The Button Pad calls the menu POSINFO which has two menu lines with tags to display the information lines.
3 Media #ITEMPICTURE Area to display the logo/item picture for the active item line.

Media Control #ITEMPICTURE. #ITEMPICTURE is a fixed name for the store's logo to be displayed in the POS. The store's logo is set up with the Store.
This Media Control can also display the item’s retail image, if it exists, but then the terminal in use must have the Show Item Pictures check box selected.

Note:In cases where an item does not have a picture, the logo is displayed.

4 Data Grid #JOURNALGRID The Data Grid #JOURNALGRID is specifically designed for the POS Journal Lines.
How the journal lines are displayed is controlled with the #SL font and skin lines.
The look of the Journal Header is controlled with the skin and font setup defined in the data grid.
5 Button pad POSTOTALS The menu POSTOTAL has menu lines with tags to display the POS amounts.
6 Button Pad MEMBERCUSTINFO A menu to display information for the member/customer when it is in the sale. When there is no member or customer in the sale, this area is empty (white).
7 Button pad #ADDMENU3 The #ADDMENUs are fixed names for menus in the POS. As you can see in the POS Panel Control Lines, the Control Assigm. fields are empty.

The #ADDMENUS are fixed names and exists in these 3 versions. The menu that is actually used with these menus is then put in with the active Menu Profile, there you find fields for the #ADDMENUs. The POS then uses POS Command MENU1, MENU2 and MENU3 to populate the menus when defined.

8 Button pad #ADDMENU1
9 Button pad #ADDMENU2
10 Button pad #MAIN The Button Pad #MAIN has no control assignment as most Button Pads do. This Button Pad is fixed and works with the Panel #MAIN, which is fixed as well. The menus displayed in this space are the ones that are set up for the active Menu Profile.

The POS can then use the POS Command MENU to populate the buttons for the main menu area when defined.

11 Button pad STATUSBAR The menu STATUSBAR.
This menu has many columns and one row.