Identifying attributes and data sources for use in Freedom UI handlers

Often, identifying the right attributes to hook into for other handlers can be quite difficult and elusive in Freedom UI. I've used the following handler for quite some time on many pages when I'm trying to identify/build new hooks/triggers for my page handlers. This handler can be widely used to determine what some of those elusive properties on a page are (like _List behaviors from one of my other articles).

Simply copy/paste this handler into your Freedom UI handlers section, then check your browser console for a verbose output of any/all attribute changes for the page.

Note - make sure you use this handler only in a dev as you'll likely get some negative performance impacts from using this with many users in a production environment.

            {
                "request": "crt.HandleViewModelAttributeChangeRequest",
                "handler": async (request, next) => {
                    // Log the name of the attribute that changed and its new value
                    console.log(`[CHANGE] Attribute changed: '${request.attributeName}' | New value:`, request.value);      
                    return next?.handle(request);
                }
            },


Bonus: you can also use a flavor of this handler to intercept and identify data from many other handler sources as well, for example, a LoadDataRequest:

            {
                "request": "crt.LoadDataRequest",
                "handler": async (request, next) => {
                    // Log the name of the loaded data source
                    console.log(`[LOAD] Data loaded: '${request.dataSourceName}'`);
                    return next?.handle(request);
                }
            },

Enjoy!