How to Customize HTML Information Panel
The POS layout has the option to add an information panel that displays HTML code. The HTML information panel is linked to the GetHTMLInformation event in EventService. This method must return a valid string containing a HTML document or an empty string.
The PosTransaction object contains a property called HTMLInformation which is empty by default, but it can be populated anywhere in the code and it will be later picked up by the GetHTMLInformation event and displayed in the HTML information panel, if the event logic was not customized.
The HTML information panel can be further customized with CSS documents or different resources, for example icons.
How to include CSS styling
Including CSS styling can be done in four ways:
//CSS using an URL
string html = "<html><head><link rel=\"Stylesheet\" href=\"http://www.example.com/stylesheet.css\"/></head><body></body></html>";
//CSS using a file on the disk
string html = "<html><head><link rel=\"Stylesheet\" href=\"C:\Themes\stylesheet.css\"/></head><body></body></html>";
//CSS using a property from an assembly
string html = "<html><head><link rel=\"Stylesheet\" href=\"property:LSOne.Services.EventService.StyleSheet\"/></head><body></body></html>";
//CSS using a method from an assembly
string html = "<html><head><link rel=\"Stylesheet\" href=\"method:LSOne.Services.EventService.GetStyleSheet\"/></head><body></body></html>";If one of the last two methods are used, the href tag must contain the specifiers property: or method: followed by the fully qualified path to the property or method: [Namespace].[ClassName].[PropertyName]
The method or property must be public and static, must return string and must not have any input parameters, for example:
public static string StyleSheet
{
get
{
return @"
h1, h2, h3 { color: navy; font-weight:normal; }
body { font:10pt Tahoma }
pre { border:solid 1px gray; background-color:#eee; padding:1em }
.gray { color:gray; }
.example { background-color:#efefef; corner-radius:5px; padding:0.5em; }
.caption { font-weight:bold }
.whitehole { background-color:white; corner-radius:5px; padding:10px; }
";
}
}The method or property can be defined anywhere, but the assembly containing the method or property must be added to the HtmlRenderer. First the project must have a reference to the System.Drawing.Html DLL which is found in the POS folder, then the following code must be executed from withing the assembly.
if(!HtmlRenderer.References.Contains(Assembly.GetExecutingAssembly())
{
HtmlRenderer.References.Add(Assembly.GetExecutingAssembly());
}How to include images
To add images is very similar to adding CSS styling. You need to declare a static property that return Image, add the required assembly and write the appropiate HTML notation.
public static Image ImageIcon
{
get { return Properties.Resources.image32; }
}
//Somewhere in a HTML string
string html = "<h1>Images <img src="property:LSOne.Services.EventService.ImageIcon" /></h1>"How to use links
You can add hyperlinks as you would in a normal HTML document, pointing to another webpage (opening the default browser) or you can specify a method in code to be executed when the link is clicked.
public static void SayHello()
{
MessageBox.Show("Hello!");
}
//Somewhere in a HTML string
string html = "<p>Now, say <a href="method:LSOne.Services.EventService.SayHello">Hello!</a> to me.</p>"
