Add Support for Multi-Edit Actions (Step 4)
In order to support multi-select actions in either a light-box or popup dialog, upon dismissing the prompting window, it is important to ensure the data is properly updated. The change link tables take advantage of a new table data manager store that has been added to support:
• Retaining values when paging and sorting
• Efficient storage of values without serialization of DOM elements (only META data)
• After edit, items should be placed in the table data manager store by accessing the JavaScript method:
PTC.change.linkAttributeHelper.update(item, tableId);
• Item is a Javascript object made up of an id and value. The id should be of the form:
rowOid#component_id (… VR:wt.part.WTPart:5556#regulatoryAffected)
• It is recommended to disable events while manipulating the data stores (suspendEvents/resumeEvents)
• The table may be updated by calling the following if the table’s records are committed in their store:
table.view.doPartialDataChange();
Example
The following code provides an example for the operations needed on completing the editing multiple rows and updating the table.
01 function updateRecords(isChecked, componentId, tableId) {
02 var table = tableUtils.getTable(tableId);
03 var store = table.getStore();
04 store.suspendEvents();
05 var selections = table.getSelectionModel().getSelections();
06 for(var i=0,l=selections.length; i<l; i++) {
07 var record = selections[i];
08 record.data[componentId] = isChecked;
09 record.commit();
10 var oid = record.get('oid');
11 if(oid) {
12 var item = {
13 id : oid+SEP+componentId,
14 value : isChecked
15 };
16 PTC.change.linkAttributeHelper.update(item, tableId);
17 }
18 }
19 store.resumeEvents();
20 // re-draw displayed rows where data has changed.
21 table.view.doPartialDataChange();
22 }
23
02 var table = tableUtils.getTable(tableId);
03 var store = table.getStore();
04 store.suspendEvents();
05 var selections = table.getSelectionModel().getSelections();
06 for(var i=0,l=selections.length; i<l; i++) {
07 var record = selections[i];
08 record.data[componentId] = isChecked;
09 record.commit();
10 var oid = record.get('oid');
11 if(oid) {
12 var item = {
13 id : oid+SEP+componentId,
14 value : isChecked
15 };
16 PTC.change.linkAttributeHelper.update(item, tableId);
17 }
18 }
19 store.resumeEvents();
20 // re-draw displayed rows where data has changed.
21 table.view.doPartialDataChange();
22 }
23
Key to code sample:
• Line 04 – Suspend Events
• Line 08 – Updates text in table cell
• Line 13 – Generate ID readable by change data utilities and form delegates
• Line 16 – Store the data item in the Table Data Manager store
• Line 19 – Resume Events
• Line 21 – Visually update the table with just what changed
Process
In order to use a lightbox or popup dialog from the tables, the launch action must be added to the actions list of the table.
1. Create a custom actions file based on ChangeManagement-actions.xml, and register this file at the end of the property “com.ptc.netmarkets.util.misc.defaultActions“ in wt.properties.
2. Create a custom action models file based on ChangeManagement-actionsModel.xml and register this file at the end of the property com.ptc.netmarkets.util.misc.defaultActionmodels in wt.properties.
3. Copy the change objecttype and only the desired actions to be overridden to the custom actions.xml file. For this customization example use “regulatoryAffected” and action “setRegulatoryAffected” with selectRequired=“true”.
4. Set the command to onClick a JS function to launch your lightbox/popup dialog.
5. Add the action “regulatoryAffected.setRegulatoryAffected” in the custom actionModels.xml file.
 |
By overwriting the action model in a custom actionModels.xml, it is not necessary to update the MVC table builder because it is already pointing to this named action model.
|