[REL-1066770] Add custom item list example (#3)

This example demonstrates a basic event handler that adds a custom item
list to a layout. This slightly modifies the example listed on this
page:
https://platform.relativity.com/RelativityOne/Content/FormsAPI/Item_list_event_handlers.htm


https://github.com/user-attachments/assets/dbef5fbd-457c-4df2-926c-4332e3fa3c5a

Author: john-aldana

examples/JsEventHandlerExamples/custom-item-list.js

@@ -0,0 +1,81 @@
+(function(eventNames, convenienceApi) {
+    const eventHandlers = {};
+    const COLUMN_1_ID = 1000001;
+    const COLUMN_2_ID = 1000002;
+    
+    eventHandlers[eventNames.TRANSFORM_LAYOUT] = function(layoutData) {        
+        layoutData.push({
+            Elements: [{
+                "View": {
+                    "Name": "Test",
+                    "ArtifactID": 0, // Artifact ID of the view.
+                    "FieldsIds": [COLUMN_1_ID, COLUMN_2_ID], // Artifact IDs of the fields.
+                    "Sorts": [],
+                    "RenderLinks": true,
+                    "HasConditions": false,
+                    "GroupDefinitionFieldName": "",
+                    "QueryHint": "",
+                    ObjectTypeID: 0
+                },
+                "FieldCollection": [{
+                        AvfID: COLUMN_1_ID,
+                        "IsVisible": true,
+                        "ItemListType": "Text",
+                        "IsSortable": true,
+                        HeaderName: "Modified By"
+                    },
+                    {
+                        AvfID: COLUMN_2_ID,
+                        "IsVisible": true,
+                        "ItemListType": "Text",
+                        "IsSortable": true,
+                        HeaderName: "Modified On"
+                    }
+                ]
+            }]
+        });
+    };
+
+    eventHandlers[eventNames.ITEM_LIST_MODIFY_ACTIONS] = function(itemListActionsApi, itemListView) {        
+        // Override default item list action bar buttons to show no buttons
+        itemListActionsApi.initialize();
+
+        // Add an item list action bar button to refresh the item list
+        const customAction = itemListActionsApi.addAction(convenienceApi.constants.ACTION_TYPES.NEW);
+        customAction.title = "Refresh";
+        customAction.action = function() {
+            const historyItemListFieldId = self.fieldNameToFieldIdMap.get(HISTORY_ITEM_LIST_NAME);
+
+            convenienceApi.fieldHelper.getHtmlElement(historyItemListFieldId).then(function(itemListElement) {
+                const refreshEvent = document.createEvent("Event");
+                refreshEvent.initEvent("reloadItemListData", true, true);
+                itemListElement.dispatchEvent(refreshEvent);
+            });
+        }
+
+        // Override item list data source
+        itemListActionsApi.setCustomGetDataFunction(function(category, request) {
+            // Create some example data to show in the item list with the current date.
+            // That way the Modified On time will update to the current time when the item list refreshes.
+            const currentDate = new Date();
+            const exampleData = [
+                {
+                    "ArtifactID": 1000010,
+                    "Modified By": "Test User",
+                    "Modified On": currentDate.toString()
+                }, {
+                    "ArtifactID": 1000011,
+                    "Modified By": "Test User 2",
+                    "Modified On": currentDate.toString()
+                }
+            ];
+
+            return {
+                TotalCount: exampleData.length,
+                Results: exampleData
+            };
+        });
+    };
+    
+    return eventHandlers;
+})(eventNames, convenienceApi);

examples/README.md

@@ -35,5 +35,8 @@ For detailed instructions on how to build a Relativity Forms Javascript Event Ha
 * [Add a field to a layout programmatically](./JsEventHandlerExamples/transformLayout-addField.js)
 * [Remove a category](./JsEventHandlerExamples/multi-field-manipulation.js)
 
+### Item List
+* [Adding a custom item list](./JsEventHandlerExamples/custom-item-list.js)
+
 ## Contributing
 If you have an example that you would like to contribute to our Relativity Forms Developer Community, please follow the steps in the [CONTRIBUTING.md](./CONTRIBUTING.md).