POS Interface Profile

The screenshots utilized in this article are for illustration purposes only. The application can be tailored to meet your specific requirements.

Introduction

A POS Interface Profile is a configuration that controls the graphical layout and user interface of a Point of Sale (POS) system. It determines how various elements, such as buttons, menus, and journal lines, are displayed on the screen. Essentially, it shapes the user experience during transactions. 

1. Steps to create a POS Interface Profile

The steps to create a POS Interface Profile are explained below:

Step 1. Navigate to Home > Retail. Then under the POS Interface & Controls section click on the Interface Profile shortcut. 

This should take you to the Interface Profile List View screen.

Step 2.  Click on the Add Interface Profile button in the top right corner. This will open the New Interface screen. All the settings pertaining to the graphical layout of your POS Terminal can be configured from this screen.

Specify the Interface Profile Name. 

Select the Profile Type from the drop down list. See: Profile Type

Specify the Canvas Width. (In pixels)

Specify the Canvas Height. (In pixels)

Use the Interface Control Template to specify additional controls.

Click the Save button to save the changes and exit the screen. 

The New Interface Profile can be seen listed on the Interface Profile List View screen.

2. Profile Types in iVendNext

iVendNext offers the choice of the following Profile Types:

Interface Profile

This Profile Type controls the overall layout and appearance of the POS interface including the settings for menus, button placements, and visual elements.

Look Up Control

This Profile Type controls the search functionality allowing the users to search for and select specific values or records easily.

Input Form

This Profile Type controls data collection functionality allowing the users to enter information, such as names, emails, or feedback, which can then be processed or stored by a server. Some common key elements include:

• Text fields - For single-line input (e.g., names).

• Text areas - For multi-line input (e.g., comments).

• Checkboxes and Radio buttons - For selecting options.

• Submit buttons - To send the data.

3. New Interface Profile Screen

The various fields in the New Interface Profile screen are explained below: 

Interface Profile Name

This is a text field that allows you to specify the Interface Profile Name

Select Profile Type

This is a drop down field that allows you to select a value from the drop down list. Your options are:

• Interface Profile

• Look Up Control

• Input Form

Display Shell

This is a checkbox field that allows you to decide whether you want the Interface Shell to be displayed or not.

Canvas Width

The canvas width refers to the width of the <canvas> element in HTML, which is used for drawing graphics via JavaScript. This is a text field that allows you to specify the Canvas Width in pixels. The width determines how wide the canvas area will be. If not set, the default width is 300 pixels.

Here are some key points:

Usage: You can define the width directly in the HTML tag, like this: <canvas width="500"></canvas>. This sets the canvas width to 500 pixels.

CSS Influence: To control the visual width using CSS, you can use the style attribute, but remember that changing the CSS width does not affect the drawing surface size unless you also set the width attribute.

Canvas Height

The canvas height refers to the height of the <canvas> element in HTML, which is used for drawing graphics via JavaScript. This is a text field that allows you to specify the Canvas Height in pixels. The height determines how high the canvas area will be. If not set, the default width is 300 pixels.

Here are some key points:

Usage: You can define the height directly in the HTML tag, like this: <canvas height="500"></canvas>. This sets the canvas height to 500 pixels.

CSS Influence: To control the visual width using CSS, you can use the style attribute, but remember that changing the CSS height does not affect the drawing surface size unless you also set the height attribute.

Interface Controls

Using the Interface Controls template you can plan the layout, including buttons, icons, and displays, to enhance usability and accessibility. 

The various field headers in the Interface Control Template are explained below:

S No

Displays the row number.

X

The x-axis is a crucial component, serving as a horizontal number line representing the coordinates on the screen where the control would get rendered.

Y

The y-axis is a crucial component, serving as a vertical number line representing the coordinates on the screen where the control would get rendered.

Width

The width determines how wide the canvas area will be and is displayed in pixels.

Height

The height determines how high the canvas area will be and is displayed in pixels.

Control ID

This is a unique identifier assigned to each control element within the interface. These controls can include buttons, input fields, data grids, and other interactive elements. The Control ID helps the system recognize and manage these elements effectively.

Control ID Type

This is used to identify various control elements. Each of these controls has a unique Control ID to ensure the system can manage and interact with them correctly. Here are some common types of Control IDs you might encounter:

Button Pad Control: 

Used for buttons that perform specific actions, such as processing a sale or opening a menu.

Input Control:

Used for fields where users enter data, like item numbers or quantities.

Data Grid Control: 

Displays tabular data, such as a list of items in a transaction.

Record Zoom Control:

Allows users to view detailed information about a specific record.

Media Control: 

Used for displaying media content, such as images or videos.

Browser Control: 

Embeds a web browser within the POS interface.

Gear Icon

Click on the Gear icon, to open a panel where you can adjust various settings, preferences, or administrative functions pertaining to the Interface Control.

4. Elements of a POS Interface Profile

POS Interface Profile is a setup that manages the visual design and user interface of the Point of Sale (POS). It determines the arrangement and appearance of various components like buttons, menus, and journal lines on the screen. 

The screenshot below depicts a Point of Sale Screen that includes the following sections:

• Transaction Mode

• Customer Item Information Panel

• Transaction Summary

• Smart Input Control

• Transaction Grid

• Main Button Panel Group

• Operations Button Panel Group

• Payments Label

• Quick Pay Button Panel Group

5. Configure and Customize Your POS Interface Profile Elements

You can configure and customize the Elements of a POS Interface Profile. 

The screenshot below illustrates the various elements included in a POS Interface Profile.

The above POS screen is made up using the below control elements:

We have selected the Operations Button Panel Group to demonstrate its configuration and customization. (in the upcoming section)

The iVendNext application is highly customizable. 

The screenshots used in this article are for illustration purposes only.

6. Get Familiar With The Operations Button Panel Group

The Operations Button Panel Button Group is located in the top right corner of the POS screen and comprises four Button Controls.

The screenshot below depicts the Operations Button Panel Group.

For Illustration Let us see how the Operation Panel Button elements are controlled and managed using the POS Interface Profile.

7. Access The Operations Button Panel Group

The steps to access the Operations Button Panel Group are explained below:

Step 1. Navigate to the POS Interface Profile Details screen. You should see your POS Interface Profile listed there - iVendNext - IN

Step 2. Click on the POS Interface Profile ID -  iVendNext - IN. This should take you to the POS Interface Profile Details screen.

Step 3.  You can either click on the IN - Operation Button Panel link displayed under the Control ID header or click on the arrow symbol → displayed in that grid cell to reach the IN - Operations Button Group Panel Child screen.

Step 4. You can either click on the IN - Operation Button Panel link displayed under the Button Panel Control header or click on the arrow symbol → displayed in that grid cell to reach the IN - Operations Button Panel Details screen.

Step 5. Navigate to the Properties template on the IN - Operations Button Panel Details screen. This template allows you to configure and customize the properties of the individual Buttons. 

For illustration we have picked the 1st Button listed in the Properties template table grid  - the Bolt Button. 

Clicking on the Bolt Button will execute the POS Command to open the Button Panel Control. 

A Button Panel Control typically refers to a user interface component that consists of multiple buttons, often used to control various functions in a system.

The Action Button Panel Control provides quick access to frequently used functions or commands and helps reduce transaction times. The iVendNext POS Screen has the following Action Button Panel Controls:

• Item Search

• Customer Search

• Item Edit

• Change UOM

• Change Batch No

• Change Serial No

• Add Item Surcharge

• Add Sales Surcharge

• Void Item

• Void Transaction

• Product Bundle

• Suspend / Recall

8. Further Customization - The ‘Bolt’ Button

You can further customize the ‘Bolt’ Button by clicking on the pencil symbol under the Gear icon. This should open up the Editing Row section. Using this section you can customize and control the various functions of the ‘Bolt’ Button.

The Editing Row section is further split into the following Headers:

1. General

2. Button Size and Style

3. Caption Position and Style

4. Images / Icon Configuration

5. Controllers

6. Custom Code

General Section

Use this section to define the following:

• Button CSS Class

• Button Background Color

• Button Border Color

• Border Thickness

Button CSS Class

A Button CSS Class is a set of CSS rules that define the appearance and behavior of buttons on a webpage. By applying a CSS class to a button element, you can easily style it with properties like background color, border, padding, font size, and more.

Button Background Color

To define the background color of a button in CSS, you use the background-color property. This property allows you to set the color that will fill the background of the button.

Button Border Color

To define the border color of a button in CSS, you use the border-color property. This property allows you to set the color of the button's border.

Border Thickness

To define the border thickness of a button in CSS, you use the border-width property. This property allows you to set the width of the border around the button.

Button Size and Style

Use this section to define the following:

• Start Row

• Merge Number of Rows

• Start Column

• Merge Number of Columns

• Button Advance CSS Style

Start Row

In the context of button size and style, "Start Row" typically refers to the alignment and positioning of buttons within a layout, especially when using CSS Grid or Flexbox.

Merge Number of Rows

In the context of button size and style, "Merging Number of Rows" typically refers to the process of combining multiple rows into a single row, which can be particularly useful when designing layouts with CSS Grid or tables. This concept is often used to create larger, more visually distinct buttons or to align content in a more organized manner.

Start Column

In the context of button size and style, "Start Column" typically refers to the alignment and positioning of buttons within a layout, especially when using CSS Grid. It specifies the starting column line for a grid item, allowing you to place buttons in specific columns within a grid layout.

Merge Number of Columns

In the context of button size and style, "Merging Number of Columns" typically refers to the process of combining multiple columns into a single column, which can be particularly useful when designing layouts with CSS Grid or tables. This concept is often used to create larger, more visually distinct buttons or to align content in a more organized manner.

Button Advanced CSS Style

This refers to more sophisticated and nuanced techniques for styling buttons beyond basic properties like color, border, and padding. These advanced styles can include animations, gradients, shadows, and responsive design elements to enhance the user experience and visual appeal. For Example:

Gradient Backgrounds - 

Using gradients can add depth and interest to buttons.

Box Shadows - 

Adding shadows can create a 3D effect, making buttons appear raised or pressed.

Hover Effects - 

Changing the button's appearance when hovered over can provide interactive feedback.

Animations - 

Adding animations can make buttons more dynamic and engaging.

Responsive Design - 

Ensuring buttons look good on all devices by using responsive units and media queries.

Caption Position and Style

Use this section to define the following:

• Caption Position

• Document Type

• Document Name

• Caption

• Font

• Font Size

• Font Style

• Font Color

• Caption Background

• Caption Border

• Caption Advance CSS Style

Caption Position

This refers to the placement of a caption relative to the element it describes, typically a table. This is controlled using the caption-side CSS property, which specifies whether the caption should appear at the top or bottom of the table. Captions can be aligned to the left, right, center, or justified.

Document Type

Document Name

Caption

This is a brief description or title that provides context and additional information about an element, such as a table, figure, image, or video. Captions help users understand the content and relevance of the element they accompany. Captions can be aligned to the left, right, center, or justified.

Font

This refers to the typeface and styling applied to the text of a caption. The font choice and styling can significantly impact the readability and visual appeal of the caption. Example: Arial, Lato, Roboto, Times New Roman, or Helvetica

Font Size

This refers to the size of the text used in the caption. This is an important aspect of styling because it affects the readability and visual hierarchy of the caption relative to other elements on the page. The font-size property in CSS is used to set the size of the font.

Absolute Sizes: 

Examples: small, medium, large, etc.

Relative Sizes: 

Examples: smaller and larger (relative to the parent element's font size)

Length Units:

Examples: pixels (px), ems (em), rems (rem), and percentages (%). In the context of iVendNext we have used pixels as the Length Unit. 

Font Style

Bold, italics, and underline are collectively referred to as 'text formatting styles'. These 'text emphasis techniques' are used to enhance the readability and impact of text in various documents. Each style serves a different purpose:

Bold: 

Highlights important information or headings. Check this box to use the Bold Font Style.

Italics: 

Often used for emphasis, titles of works, or foreign words. Check this box to use the Italics Font Style

Underline: 

Traditionally used for emphasis, especially in handwritten or typed documents. Check this box to use the Italics Font Style

Font  Color

This refers to the color of the text used in the caption. This is an important aspect of styling because it affects the readability and visual appeal of the caption. The color property in CSS is used to set the font color.

Named Colors: 

Predefined color names like red, blue, green, etc.

Hexadecimal Values: 

Colors defined using hex codes, e.g., #ff0000 for red.

RGB/RGBA Values: 

Colors defined using the RGB color model, e.g., rgb(255, 0, 0) for red. RGBA includes an alpha channel for transparency, e.g., rgba(255, 0, 0, 0.5).

HSL/HSLA Values: 

Colors defined using the HSL color model, e.g., hsl(0, 100%, 50%) for red. HSLA includes an alpha channel for transparency, e.g., hsla(0, 100%, 50%, 0.5).

Caption Background

This refers to the background color or image applied to the caption element. This styling can enhance the visual appeal and readability of the caption, making it stand out from the rest of the content. The background-color and background-image properties in CSS are commonly used to set the caption background.

Caption Border

This refers to the border applied around the caption element, typically used to enhance its visual separation and emphasis. The border property in CSS is used to set the border's width, style, and color.

Caption Advance CSS Style

This refers to more sophisticated and nuanced techniques for styling captions beyond basic properties like font size, color, and position. These advanced styles can include animations, gradients, shadows, and responsive design elements to enhance the visual appeal and functionality of captions.

Gradient Backgrounds - 

Using gradients can add depth and interest to captions.

Text Shadows - 

Adding shadows can create a 3D effect, making captions stand out.

Hover Effects - 

Changing the caption's appearance when hovered over can provide interactive feedback.

Animations - 

Adding animations can make captions more dynamic and engaging.

Responsive Design - 

Ensuring captions look good on all devices by using responsive units and media queries.

Image / Icon Configuration

Use this section to define the following:

• Icon Logo

• Icon Position

• Icon Width

• Image Height

• Image Position

• Icon Background Color

• Button Image / Icon

• Button Image / Icon Border Color

• Button Background Image

• Image Advance CSS Style

• Icon Advance CSS Style

Icon Logo

In the context of icon configuration, an "Icon Logo" refers to a small graphical representation or symbol that is used to visually identify and represent a brand, application, or function. These are commonly used in user interfaces, websites, and applications to provide a quick and recognizable visual cue for users. Common file formats for icon logos include PNG, SVG, ICO, and EPS. However, SVG (Scalable Vector Graphics) is particularly popular because it allows the icon to scale without losing quality.

Icon Position (Alignment)

In the context of icon configuration, "Icon Position" refers to the specific placement or arrangement of icons within a user interface, such as a desktop, toolbar, or application. Proper icon positioning is crucial for usability and aesthetics, ensuring that icons are easily accessible and visually appealing. Icons can be aligned to the left, right, center, or justified within their container.

Icon Width

In the context of icon configuration, "Icon Width" refers to the horizontal dimension of an icon, typically measured in pixels. This property is crucial for ensuring that icons are appropriately sized for their intended use, whether on a desktop, in a toolbar, or within an application. Properly configuring the icon width helps maintain visual consistency and usability across different devices and screen resolutions.

Icon Height

In the context of icon configuration, "Icon Height" refers to the vertical dimension of an icon, typically measured in pixels. This property is crucial for ensuring that icons are appropriately sized for their intended use, whether on a desktop, in a toolbar, or within an application. Properly configuring the icon height helps maintain visual consistency and usability across different devices and screen resolutions. Icons can have a fixed height to ensure uniformity. Icons can be made responsive to adapt to different screen sizes. In this scenario Height is defined as a percentage of the parent container.

Image Height

In the context of icon configuration, "Image Height" refers to the vertical dimension of an icon or image, typically measured in pixels. This property is crucial for ensuring that icons are appropriately sized for their intended use, whether on a desktop, in a toolbar, or within an application.

Fixed Height:

Icons Images can have a fixed height to ensure uniformity.

Responsive Height:

Icons Images can be made responsive to adapt to different screen sizes.

Image Position

In the context of icon configuration, "Image Position" refers to the placement or alignment of an icon or image within its container or relative to other elements. Properly configuring the image position ensures that icons are visually appealing and functionally effective within the user interface.

Icon Background Color

This refers to the color used as the background for icons displayed within the POS. This color setting is part of the visual profile configuration, which determines the overall appearance and user interface of the POS. You can pick a color from the color pallet. 

Button Image / Icon

In the context of a Point of Sale (POS) Interface Profile, "Button Image" or "Icon Image" refers to the visual elements used on buttons within the POS. These images or icons can be customized and selected from a predefined set of icons or uploaded as per the branding requirements. 

Button Image / Icon Border Color

In the context of a Point of Sale (POS) interface theme, "Button Image / Icon Border Color" refers to the color used for the borders around buttons and icons. This color can be customized to enhance the visual appeal and usability of the interface. It helps in:

Highlighting Buttons and Icons: 

This makes the buttons and Icons stand out against the background.

Improving Readability: 

This ensures that buttons and icons are easily distinguishable.

Color Scheme Matching: 

This helps matching the color scheme with the overall brand identity.

Button Background Image

In the context of a Point of Sale (POS) interface theme, "Button Background Image" refers to the image or graphic used as the background for buttons within the interface. This image can be customized to enhance the visual appeal and functionality of the POS system. Some of the key points are listed below:

Visual Appeal: 

A well-chosen background image can make buttons more attractive and engaging.

Branding: 

Custom images can reflect the brand's identity and style, creating a cohesive look.

User Experience: 

Background images can help users quickly identify and differentiate between various buttons, improving navigation and usability.

Image Advance CSS Style

In the context of image/icon configuration, "Image Advanced CSS Style" refers to sophisticated techniques and properties used to enhance the visual appeal and functionality of images and icons. These advanced styles go beyond basic properties like size and position, incorporating effects such as animations, filters, gradients, and responsive design elements. Here are some examples:

CSS Filters

CSS filters can add visual effects like blur, brightness, contrast, and grayscale to images.

Gradients

Using gradients as backgrounds or overlays can add depth and interest to images.

Hover Effects

Changing the appearance of images on hover can provide interactive feedback.

Animations

Adding animations can make images more dynamic and engaging.

Responsive Design

Ensuring images look good on all devices by using responsive units and media queries.

Rounded Corners and Circular Images

Using the border-radius property to create rounded or circular images.

Icon Advance CSS Style

This refers to sophisticated techniques and properties used to enhance the visual appeal and functionality of icons. These advanced styles go beyond basic properties like size and position, incorporating effects such as animations, filters, gradients, and responsive design elements. Here are some examples:

CSS Filters

CSS filters can add visual effects like blur, brightness, contrast, and grayscale to icons.

Gradients

Using gradients as backgrounds or overlays can add depth and interest to icons.

Hover Effects

Changing the appearance of icons on hover can provide interactive feedback.

Animations

Adding animations can make icons more dynamic and engaging.

Responsive Design

Ensuring icons look good on all devices by using responsive units and media queries.

Shadows and Glows

Using shadows and glows to add depth and highlight icons.

Controllers

Use this section to define the following:

• POS Command

• Parameter Description

• Parameter

• Shortcut Key

POS Command

This refers to specific instructions or actions that can be assigned to buttons within a Point of Sale (POS). These commands enable various functionalities and interactions within the POS interface, allowing users to perform tasks efficiently.

Parameter

This refers to additional pieces of information or settings that modify or specify the behavior of a POS command. These parameters allow for greater customization and control over how commands are executed within a Point of Sale (POS) system. Some of the key aspects of POS parameters are listed below:

Customization:

Parameters can be used to tailor commands to specific needs, such as setting discount amounts, specifying item codes, or defining transaction types.

Command Chains:

Multiple commands can be chained together with parameters to perform complex operations in a single action.

Context-Specific Parameters:

Parameters can vary based on the context in which the command is used, such as different parameters for sales transactions versus inventory management.

Dynamic Parameters:

Parameters can be dynamically set based on user input or system state, allowing for flexible and responsive command execution.

Parameter Description

This refers to the detailed explanation or definition of specific settings or parameters within the POS. These parameters control various aspects of the POS interface and functionality, such as display settings, transaction processing rules, and user interface behaviors. For example, a POS parameter might define how long a message banner is displayed on the screen or whether the mouse cursor should be visible. Each parameter typically has a unique identifier and a description that helps administrators understand its purpose and how it affects the POS operation.

Shortcut Key

This refers to a specific key or combination of keys on a keyboard that, when pressed, performs a predefined action within the POS system. These shortcut keys are designed to streamline operations by allowing users to quickly execute common tasks without navigating through menus. For example, pressing the F4 key on the keyboard might open the cash drawer, while the F2 key could apply a discount or a surcharge to an item.

9. Practical Implementation of the POS Commands and Parameters

POS parameters enhance the functionality and flexibility of POS by allowing commands to be customized and tailored to specific needs. Some of the practical implementation of these POS Commands and Parameters can be seen below:

Sales Transactions: 

Applying discounts, processing returns, or adding items to a sale.

Inventory Management: 

Checking stock levels, updating inventory counts, or managing item details.

Customer Management: 

Looking up customer information, applying loyalty points, or managing customer accounts.

Custom Code

Use this section to define the following:

• Custom Code

10. Further Customization - Action Button Panel Control

In the section below we will get into the details on how this Action Button Panel Control can be further configured and customized using the Button Panel Control shortcut.

There are 2 ways you can approach the Button Panel Control List View screen. 

Navigate to Home > Retail. Then under the POS Interface & Controls section click on the Button Panel Control shortcut. 

Alternatively you can make use of the Awesome Bar. Navigate to Home. Type 'Button Panel Control' in the Awesome Bar located in the upper right-hand corner in iVendNext. Simply entering a few characters in the Search Bar will show results from several different record types (Contact, Customer, Issues, etc.) related to that keyword. 

This should take you to the Button Panel Control List View screen.

In the Search field type ‘Action Button Panel’ and press the Enter Key. This should take you to the Action Button Panel Details screen. All the Button Controls that are a part of the Action Button Panel are listed here.

Click on the Pencil symbol under the Gear Icon to configure and customize that row item. See: Configure and Customize Your POS Elements

11. Related Topics

1. POS Interface Profile

2. POS Interface Theme

3. Button Panel Control

4. Data Grid Control

5. Input Control

6. Information Control

7. Custom Display Control

8. Image Control

9. NumPad Control

10. POS Input Form