Sitefinity Feather Designer Tip: Updating Fields Programatically

By November 21, 2016AngularJS, Sitefinity
sitefinity-feather-designer-preload-message

I recently needed to create a custom designer for a Sitefinity MVC Widget that would allow a property to be filled in programatically (such as clicking an option in a list).  Populating the field was simple enough using jQuery, and here is a very simple example demonstrating the desired behavior:

Clicking the button does indeed did populate the message property:

sitefinity-feather-designer-preload-message

However, when I saved the changes, the output of the widget message property was still blank:

sitefinity-feather-designer-preloaded-message-empty

It turns out that this makes sense, because the widget designer is using Angular JS to bind its properties back to the widget, and updating the input field via jQuery isn’t actually triggering the binding.

Fortunately this was easy enough to fix by adding a manual trigger to the change event in the click handler:

This saves the field changes back to the model, and displays the saved message properly in the widget output:

sitefinity-feather-designer-preloaded-message

Now, out of sheer curiosity i wondered if there was a way to do this in straight JavaScript and Angular, instead of mixing and matching with jQuery. After searching the web a bit I found just the solution I was seeking on StackOverflow: http://stackoverflow.com/a/22942828

I followed the example and handled the click event of the button, manually binding to the same scope properties, and sure enough, it works!

Here is the updated code for the designer:

The jQuery solution works well enough, but it’s interesting to discover this alternative method, and thought it might be worth sharing. I’m interested to see if accessing the scope this way might allow some other helpful designer tricks. I plan to do some experimenting, and if it yields anything interesting, I’ll be sure to followup with another post.

In the meantime, as always I hope this was helpful, and thanks for reading!


Also published on Medium.

The following two tabs change content below.
  • Nick Shawn Wilhelm

    I’m new to Sitefinity and might be missing some kind of restrictions but why not use ng-click on the button and use the angular controller to change the message?

    • Hi Nick, yes that is definitely an option, but the issue there is that by default, the model for your designer controller is generated automatically by sitefinity. if you want to add a function, property or other custom change to that controller you have to build it yourself and use it instead. If you do that, then yes you can just do an ng-click to that event.

      If your experience is different please do share it as I know Feather has changed a lot recently!