Symphony.

Hello, all!

I have a section named "contacts" with a single field called name. I created an event named Contact Submit to create new contact entries and added that event to a page called "contact".

To properly activate the Contact Submit event I have to pass each form field in the form of action[contact-submit] (the array with the name of the event in it) and fields[name]: 'John' (to fill in the name field of the contact section entry). It works fine.

However, as you may (or may not know) AngularJS works a little different than that. In Angular, I have an object person: {name: 'John'}. Using the $http service, when I try to submit this, the event will simply ignore the request, since the data is not being passed in the form Symphony requires it.

Is this the intended behavior of Symphony Events? Any ideas on how to deal with this?

I did also pass the data in the form of: person: { action: ['booking-submit'], fields: { name: 'John' } } but again, nothing happened.

SOLVED:

tl;dr

At first I thought about jQuery, but it weights 84kb, and I'm using AngularJS already. However, here are the two ways to solve this:

The URL:

The URL format you want is as follows: http://foo.bar/contact/?action[your-action]=&fields[name]=John

Where action[your-action] triggers the event by event name. And fields[name]=John targets each field by name and assigns some value to it.

The data structure:

Your data structure should contain at least an action object and a fields object.

$scope.person = { action: { 'contact-submit': '' }, fields: { name: 'John' } }

---

THE SOLUTIONS

Using jQuery

Using jQuery $.param: The data Symphony wants is the decoded representation of the serialization of the data. jQuery $.param serves for that matter:

decodeURIComponent( $.param( $scope.person ) )

Using AngularJS

Using AngularJS own method: AngularJS has a similar method to serialize your data, and it's based on jQuery $.param method. Is a service named $httpParamSerializerJQLike:

decodeURIComponent($httpParamSerializerJQLike($scope.person))

BONUS: Keeping data integrity in AngularJS

To keep AngularJS data integrity ($scope.person{ name: 'John' }) you can use AngularJS built-in $http transformRequest property in the $http configuration object as follows:

configObj = {method: 'POST', url: '...', headers: '...', transformRequest: function (data) { result = { action: { booking: '' }, fields: data }; return decodeURIComponent($httpParamSerializerJQLike(result)); }, data: $scope.person }

---

DON'T FORGET ABOUT THE CONTENT-TYPE

The Content-Type http header Remember also to set the proper Content-Type header based on Symphony requirements. This is my full $http configuration object:

postObj = { method: 'POST', url: 'http://foo.bar/contact/', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: decodeURIComponent($httpParamSerializerJQLike($scope.person)) };

---

SOURCES:

jQuery $.param method

AngularJS $httpParamSerializerJQLike Service

Javascript decodeURIComponent method

AngularJS $http service data transformations

Thanks for posting the solution as well!