Example: Creates PmForm window configured as multi-select from the list of items

In a single script (e.g. after pressing the button in the onButtonUp event). At the beginning there are variables that define the titles of the window and tables. Then the aList variable that represents a list of items to be selected from. Each item has a value and a text for displaying (emulated in the example). Tre is also the aSelect variable that can be used to define which items will be preselected. The onViewClose function then defines fow the selected list of items is processed.

JavaScriptSelect and copy to clipboard



// ****** Setting values ********

var sTitle = "Select n items from the list";

var sTitleL = "List of items";

var sTitleR = "Selected items";

var nTabColWidth = 18;

var oTableL, oTableR, oRowL, oRowR, iRow, iBodyRow, e, oArea11L, oArea12L, oBtnToRight, oBtnToLeft, oArea11R, oArea12R;


// aList = PmArray a two-dimensional field, where 1 column represents the identifier and the second text for display

var aList = Pm.CreatePmArray(2, 16, 2);

for (iRow = 0; iRow < aList.GetSize(1); iRow++)

{

	aList.SetItem("id" + iRow, iRow, 0);

	aList.SetItem("text" + iRow, iRow, 1);

}


// aSelect = one-dimensional array of preselected identifiers

var aSelect = Pm.CreatePmArray().Array1("id2", "id7");


// close the form with the OK button

function onViewClose(ev)

{

	if (ev.CloseReason == "ok")

	{

		var nRows = oArea11R.RowCount;

		var aSel = Pm.CreatePmArray(1, nRows);

		for (iRow = 0; iRow < nRows; iRow++)

		{

			aSel.SetItem(oArea11R.GetRow(iRow).PrivateData, iRow);

		}


		// RETURN Array ID selected

		Pm.Debug(aSel, 1);

	}

}

// ****** END Setting parameters ********



// ******* LOAD FORM ***********************

var nBodyRowL = aList.GetSize(1);

var nBodyRowR = aSelect.GetSize(1);

nBodyRowL = nBodyRowL - nBodyRowR;


function onViewLoad(ev)

{

	var oForm = ev.Form;

	oForm.Title = sTitle;

	oForm.BgColor = "#c0dcc0";


	var oLay = oForm.CreateItem("layout", "Lay", null, "Subtype:horz;BodyHeightMode:resize;BodyWidthMode:resize;");


	// XXXXXXXXXX init LEFT table XXXXXXXXXXXXXXXXXXX

	oTableL = oLay.CreateItem("table", "id_tableL", null, "BodyHeightMode:resize;BodyWidthMode:resize;");

	oTableL.InitRows(nBodyRowL, 1, 0);

	oTableL.InitCols(1, 0);

	oTableL.SetColWidth(nTabColWidth, 1, -1);
  // Table Column width

	oTableL.SetSel(0, 0);
  // Table Set active row


	oArea12L = oTableL.GetArea(12);
  // TableArea 12=MainHead

	oArea12L.BgColor = "#c0dcc0";

	oArea12L.GetRow(0).GetCell(0).Value = sTitleL;


	oArea11L = oTableL.GetArea(11);
  // TableArea 11=MainBody

	oArea11L.BgColor = "#ffffff";

	oArea11L.HorzAlign = "left";


	// XXXXXXXXXX CENTER buttons XXXXXXXXXXX

	var oLayC = oLay.CreateItem("layout", "LayC", null, "Subtype:vert;");
  // layer for center buttons

	oBtnToRight = oLayC.CreateItem("button", "id_butt_add");

	oBtnToRight.Value = ">>";

	oBtnToRight.AddEvent("onAction", "ToRightButton", onRight);


	oBtnToLeft = oLayC.CreateItem("button", "id_butt_clear");

	oBtnToLeft.Value = "<<";

	oBtnToLeft.AddEvent("onAction", "ToLeftButton", onLeft);


	// XXXXXXXXXX init RIGHT table XXXXXXXXXXXXXX

	oTableR = oLay.CreateItem("table", "id_tableR", null, "BodyHeightMode:resize;BodyWidthMode:resize;");

	oTableR.InitRows(0, 1, 0);

	oTableR.InitCols(1, 0);

	oTableR.SetColWidth(nTabColWidth, 1, -1);
  // Table Column width

	oTableR.SetSel(0, 0);
  // Table Set active row


	oArea12R = oTableR.GetArea(12);
  // TableArea 12=MainHead

	oArea12R.BgColor = "#c0dcc0";

	oArea12R.GetRow(0).GetCell(0).Value = sTitleL;


	oArea11R = oTableR.GetArea(11);
  // TableArea 11=MainBody

	oArea11R.BgColor = "#ffffff";

	oArea11R.HorzAlign = "left";


	onFillData();

}


function onFillData(ev)

{

	e = 0;

	nBodyRowR = aSelect.GetSize(1);

	oTableR.DeleteRow(1, 0, -1);

	for (iRow = 0; iRow < aList.GetSize(1); iRow++)

	{

		var bSel = 0;

		for (iBodyRow = 0; iBodyRow < nBodyRowR; iBodyRow++)

		{

			if (aList.GetItem(iRow, 0) == aSelect.GetItem(iBodyRow))

			{

				bSel = 1;

			}

		}

		if (!bSel)

		{

			oRowL = oArea11L.GetRow(e);

			oRowL.GetCell(0).Value = aList.GetItem(iRow, 1);

			oRowL.PrivateData = aList.GetItem(iRow, 0);

			e++;

		}

		else

		{

			oTableR.InsertRow(1, -1);

			oRowR = oArea11R.GetRow(-1);

			oRowR.GetCell(0).Value = aList.GetItem(iRow, 1);

			oRowR.PrivateData = aList.GetItem(iRow, 0);

		}

	}

}


// move the highlighted left item to the right

function onRight(ev)

{

	var oRow = oTableL.GetSel(0);

	if (oRow != null)

	{

		oRowL = oArea11L.GetRow(oRow.Row);

		aSelect.Insert(-2, oRowL.PrivateData);

		oTableL.DeleteRow(1, -1);

		onFillData();

	}

}


// move the highlighted right item to the left

function onLeft(ev)

{

	var oRow = oTableR.GetSel(0);

	if (oRow != null)

	{

		oRowR = oArea11R.GetRow(oRow.Row);

		for (iRow = 0; iRow < aSelect.GetSize(1); iRow++)

		{

			if (oRowR.PrivateData == aSelect.GetItem(iRow))

			{

				aSelect.Remove(iRow, 1);

				break;

			}

		}

		oTableL.InsertRow(1, -1);

		onFillData();

	}

}


// Creates PmViewCreator - The object allows to open the various viewers

var oCreator = Pm.CreateView(null, "/#glob/form", "", "target:_blank;modal:1;pos:view," + pMe.ViewX + "," + pMe.ViewY + ";size:640,350;");

oCreator.View.onLoad = onViewLoad;

oCreator.View.onClose = onViewClose;


// Opens form in a modal window:

oCreator.Open();

Promotic

Example: Creates PmForm window configured as multi-select from the list of items

See also: