A few years ago I wrote  an HTML Editor control that can be used with the .NET framework. Until recently it lay in obscurity being used from time to time by my and a few other people that found it online. Recently Joshua from Perficiency Development made some enhancements to it when he was trying to get it to work with Epicor. With this new enhancements and the fact that someone asked about it on the Epicor mailing list I decided to throw together this short tutorial on how to get it working in Epicor.

  1. Go download the appropriate version of the DLL from the original post
  2. Once you’ve downloaded the project, simply copy the DLL from the Release/Bin folder into the Epicor client folder where you’d like to use the control
  3. In the example code below I began by adding a new tab to the ABC Code form where I was going to place my editor
  4. Once the tab is added I drew a group box on the shape and size I want the editor to be in the new tab. This makes it much easier to position the editor without having to write much code
  5. Once this is done the code below takes care of the rest. I’ve commented the code where appropriate for clarity.

The final result of the below code can be seen below

// **************************************************
// Custom code for AbcCodeForm
// Created: 12/18/2013 12:19:03 PM
// **************************************************
using System;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Windows.Forms;
using Epicor.Mfg.BO;
using Epicor.Mfg.UI;
using Epicor.Mfg.UI.Adapters;
using Epicor.Mfg.UI.Customization;
using Epicor.Mfg.UI.ExtendedProps;
using Epicor.Mfg.UI.FormFunctions;
using Epicor.Mfg.UI.FrameWork;
using Epicor.Mfg.UI.Searches;
using HTMLWYSIWYG;

public class Script
{
	// ** Wizard Insert Location - Do Not Remove 'Begin/End Wizard Added Module Level Variables' Comments! **
	// Begin Wizard Added Module Level Variables **

	private EpiDataView edvAbcCode;
	// End Wizard Added Module Level Variables **

	// Add Custom Module Level Variables Here **

	//Declare a class level htmlwysiwyg
	htmlwysiwyg htmlEditor;

	public void InitializeCustomCode()
	{
		// ** Wizard Insert Location - Do not delete 'Begin/End Wizard Added Variable Initialization' lines **
		// Begin Wizard Added Variable Initialization

		this.edvAbcCode = ((EpiDataView)(this.oTrans.EpiDataViews["AbcCode"]));
		this.edvAbcCode.EpiViewNotification += new EpiViewNotification(this.edvAbcCode_EpiViewNotification);
		// End Wizard Added Variable Initialization

		// Begin Wizard Added Custom Method Calls

		// End Wizard Added Custom Method Calls

		//In your InitializeCustomCode() function initialize the editor and add it to your groupbox
		htmlEditor = new htmlwysiwyg();
		htmlEditor.ImagePasteToPath = @"\\GOMEZFAMILY\Users\Public\Pictures\";
		htmlEditor.allowEdit(true);

		//We have a need for triggering an event when validating the control to update the data view
		htmlEditor.Validating += htmlEditor_Validating;
		grpGroup.Controls.Add(htmlEditor);

	}

	public void DestroyCustomCode()
	{
		// ** Wizard Insert Location - Do not delete 'Begin/End Wizard Added Object Disposal' lines **
		// Begin Wizard Added Object Disposal

		this.edvAbcCode.EpiViewNotification -= new EpiViewNotification(this.edvAbcCode_EpiViewNotification);
		this.edvAbcCode = null;
		// End Wizard Added Object Disposal

		// Begin Custom Code Disposal

		// End Custom Code Disposal

		//Always be a good citizen and dispose of your extra objects
		htmlEditor.Validating -= htmlEditor_Validating;
		htmlEditor.Dispose();
		htmlEditor = null;
	}

	private void edvAbcCode_EpiViewNotification(EpiDataView view, EpiNotifyArgs args)
	{
		// ** Argument Properties and Uses **
		// view.dataView[args.Row]["FieldName"]
		// args.Row, args.Column, args.Sender, args.NotifyType
		// NotifyType.Initialize, NotifyType.AddRow, NotifyType.DeleteRow, NotifyType.InitLastView, NotifyType.InitAndResetTreeNodes

		// When the view initializes we must check if we have data
		// if  we do then we bind the control to the UD field where
		// we want to store the HTML. Please note that ShortChar01
		// is not a good choice since its only 50 characters long
		if ((args.NotifyType == EpiTransaction.NotifyType.Initialize))
		{
			if(args.Row >-1)
			{
				htmlEditor.DataBindings.Clear();
				htmlEditor.DataBindings.Add(new Binding("HTML",view.dataView[args.Row],"ShortChar01"));
			}
			else // If the DataView is empty then clear the control
			{
				htmlEditor.DataBindings.Clear();
				htmlEditor.setHTML("");
			}
		}

	}

	private void htmlEditor_Validating(object sender, CancelEventArgs args)
	{
		// When we make a change to the control, lets make sure we get the HTML
		// and update your dataview.
		EpiDataView edvDtl = oTrans.Factory("AbcCode");
		if(edvDtl.Row >-1)
		{
			edvDtl.dataView[edvDtl.Row].BeginEdit();
			edvDtl.dataView[edvDtl.Row]["ShortChar01"] = htmlEditor.getHTML();
			edvDtl.dataView[edvDtl.Row].EndEdit();
			edvDtl.Notify(new EpiNotifyArgs(oTrans, edvDtl.Row, edvDtl.Column));
		}

	}
}

Be Sociable, Share!

Tags: , , ,

1 Comment on Using an HTML WYSIWYG Editor with Epicor

  1. […] Added a few samples of how to implement in epicor / integrate with the data views. Please not that if you are going to paste images and use it with Epicor we recommend that you download the version which puts the images on a shared network drive. Most UD fields in epicor are too small to handle the Base64 encoded image. This sample code is provided as is and it was created using Epicor 9.05 […]