Button Panel Control
Introduction
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. In the context of iVendNext a button panel is a part of POS Interface Profile that allows users to execute commands or navigate through applications.
Button Panel Control Feature
Button Panel Control feature can be accessed from the Button Panel Control List View screen. There are 2 ways you can approach the Button Panel Control List View screen.
You can 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. All the Button Panel Controls are listed on this screen.
These Button Panel Controls can be customized. Click on the IN - Action Button Panel link in the ID column to open the IN - Action Button Panel details screen.
1. Steps to create a Button Panel Control
The steps to create a Button Panel Control are explained below:
Step 1. Navigate to Home > Retail. Then under the POS Interface & Controls section click on the Button Panel Control shortcut.
This should take you to the Button Panel Control List View screen.
Step 2. Click on the Add Button Panel Control button in the top right corner. This will open the New Button Panel Control screen. All the settings pertaining to the graphical layout of your Button Panel Control can be configured from this screen.
Fill in the details on the New Button Panel Control screen including the mandatory fields.
Specify the Control ID.
Specify the Control Name.
Specify the Number of Rows.
Specify the Number of Columns.
Select the Interface Theme.
Using the Properties template specify the POS Command, POS Description, and the Parameter.
Click the Save button to save the changes and exit the screen.
The New Button Panel Control can be seen listed on the POS Button Panel List View screen.
2. Further Customization of the Buttons
Using the Properties template specify the POS Command, POS Description, and the Parameter. Click 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 Button. In the illustration below we have covered the steps to customize the ‘Bolt’ Button.
The Editing Row section is further split into the following Headers:
General
Button Size and Style
Caption Position and Style
Images / Icon Configuration
Controllers
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
This refers to the Document Type.
Document Name
This represents the 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.
Custom Code
Use this section to define the following:
Custom Code
