Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Heveen 6 posts 86 karma points
    Oct 18, 2018 @ 07:43
    Heveen
    0

    How to display Server Side Data on a page

    Hello Guys

    I'm going through the Tutorials of Belle Api Documentation. And I am on the tutorial Add Server Side Data.

    Everything work perfect in the back office.

    But I am not able to display the data on the main website.

    1.This is my package manifest

    {
    propertyEditors:
    [
        {
            alias: "PersonResource",
            name: "PersonResource",
            editor:
            {
                view:"~/App_Plugins/Person/personresource.html"
            }
        }
    ],
    
    javascript:
    [
        "~/App_Plugins/Person/person.resource.js",
        "~/App_Plugins/Person/personpicker.controller.js"
    ]}
    

    my js codes

    person.resource.js

    (function () {
    
    //Add the resource to umbraco.resources modules:
    
    angular.module('umbraco.resources').factory('personResource', function ($q, $http, umbRequestHelper)
    //This uses the standard angular factory pattern, so we can now inject this into any of our controllers under the name personResource.
    {
        //the factory object returned
        return {
            //this calls the Api controller we set up earlier
            getAll: function () {
                //return umbRequestHelper.resourcePromise($http.get("http://mysite.local/umbraco/My/PersonApi/GetAll"), "Failed to retrieve all Person data");
                return $http.get("http://mysite.local/umbraco/My/PersonApi/GetAll");
            }
        };
    });})();
    

    personpicker.controller.js

    (function () {
    
    angular.module("umbraco")
        .controller("My.PersonPickerController", function ($scope, personResource) {
            personResource.getAll().then(function (response) {
                $scope.people = response.data;                
            });
        });})();
    

    personapicontroller

    personapicontroller

    personresource.hmtl

    personresource.html

    The data in backoffice is indeed being displayed as shown below.

    enter image description here

    But I am not able to display it on the website

    This is the code I have written on the template.

    code on template

    Can you guys what I'm doing wrong? Maybe the code I have written on the template is not right.

    The belle tutorials really lack proper documentation. :(

    Thank you

  • MuirisOG 382 posts 1284 karma points
    Oct 19, 2018 @ 16:17
    MuirisOG
    0

    Heveen,

    You've listed the people in the backoffice screen, but have you actually assigned a value to the field you want to display?

    Muiris

  • Heveen 6 posts 86 karma points
    Oct 30, 2018 @ 07:53
    Heveen
    0

    yes, thats what i did in the template.

    @umbraco.Field("personPropertySettings")

    Is it the right way?

  • MuirisOG 382 posts 1284 karma points
    Oct 31, 2018 @ 13:45
    MuirisOG
    0

    I meant did you actually assign a value in the backoffice to store in that field. You might be trying to display a value that hasn't been set.

  • Heveen 6 posts 86 karma points
    Nov 01, 2018 @ 12:10
    Heveen
    0

    Hello

    The Value is already stored in the database.

    I have followed the tutorials and able to display the values from the database in the back office.

    Now, I want to display the value on Front which I am not able to do it.

    The tutorial, unfortunately, does not provide enough information about that.

    The concept of Umbraco is to do configuration on the back office and display it on the front. But the tutorial does not explain that concept.

  • MuirisOG 382 posts 1284 karma points
    Nov 01, 2018 @ 14:37
    MuirisOG
    0

    Maybe you need to pass the model to the template, e.g.

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.YourModel>
    @using ContentModels = Umbraco.Web.PublishedContentModels;
    @{
        Layout = "SubMaster.cshtml";
    }
    

    As I'm not sure how you've set things up in the backoffice, with your Document Types and your templates, I'm shooting in the dark. What version of Umbraco are you using? Are you getting error messages?

  • Bharani Dharan Jayasuri 12 posts 126 karma points c-trib
    Nov 01, 2018 @ 16:18
    Bharani Dharan Jayasuri
    0

    I am not an expert in angular, but is this a proper way to bind a value to the model?

    <a href ng-click="model.value = Person.Name">{{Person.Name}}</a>
    

    Even then, according to your logic, I can only see the last name in the array getting bound to the model but not all of them.

    I would add another line in the function below to bind the values to the model directly once the data is successfully fetched.

    angular.module("umbraco")
        .controller("My.PersonPickerController", function ($scope, personResource) {
            personResource.getAll().then(function (response) {
                $scope.people = response.data;      
                $scope.model.value = $scope.people; //New line of code
            });
        });})();
    

    Once you save the page back, I believe the data will get bound to the "personPropertySettings" property which you can then fetch and iterate over in the front end and display the information.

  • MuirisOG 382 posts 1284 karma points
    Nov 01, 2018 @ 18:10
    MuirisOG
    0

    I remember trying this tutorial last year and found some useful tips here:

    https://github.com/TimGeyssens/UmbracoAngularBackofficePages

    which I used to cobble together a property editor.

Please Sign in or register to post replies

Write your reply to:

Draft