Nested Content form name Angular filter

[konius]

Currently there isn't a way to get a form name (at least one that I can find anywhere?)

Based on an existing 'ncNodeName' filter can something like this be added to Core and documented?

var ufNameCache = {
    id: "",
    keys: {}
}

angular.module("umbraco.filters").filter("ufName",
    function(formPickerResource) {
        return function (input) {
            var formId = "";

            if (typeof input === 'string' || input instanceof String) {
                formId = input;
            } else {
                formId = input.values["en-GB"];
            }
            
            if (formId === '') {
                return 'Please pick a form...';
            }
            
            if (ufNameCache.keys[formId]) {
                return ufNameCache.keys[formId];
            }

            ufNameCache.keys[formId] = 'Loading...';

            formPickerResource.getPickedForm(formId)
                .then(function(ent) {
                    ufNameCache.keys[formId] = ent.name;
                });

            return ufNameCache.keys[formId];
        }
    });

[nul800sebastiaan]

Hey there @konius - thanks for the feature request, we'll put it on the list of ideas to look at in the future!

[konius]

Could we revisit maybe? The base code is there.. could be improved as this is still referencing Vorto use case.

Currently if a form is picked we can show only the Guid which is super not user friendly for nested content or block list item.

[MMasey]

Hey @nul800sebastiaan & @AndyButland, what do you think the chances are of getting something like this built in. We recently added a similar script to one of our projects and it creates an improvement from both a UX and accessibility perspective. The ability to clearly communicate which form is currently selected would help from an Authoring Tool Accessibility Guidelines (ATAG) perspective too.

[AndyButland]

Hi @MMasey - we've got this coming in 10.2 for the block list (resolving #879). I'll check if it "just works" with nested content or if not if we can make it do so.

[MMasey]

Ah cool, this is the code we've used if it will help

// Based on the ncNodeName filter found here:
// https://github.com/umbraco/Umbraco-CMS/blob/v10/contrib/src/Umbraco.Web.UI.Client/src/common/filters/nestedcontent.filter.js
// Filter to take a form ID and grab its name instead
// Usage: {{ pickerAlias | ncFormName }}
// Cache for form names so we don't make a ton of requests
var ncFormNameCache = {
	id: "",
	keys: {},
};
angular
	.module("umbraco.filters")
	.filter("ncFormName", function (editorState, formPickerResource) {
		formNameFilter.$stateful = true;
		function formNameFilter(input) {
			// Check we have a value at all
			if (
				typeof input === "undefined" ||
				input === "" ||
				input === null ||
				input.toString() === "0"
			) {
				return "";
			}
			var currentNode = editorState.getCurrent();
			// Ensure a unique cache per editor instance
			var key = "ncFormName_" + currentNode.key;
			if (ncFormNameCache.id !== key) {
				ncFormNameCache.id = key;
				ncFormNameCache.keys = {};
			}
			var serviceInvoked = false;
			// See if there is a value in the cache and use that
			if (ncFormNameCache.keys[input]) {
				return ncFormNameCache.keys[input];
			}
			// No value, so go fetch one
			// We'll put a temp value in the cache though so we don't
			// make a load of requests while we wait for a response
			ncFormNameCache.keys[input] = "Loading...";
			// If the service has already been invoked, don't do it again
			if (serviceInvoked) {
				return ncFormNameCache.keys[input];
			}
			serviceInvoked = true;
			if (input) {
				formPickerResource
					.getPickedForm(input)
					.then(function (form) {
						ncFormNameCache.keys[input] = form.name;
					})
					.catch(function () {
						ncFormNameCache.keys[input] = "Error: Could not load";
					});
			} else {
				ncFormNameCache.keys[input] = "Error: Not a form ID";
			}
			// Return the current value for now
			return ncFormNameCache.keys[input];
		}
		return formNameFilter;
	});

[konius]

Finally 👏🏻

[AndyButland]

The umbFormsFormName filter we've added for the block list in #879 will be available for nested content too.