I spent some time creating a custom Sitecore Forms action, following the walkthrough on the much improved Sitecore Documentation Site.

First Issue I had with the walkthrough was that there was some missing code in the “UpdateContact” Submit Action code. The implementation of GetValue, SetPersonalInformation and SetEmail were all missing from the code sample on the walkthrough. Luckily, there were a number of blog posts that had the missing code, so I suspect it’s just a problem with the version of the documentation. Here is the missing code for those who need it:

        /// The field.
        /// The field value.
        private static string GetValue(object field)
        {
            return field?.GetType().GetProperty("Value")?.GetValue(field, null)?.ToString() ?? string.Empty;
        }

        ///<summary>
        ///     Sets the  facet of the specified .
        /// </summary>

        /// The first name.
        /// The last name.
        /// The contact.
        /// The client.
        private static void SetPersonalInformation(string firstName, string lastName, Contact contact,
            IXdbContext client)
        {
            if (string.IsNullOrEmpty(firstName) && string.IsNullOrEmpty(lastName))
                return;
            var personalInfoFacet = contact.Personal() ?? new PersonalInformation();
            if (personalInfoFacet.FirstName == firstName && personalInfoFacet.LastName == lastName)
                return;
            personalInfoFacet.FirstName = firstName;
            personalInfoFacet.LastName = lastName;
            client.SetPersonal(contact, personalInfoFacet);
        }

        ///<summary>
        ///     Sets the  facet of the specified .
        /// </summary>

        /// The email address.
        /// The contact.
        /// The client.
        private static void SetEmail(string email, Contact contact, IXdbContext client)
        {
            if (string.IsNullOrEmpty(email))
                return;
            var emailFacet = contact.Emails();
            if (emailFacet == null)
            {
                emailFacet = new EmailAddressList(new EmailAddress(email, false), "Preferred");
            }
            else
            {
                if (emailFacet.PreferredEmail?.SmtpAddress == email)
                    return;
                emailFacet.PreferredEmail = new EmailAddress(email, false);
            }
            client.SetEmails(contact, emailFacet);
        }

Once that was cleared away, I could get everything else built and deployed to my local instance. I could even add my custom action to the submit button of my form, but every time I selected fields to map, it never actually saved the mapping. After attempting to step through Chrome dev tools javaScript debugger, I could see the Item ID’s were empty and was struggling to understand what was happening.

I began to search google for code from the JavaScript file and found a complete implementation of this walkthrough on github. Since I already implemented the walk through, I didn’t want to take the easy way out and use it, so I started comparing the differences when I noticed that the case of the ValueFieldName in the three FormDropList parameters was a little different. Instead of “ItemId” as is specified in the walkthrough, the unicorn yml file should it as “itemId.” Looking at the js file, I can see why it wasn’t working as it’s explicitly using the camel case version in code.

memo.push({itemId: item.itemId,name: item.model.name});

Updating the case of the three parameters fixed the issue. After that the rest of the code worked as expected.