This knowledge base article explains how to add a new screen in the Management Console (MC) and the Point of Sale (POS).

Purpose

The main purpose of allowing the creation of new custom screens in the iVend MC and the POS is to provide developers with a way to modify the MC and POS suite by adding their own customized screens to meet the special business requirements of their customers.

Creating a New Screen for the Management Console

The following steps will provide developers with the basic skeleton for a MC screen, such as the Header panel, which consists the header of screen, the Control panel where you can drag and drop controls (e.g. Grid controls) and the basic Button panel, which comprises a total of 12 buttons.

1. For adding a new screen, create an Add-on using the iVend Add-on Extensibility Framework and add a new user control to the Add-on Visual Studio project.

2. Inherit your user control from the BaseConsoleCustomView class.

3. Provided with this, it is possible to add new controls and enable or override the functionality of the 12 buttons provided.

Note: 

The iVend Retail screens for both the MC and POS use the DevExpress controls (Version 15.2) and hence, the DevExpress references (e.g. DevExpress.XtraGrid, DevExpress.XtraVerticalGrid, DevExpress.XtraLayout, DevExpress.Data.v15.2, DevExpress.Utils, DevExpress.XtraEditors, etc.) are mandatory to use for or override the controls.

What follows below is the sample code for creating a new screen in the MC:

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Drawing;

using System.Data;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows.Forms;

using CXS.Retail.UIComponents;

using CXS.Retail.Extensibility;

using CXS.Retail.ManagementUIComponents;

namespace CustomScreens

{

public partial class CustomScreenMANAGEMENT CONSOLE : BaseConsoleCustomView

{

public CustomScreenMANAGEMENT CONSOLE()

{

InitializeComponent();

//Change the title of the header

m_ViewHeader.Title = "MANAGEMENT CONSOLE Screen";

//Enabling and overriding the buttons of button panel

m_Button11.Visible = true;

m_Button12.Visible = true;

m_Button11.Text = "Ok";

m_Button12.Text = "Cancel";

m_Button11.Click += new System.EventHandler(CancelButtonClickHandler);

m_Button12.Click += new System.EventHandler(OkButtonClickHandler);

}

private void OkButtonClickHandler(object sender, EventArgs e)

{

//To close the screen

ConsoleViewManager.Instance.Pop();

}

private void CancelButtonClickHandler(object sender, EventArgs e)

{

//To close the screen

ConsoleViewManager.Instance.Pop();

}

}

}

Creating a New Screen for the POS

The following steps will provide developers with the basic skeleton for a POS screen, such as the Header panel which consists the header of screen, the Control panel where you can drag and drop your controls (e.g. Grid controls) and the basic Button panel, which comprises a total of 12 buttons.

1. As for the MC, to add new screens to the POS, add a new user control and inherit it from BasePOSCustomView.

1. Provided with this, it is possible to add new controls and enable or override the functionality of the 12 buttons provided.

Note: · 

You need to refer to CXSRetailPOS.exe for referring to BasePOSCustomView.

· The iVend Retail screens for both the MC and the POS use the DevExpress controls (Version 15.2) and hence, the DevExpress references (e.g. DevExpress.XtraGrid, DevExpress.XtraVerticalGrid, DevExpress.XtraLayout, DevExpress.Data.v15.2, DevExpress.Utils, DevExpress.XtraEditors, etc.) are mandatory to use for or override the controls.

What follows below is the sample code for creating a new screen in the POS:

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Drawing;

using System.Data;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows.Forms;

using CXSRetailPOS;

using CXS.Retail.UIComponents;

namespace CustomScreens

{

public partial class CustomScreenPOS : BasePOSCustomView

{

public CustomScreenPOS()

{

InitializeComponent();

//Change the title of the header

m_ViewHeader.Title = "POS Screen";

//Enabling and overriding the buttons of button panel

m_Button11.Visible = true;

m_Button12.Visible = true;

m_Button11.Text = "Ok";

m_Button12.Text = "Cancel";

m_Button11.Click += new System.EventHandler(CancelButtonClickHandler);

m_Button12.Click += new System.EventHandler(OkButtonClickHandler);

}

private void OkButtonClickHandler(object sender, EventArgs e)

{

//To close the screen

RetailPOSViewManager.Instance.Pop();

}

private void CancelButtonClickHandler(object sender, EventArgs e)

{

//To close the screen

RetailPOSViewManager.Instance.Pop();

}

}

}

Displaying a Custom Screen in the MC

Refer the following code snippet to open the screen in the MC:

CustomScreenMANAGEMENT CONSOLE view = new CustomScreenMANAGEMENT CONSOLE();

ConsoleViewManager.Instance.Push(view);

What follows below is a screen image of the newly created custom screen in the MC that uses the above code snippet.

Display a Custom Screen in the POS

Refer the following code snippet to open a custom screen in the POS:

CustomScreenPOS view = new CustomScreenPOS();

POSViewManager.Instance.Push(view);

What follows below is a screen image that shows the newly created custom screen in the POS that uses the above code snippet.