Procedure – Submitted Client-generated hidden form data

Personnalisation de base > User Interface Customization > Constructing Wizards > Client Generated Form Data > Procedure – Submitted Client-generated hidden form data

Add default values for client-generated fields (Optional)

If you do not need per-table-row hidden input values for your application, you may skip this step.

If your application needs a hidden input value for each object appearing in a table, add one or more column definitions in the wizard's table builder defining columns that are 'data store only' and 'editable'. Use an appropriate data utility to generate the default values. Give the columns unique names so they can be identified in your event listener (e.g., “hiddenColumn1”).

TableConfig table = factory.newTableConfig();
table.setId ('MYTABLEID');
..
. <... other table configuration here ...>
.
ColumnConfig hiddenCol1 = factory.newColumnConfig ("hiddenColumn1", false);
hiddenCol1.setDataUtilityId ("SOME_DU_ID");
hiddenCol1.setNeed ("SOME_DU_ID");
hiddenCol1.setComponentMode (ComponentMode.EDIT);
hiddenCol1.setDataStoreOnly (true);
table.addComponent (hiddenCol1);

ColumnConfig hiddenCol2 = factory.newColumnConfig ("hiddenColumn2", false);
hiddenCol2.setDataUtilityId ("SOME_DU_ID");
hiddenCol2.setNeed ("SOME_DU_ID");
hiddenCol2.setComponentMode (ComponentMode.EDIT);
hiddenCol2.setDataStoreOnly (true);
table.addComponent (hiddenCol2);

Your hidden data columns must be defined as “editable” and “data store only” as shown in the bold lines in the code above.

SOME_DU_ID is the ID of a suitable data utility that will provide the default values for the column. It must return a non-null value for the objects in the wizard's table; otherwise, there will be no corresponding field for the object's row in the data store.

Add a <script/> block to the wizard's JSP file

In the JSP for your wizard, add a <script/> block that will load an application-specific Javascript file, something like this:

Add your application’s client-side logic

Create a new Javascript file, …/netmarkets/javascript/MYAPPLICATION/MYJSFILE.js , that will contain the application's listener for the 'submit' event that will be signaled for the wizard's table. Code should follow this outline:

// Establish namespace
PTC.MYAPPLICATION={};

// Define wizard table 'submit' listener
PTC.MYAPPLICATION.MYLISTENER = function (table)
{
// see PTC.fakeLiterature.submitListener() code in
// /netmarkets/javascript/carambola/dataStoreOnlyExample.js};

// Add submit listener for wizard table once the table becomes 'available'
PTC.onAvailable
( 'MYTABLEID', function (table)
{
table.on ('submit', PTC.MYAPPLICATION.MYLISTENER);
});
}

In this example, the submit listener is adding hidden input data to the submitted form, using JCAappendFormHiddenInput. In this example, the client-side logic looks for two hidden properties that have been added to each row in the table with ID 'MYTABLEID'. Those properties exist on each row in the data-store, but are not included in the DOM of the table that appears in the UI. These properties are named “hiddenColumn1” and “hiddenColumn2”. If either of these hidden properties is found on an object, a hidden input field is generated that identifies the object [row.get (“objectHandle”)] and the hidden value itself (“hiddenColumn1”, etc.) and which specifies a not-very-useful constant value.

The example also shows how to add a hidden input value that is not associated with any hidden column, but still identifies a specific object (see the second call to JCAappendFormHiddenInput, above).

Of course, this same type of listener could be used to add, change, or remove any desired data to the form before it is submitted; it is not limited to manipulating so-called “data store only” fields.

Extract hidden input values in the wizard's FormProcessor

The final step is to extract the submitted hidden input values that were added by the application's 'submit' listener, within a suitable method of the wizard's form processor:

for (ObjectBean objBean : objectBeans)
{
final String paramKeyFoo = "noColumn";
final String paramKeyCol1 = "hiddenColumn1";
final String paramKeyCol2 = "hiddenColumn2";

String paramFoo = objBean.getTextParameter (paramKeyFoo);
String paramCol1 = objBean.getTextParameter (paramKeyCol1);
String paramCol2 = objBean.getTextParameter (paramKeyCol2);

log.error ("\nkey = " + paramKeyFoo + "\nvalue = " + paramFoo);
log.error ("\nkey = " + paramKeyCol1 + "\nvalue = " + paramCol1);
log.error ("\nkey = " + paramKeyCol2 + "\nvalue = " + paramCol2);
}

This results in output which will include something like the following code, which shows the three client-side generated values that were added to the object by the Javascript 'submit' listener shown earlier.

KEY = noColumn
VALUE = FOO_BAR_BIZ_BAZ

KEY = hiddenColumn1
VALUE = HIDDEN_COLUMN_1_GENERATED_VALUE

KEY = hiddenColumn2
VALUE = HIDDEN_COLUMN_2_GENERATED_VALUE

Parent topic

Client Generated Form Data

Est-ce que cela a été utile ?