Nibble

Advanced property editor for Umbraco v7, working with custom data

These prop editor posts just keep coming Winking smile

Is this one I’ll outline how to fetch some third party data in your prop editor

So first I’ll need to expose some data using an API controller

    [PluginController("Contour")]
    public class FormsApiController : UmbracoAuthorizedJsonController
    {
        public IEnumerable<Models.Form> GetAll()
        {
            var forms = new List<Models.Form>();
            FormStorage s = new FormStorage();
 
            foreach (var form in s.GetAllForms(false))
            {
                if (UI.Security.HasAccessToForm(form.Id))
                {
                    Models.Form f = new Models.Form();
                    f.Id = form.Id;
                    f.Name = form.Name;
                    f.Fields = GetFormFields(form);
                    forms.Add(f);
                }
            }
            s.Dispose();
 
            return forms;
        }
}

Notice that I’m using an UmbracoAuthorizedJsonController to make sure only logged in Umbraco backoffice users have access…

Then I’m simply returning a list of Forms (forms is a custom model that looks like)

 public class Form
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public string Fields { get; set; }
    }

So I’m using Contour to fetch all forms (but since those have to much data I’m creating them as my simple form object) and then returning them a a list.

So that’s the api controller done,

Next is the angular controller

angular.module("umbraco").controller("Contour.FormPickerController",
        function ($scope, $http) {
            $scope.loading = true;
            $http({ method: ‘GET’, url: ‘Contour/FormsApi/GetAll’ })
                .success(function (data) {
                    $scope.forms  = data;
                    $scope.loading = false;
                })
                .error(function () {
                    $scope.error = "An Error has occured while loading!";
                    $scope.loading = false;
                });
        });

So it does a get request of Contour/FormsApi/GetAll (that is where we’ll find our api controller method since this is auto routed) and assigns the result to $scope.forms

And the final bit, the view looks like

 <div ng-controller="Contour.FormPickerController">
     
     <div class="radio" ng-repeat="form in forms">
         <label>
             <input ng-model="model.value" value="{{form.Id}}" type="radio" name="form">
             {{form.Name}}
             <small>{{form.Fields}}</small>
         </label>
     </div>
 
 </div>

So it’s just looping the form objects and outputting them as radiobuttons (setting model.value)

End result looks like

FormPicker

You’ll see that in this example the data is fetched async ideally I would also like to set a scope object on load, maybe that’s something for the next post Winking smile

Leave a Reply