 |
|
| Domino Tips: |
|
|
|
HTML
Use pop-up to populate dynamic table
Mike Grantham
02.16.2005
Rating: -3.60- (out of 5)
|
This tip shows you how to use a pop-up window to populate a dynamic table in an underlying form.
This process involves three primary Domino elements:
- A Web-enabled form that uses JavaScript to open another form (pop-up window) and pass a search string to display a subset of employee names from an HTML formatted view. This Web-enabled form contains a dynamic table to display multiple selections -- in this case it is some employee information.
- A view formatted with HTML and added to the row values to create a checkbox for each row entry. In HTML selecting a checkbox allows a single value to be returned, therefore multiple view columns are concatenated for each checkbox value with delimiters so it can be parsed into separate fields (dynamic table) in the underlying form. So this view does four things -- sorts the information, creates a checkbox for each row, concatenates several field values to be returned when the checkbox is selected and formats the information to be displayed in the pop-up window for each row and column.
- A form used as a pop-up window to display the HTML formatted view and allows the user to select entries from the view displayed as a table with borders for each row and column using a checkbox -- then uses JavaScript to parse the selected and concatenated values into the underlying form fields.
Code:
- Web-enabled input form elements:
- Image default hotspot properties:
TYPE: URL
VALUE: javascript:BusinessAreaLookup('Information Technology);
FRAME:
- JavaScript function in the JS Header that is called from the default hotspot:
//====================
====================
//Employee Name lookup
for a business area or department
//======================
==================
//Search by name view with
checkboxes for multiple selection,
this function
opens a form in the employee
//database and displays a list of
employees for a the selected business area -
"Information Technology" in this case.
function BusinessAreaLookup(busAreaCkd){
view = "VMLPRBA";
formname = "FMLPRBA";
fieldname = "BusinessUnitName";
var servname = document.forms[0].
Server_Name.value;
winURL = "http://" + servname +
"/Employee/empdata.nsf/" + view + "/" +
formname + "?SearchView&SearchOrder=4
&Query=FIELD " + fieldname + " contains "
+ busAreaCkd;
window.location = winURL; }
- Hidden formatted view named => (Search By NAME) with view alias VMLPRBA:
- In the View properties, "Treat view contents as HTML" is selected.
- The first three columns are hidden for sorting the employees by last name, first name and then middle initial.
- The next column begins the HTML table row formatting with this code and creates the checkbox for each row in the view:
"[<TR><TD><input type=
"checkbox" name="choice" value=""
- The next several columns contain the concatenated values that are returned when the checkbox is selected. These columns are just individual field values in separate columns with a semicolon as delimiters so the data can be parsed out using JavaScript. These columns are automatically hidden as the values are all treated as part of the checkbox value to be returned:
FIELDNAME + ";"
- The next column closes the checkbox value and contains the following HTML:
""></TD>]"
- The next several columns combine HTML with field values to display the employee information in table columns in the pop-up window. This is an example of the formula code in one of the columns:
@If(Middle_Init = "";
"<TD>" + @ProperCase(Fname +
" " + Lname) + "</TD>";
"<TD>" + @ProperCase(Fname +
" " + Middle_Init + ". " + Lname)
+ "</TD>")
- The last view column is the end table row tag in HTML:
"</TR>"
- Form for pop-up window named => $$SearchTemplate for VMLPRBA | FMLPRBA:
This form contains the JavaScript code that processes the choices selected, updates the fields in the underlying form and refreshes the underlying form in the browser to display the selected contents.
- Pass-Thru HTML can be used around the $$ViewBody field on the pop-up form to format the table. This method reduces the need to embed HTML into the view column headers which has limited space for HTML content. Just be sure to hide the column headers in the HTML formatted view because the column headers can be formatted by defining them as Pass-Thru HTML as shown below. The $$ViewBody field is placed just before the closing table tag. The first column labeled as # is where the checkbox appears. The second labeled as ID displays the employee's unique company employee ID. The third column labeled NAME is where the employee's name is displayed.
<TABLE BORDER=1
ALIGN=CENTER CELLSPACING=0
CELLPADDING=3>
<TD width=20><DIV
ALIGN=center><B><FONT SIZE=2
FACE="Arial">#</FONT>
</B></DIV></TD>
<TD width=60><DIV ALIGN=center>
<B><FONT SIZE=2
FACE="Arial">ID</FONT></B>
</DIV></TD>
<TD width=200><DIV ALIGN=
center><B><FONT SIZE=2
FACE="Arial">NAME</FONT></B>
</DIV></TD>$$ViewBody-
field-goes-here</TABLE>
- JavaScript in the onClick of the ok hotspot button that determines if any checkboxes were selected and refreshes the underlying form:
//Determine the item(s) that
is checked ********************************
ChoiceList = document.forms[0].choice;
ChoiceListLen = ChoiceList.length;
//Total number of items in the
array - zero based
ChoiceCkd = "";
//Split choices selected into an
array to access each element individually to
be parsed
ChoiceArray = new Array( );
NumSelected = 0;
//Indicates total number
of choices
selected
listnum = 0;
numels = opener.
document.forms[0].listElements.value;
listnum = (parseInt(numels) + 1);
if (ChoiceListLen == null) {
ChoiceCkd = ChoiceList.value;
ProcessChoice(ChoiceCkd,listnum);
NumSelected++
} else {
for (i =0; i < ChoiceListLen; i++) {
//Find which items are checked in the list
if (ChoiceList[i].checked ) {
NumSelected++;
ChoiceCkd = ChoiceList[i].value;
//Get the value of
the choice selected
ProcessChoice(ChoiceCkd,listnum);
//JS Header function
to parse out the checkbox values
listnum++;
} //end if
} //end for
} //end if
//determine if nothing was checked
if (NumSelected == 0) { //if1
alert("Nothing was selected,
please try again or press No to canel!");
return;
}
//refresh the underlying form
if (document.forms[0].
RefreshPageFlag.value == "Y") {
document.forms[0].
RefreshPageFlag.value = "N"
window.opener.refreshPage('S');
}
- JavaScript function in the JS Header that parses the checkbox values into the separate fields on the underlying form.
function ProcessChoice
(ChoiceCkd,listnum) {
mdoc = opener.document.forms[0];
//get
a handle on the undelying form
ChoiceArray = ChoiceCkd.split(";");
//split the value into separate items
ChoiceEmpid = ChoiceArray[0]; //get
the employee ID from the first position
mdocEmpid = mdoc.empID.value;
if (mdocEmpid == "") {
//Update form with first selection
mdoc.empnum.value = "1";
mdoc.empID.value = ChoiceArray[0];
mdoc.empName.value = ChoiceArray[1];
mdoc.empEmail.value = ChoiceArray[3];
mdoc.busArea.value = ChoiceArray[6];
mdoc.costCenter.value = ChoiceArray[5];
mdoc.nonIT.value = "_";
mdoc.IT.value = "_";
mdoc.Both.value = "_";
document.forms[0].
RefreshPageFlag.value = "Y"
} else {
mdocIDArray = new Array( );
mdocIDArray = mdocEmpid.split(";")
num = 0;
num++;
dupFlag = "N";
for(n in mdocIDArray) {
inputString = mdocIDArray[n]
tempval = trim(inputString);
if (tempval == ChoiceEmpid) {
alert("DUPLICATE: << " +
ChoiceArray[1]
+ " >> is already in the list!");
dupFlag = "Y";
} // end if
} // end for
if (dupFlag == "N") {
tempval = mdoc.empnum.value;
mdoc.empnum.value = tempval +
"r" + listnum;
tempval = mdoc.empID.value;
mdoc.empID.value = tempval +
"r" + ChoiceArray[0];
tempval = mdoc.empName.value;
mdoc.empName.value = tempval +
"r" + ChoiceArray[1];
tempval = mdoc.empEmail.value;
mdoc.empEmail.value = tempval +
"r" + ChoiceArray[3];
tempval = mdoc.busArea.value;
mdoc.busArea.value = tempval +
"r" + ChoiceArray[6];
tempval = mdoc.costCenter.value;
mdoc.costCenter.value = tempval +
"r" + ChoiceArray
[5];
tempval = mdoc.nonIT.value;
mdoc.nonIT.value = tempval
+ "r" + "_";
tempval = mdoc.IT.value;
mdoc.IT.value = tempval
+ "r" + "_";
tempval = mdoc.Both.value;
mdoc.Both.value = tempval
+ "r" + "_";
document.forms[0].
RefreshPageFlag.value = "Y"
} //end if
} // end if
return;
} // end function ProcessChoice
function trim(inputString) {
// Removes leading and trailing
spaces from the passed string.
Also removes
// consecutive spaces and
replaces it with one space. If something
besides
// a string is passed in (null, custom object, etc.)
then return the
input.
if (typeof inputString != "string") {
return inputString;
} //end if
var retValue = inputString;
var ch = retValue.substring(0, 1);
while (ch == " ") {
// Check for spaces at the beginning of the string
retValue = retValue.substring(1, retValue.length);
ch = retValue.substring(0, 1);
}
ch = retValue.substring(retValue.length-1,
retValue.length);
while (ch == " ") {
// Check for spaces at the end of the string
retValue = retValue.substring
(0, retValue.length-1);
ch = retValue.substring
(retValue.length-1, retValue.length);
}
while (retValue.indexOf(" ") != -1) {
// Note that there are two spaces
in the string - look for multiple spaces
within the string
retValue = retValue.substring(0,
retValue.indexOf(" ")) +
retValue.substring(retValue.
indexOf(" ")+1, retValue.length);
// Again, there are two spaces in
each of the strings
}
return retValue; // Return the
trimmed string back to the user
} // End trim function
Do you have comments on this tip? Let us know.
This tip was submitted to the SearchDomino.com tip exchange by member Mike Grantham. Please let others know how useful it is via the rating scale below. Do you have a useful Notes/Domino tip or code to share? Submit it to our monthly tip contest and you could win a prize and a spot in our Hall of Fame.
|
|
|
|
|
|
|
|
|
| TechTarget provides enterprise IT professionals with the information they need to perform their jobs - from developing strategy, to making cost-effective IT purchase decisions and managing their organizations' IT projects - with its network of . |
|
| | |
All Rights Reserved, , TechTarget |
|
|
|
|
|
