Building a JavaScript Dyanamic "Table" Rowset

Mindwatering Incorporated

Author: Tripp W Black

Created: 08/13/2012 at 02:03 PM

 

Category:
Notes Developer Tips
JavaScript

Issue:
Would like to have a dynamic (mult-value) table of detail rows for a Lotus Domino web form. The dynmic rows need to be updated on the client side with no round trips adding rows, removing rows, and updating rows.

Solution:
Attached are the snippets of code that Mindwatering uses to build such a form for clients.

JS Header Code:
DetailRow-JSHeadFunctions.rtfDetailRow-JSHeadFunctions.rtf

JS OnLoad Code:
DetailRow-JS OnLoad.rtfDetailRow-JS OnLoad.rtf

Sample Form Layout:
RowItem GTIN/UPCUPC / Store NumberStore Item Num.Item DamagedItem Description
[D_RowSel]
<br><br>
[D_UPCIn]
<br><br>
[D_IsPLUIn]
<br><br>
[D_PLUIn]
<br><br>
[D_IsDamageIn]
<br><br>
[D_DescIn]
<br><br>
<Add / Update Row Btn><Remove Row Btn>
[D_RowNum]
<br><br>
[D_UPC]
<br><br>
[D_IsPLU]
<br><br>
[D_PLU]
<br><br>
[D_IsDamage]
<br><br>
[D_Desc]
<br><br>

[D_RowSel] - Combox / Editable
Hide/When: Open for Reading
Use formula for choices:
"New"

OnChange Event:
ToggleGetRow();
f.FM_UPCIn.focus();

------

[D_UPCIn] - Text/ Editable
Hide/When: Open for Reading
Default value: ""
Input Translation: ""
HTML Atributes: "Size=\"14\" Maxlength=\"14\""

------

[D_IsPLUIn] - Radio Button / Editable
Hide/When: Open for Reading
Default value: "N"
Enter choices [one per line]:
Yes | Y
No | N

Input Translation: "N" (Optional, include if you want it to reset back to default between saves)

------

[D_ItemNumIn] - Text/ Editable
Hide/When: Open for Reading
Default value: ""
Input Translation: ""
HTML Atributes: "Size=\"9\" Maxlength=\"14\""

------

[D_IsDamgeIn] - Radio Button / Editable
Hide/When: Open for Reading
Default value: "N"
Enter choices [one per line]:
Yes | Y
No | N

Input Translation: "N" (Optional, include if you want it to reset back to default between saves)

------

[D_DescIn] - Text/ Editable
Hide/When: Open for Reading
Default value: ""
Input Translation: ""
HTML Atributes: "Size=\"24\" Maxlength=\"24\""

------

<Add / Update Row > Button Action - Common JavaScript (We have maximum row check here at 16 - 15 is 16 with 0 LBound )
Hide/When: Open for Reading
onClick code:
// validate row values
if(CheckFldMax(f.D_UPCIn, 15) == true) {
return false;
}
if(CheckRowFields() == true) {
UpdateRowFields();
f.D_UPCIn.focus();
} else {
return false;
}

------

<Remove Row > Button Action - Common JavaScript
Hide/When: Open for Reading
onClick code:
// remove the current row selected values from list
RemoveRow();
f.D_UPCIn.focus();

------

[D_RowNum] - Text / Editable / Multi-value (checked)
Multi-Value Options - Separate: Comma, Semicolon, New Line, Blank Line / Display: New Line
Default Value: "0"
Input Translation: @Trim(@ThisValue)
HTML Atributes: "rows=\"16\" cols=\"2\"" (Update 16 to the row limit desired.)
on Focus Event:
f.D_UPCIn.focus;

------

[D_UPC] - Text / Editable / Multi-value (checked)
Multi-Value Options - Separate: Comma, Semicolon, New Line, Blank Line / Display: New Line
Default Value: ""
Input Translation: @Trim(@ThisValue)
HTML Atributes: "rows=\"16\" cols=\"16\"" (Update row 16 to the row limit desired.)
on Focus Event:
f.D_UPCIn.focus;

------

[D_IsPLU] - Text / Editable / Multi-value (checked)
Multi-Value Options - Separate: Comma, Semicolon, New Line, Blank Line / Display: New Line
Default Value: ""
Input Translation: @Trim(@ThisValue)
HTML Atributes: "rows=\"16\" cols=\"5\"" (Update row 16 to the row limit desired.)
on Focus Event:
f.D_UPCIn.focus;

------

[D_PLU] - Text / Editable / Multi-value (checked)
Multi-Value Options - Separate: Comma, Semicolon, New Line, Blank Line / Display: New Line
Default Value: ""
Input Translation: @Trim(@ThisValue)
HTML Atributes: "rows=\"16\" cols=\"16\"" (Update row 16 to the row limit desired.)
on Focus Event:
f.D_UPCIn.focus;

------

[D_IsDamage] - Text / Editable / Multi-value (checked)
Multi-Value Options - Separate: Comma, Semicolon, New Line, Blank Line / Display: New Line
Default Value: ""
Input Translation: @Trim(@ThisValue)
HTML Atributes: "rows=\"16\" cols=\"5\"" (Update row 16 to the row limit desired.)
on Focus Event:
f.D_UPCIn.focus;

------

[D_Desc] - Text / Editable / Multi-value (checked)
Multi-Value Options - Separate: Comma, Semicolon, New Line, Blank Line / Display: New Line
Default Value: ""
Input Translation: @Trim(@ThisValue)
HTML Atributes: "rows=\"16\" cols=\"25\"" (Update row 16 to the row limit desired, cols is one more than line select to make sure no accidental wrapping.)
on Focus Event:
f.D_UPCIn.focus;

------



previous page