it is possible to render html template in umbraco backend - Extending Umbraco

Enrico 47 posts 252 karma points

Feb 17, 2016 @ 17:05

Is it possible to render html code in the Umbraco backend?

Extending Umbraco

Umbraco 7

Hello everyone,

I was trying to render Html code in the Umbraco Backend, but I can't

I created a new property editor containing a simple div and I wanted to get some html code from a backend controller and render it.

The purpose, in the future, is to save an email template in a textbox and having a preview inside the property editor.

This is the code of the manifest file:

{
  propertyEditors: [
    {
            alias: "TemplateEditor",
            name: "Email Template Editor",
            editor: {
                view: "~/App_Plugins/TemplateEditor/editor.html",
                valueType: "JSON"
            }
    },
  ],
  javascript: [
      '~/App_Plugins/TemplateEditor/editor.controller.js',
  ],
  css: [
      '~/App_Plugins/TemplateEditor/editor.css'
  ]
}

This is the code of editor.html

<div ng-controller="EmailTemplateEditor" class="umb-editor list-wrapper">

    <p ng-bind="msg" class="msg"></p>

    <div class="email-template" ng-bind="template" ng-bind-html-unsafe="template"></div>
</div>

This is the code of editor.controller.js

var app = angular.module('umbraco');

app.factory('editorService', function ($http) {
    return {
        getTemplate: function (id) {
            return $http.get('/umbraco/backoffice/api/EmailTemplateEditorBackend/GetTemplate?id=' + id);
        }

    }
});

app.controller('EmailTemplateEditor', function ($scope, $routeParams, editorService) {
    var nodeId = $routeParams.id;
    $scope.msg = nodeId;

    editorService.getTemplate(nodeId).then(function (d) {
        $scope.template = d.data;
    });


});

This is the code of the backend controller

[IsBackOffice]
    public class EmailTemplateEditorBackendController : UmbracoAuthorizedApiController
    {
        [System.Web.Http.HttpGet]
        public string GetTemplate(string id){
            string tt = "";
            IPublishedContent model = Umbraco.TypedContent(id);

            // tt = "<p><u><b>TEST DIV  test passed " + id + "</b></u></p>";

            tt = model.GetPropertyValue<string>("htmlText");

            return tt;
        }
    }

This is the final result the html code is not rendered properly

enter image description here

Copy Link

Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib

Feb 17, 2016 @ 17:15

Hi Enrico,

Maybe you can change this line in your view :

 <div class="email-template"  ng-bind-html-unsafe="template"></div>

You had 2 bind directives in there

Dave

Copy Link

Enrico 47 posts 252 karma points

Feb 17, 2016 @ 17:17

Hi Dave,

thanks for your suggestion. But the result remains the same. The Html does not render properly.

Copy Link

Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib

Feb 17, 2016 @ 17:23

Maybe you should output the result of the API call to the console to see if there are no issues with it.

Because i'm actually doing the same in a property editor and that works just fine :

https://bitbucket.org/dawoe/embed-property-editor/src/1720f8b0e81b0723241f25f4def3e7451ad244bd/Sources/Dawoe.OEmbedPickerPropertyEditor/Views/editor.html?at=master&fileviewer=file-view-default#editor.html-4

Dave

Copy Link

Enrico 47 posts 252 karma points

Feb 17, 2016 @ 17:34

I will try to output the Api result to the Chrome Extension Postman and see what happens.

Thanks for your help

I will let you know

Copy Link

Enrico 47 posts 252 karma points

Feb 18, 2016 @ 09:43

I tried to return a test string from the Api controller

This is the code of the controller

[IsBackOffice]
    public class EmailTemplateEditorBackendController : UmbracoAuthorizedApiController
    {
        [System.Web.Http.HttpGet]
        public string GetTemplate(string id){
            string tt = "";


            tt = "<p><u><b>TEST DIV  test passed " + id + "</b></u></p>";



            return tt;
        }
    }

This is the result:

enter image description here

As you can see the HTML is rendered with inside two double quotes.

I read some topic around and I tried to use $sce to render the code, but is not possible in the Umbraco back end.

Copy Link

Kasper Holm 47 posts 180 karma points

Feb 18, 2016 @ 09:57

Hello Enrico

Can you try changing the

 tt = model.GetPropertyValue<string>("htmlText");

to

 tt = model.GetPropertyValue<IHtmlString>("htmlText");

Copy Link

Enrico 47 posts 252 karma points

Feb 18, 2016 @ 10:37

Hello Kasper,

thanks for your help.

I tried your solution, but I get a null result using IHtmlString.

Copy Link

Enrico 47 posts 252 karma points

Feb 18, 2016 @ 12:45

Hello guys,

did anyone of you used $sce with Umbraco Backend to escape html code?

Copy Link

Enrico 47 posts 252 karma points

Feb 18, 2016 @ 15:58

I just discovered that outside Umbraco backend it works.

I created a basic html page using the same libraries used in the backend

This is the code :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="umbraco">
<head>
    <title></title>
    <script src="/umbraco/lib/angular/1.1.5/angular.min.js"></script>

    <script>

        var app = angular.module('umbraco', []);

        app.factory('editorService', function ($http) {
            return {
                getTemplate: function (id) {
                    return $http.get('/umbraco/surface/EmailTemplateEditor/getTemplate?id=' + id);
                }

            }
        });

        app.controller('testController', function ($scope, editorService) {
            var nodeId = 1426;
            editorService.getTemplate(nodeId).then(function (d) {
                $scope.template = d.data;
            });
        });

    </script>
</head>
<body>
    <div ng-controller="testController">
        <div class="blank" ng-bind-html-unsafe="template"></div>
    </div>
</body>
</html>

And it renders the html code without any problems.

Why is not not doing the same in Umbraco backend?

Copy Link

Enrico 47 posts 252 karma points

Feb 18, 2016 @ 16:55

I found the solution.

I hope this could be useful.

This is the updated code of the backend controller

[IsBackOffice]
    public class EmailTemplateEditorBackendController : UmbracoAuthorizedApiController
    {
        [System.Web.Http.HttpGet]
        public HttpResponseMessage GetTemplate(string id)
        {

            IPublishedContent model = Umbraco.TypedContent(id);

            var tt = model.GetPropertyValue<string>("htmlText");

            var response = new HttpResponseMessage();
            response.Content = new StringContent(tt);
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");



            return response;
        }
    }

Copy Link

is working on a reply...

Flag this post as spam?

Is it possible to render html code in the Umbraco backend?