using checkboxlist for meta robots content

Henrik Vincent 122 posts 616 karma points

Jun 07, 2018 @ 10:39

Hi guys

I'm trying to use a checkbox list for adding values to content i a tag.

I've made a similar function, where I use 2 true/false, but would like to see if it's possible, to just use a checkboxlist instead.

Are these only for adding the value of the checkbox or could you do a if/else statement, to add noindex, if noindex box is checked, and as deafult add index, if it isnt?

enter image description here

Is this possible, or should I stick with the 2x checkbox way?

Best

Henrik

Copy Link

Nik 1614 posts 7260 karma points MVP 7x c-trib

Jun 14, 2018 @ 08:59

Hi Henrik,

In all honest it actually depends what you find easiest to process in your front end code. Ease of code is probably separate check boxes, but a nicer editor experience is probably the checkbox list.

There is a third option which is what I've actually done is create my own property editor completely for Robots meta which contains 2 check boxes but it handles the if behaviour in the back office so I can just render out the final value for that field on the front end.

I based it on this existing package but as I wanted to separate components out I effectively created my own version. https://our.umbraco.org/projects/developer-tools/useo-pro/ so it could be worth looking at that :-)

Nik

Copy Link

Henrik Vincent 122 posts 616 karma points

Jun 14, 2018 @ 12:50

Hi Nik

Thanks a bunch for your reply.

That's a real nice way to do it.

I haven't worked with Property Editors before, but I followed your advice, and downloaded the uSeoPro.

After looking at the source, I've come up with this so far:

HTML:

<div ng-controller="MetaRobotsController">
    <div class="robots">
        <h5>Robot Settings</h5>
        <div>
            <h6>Robots Meta NOINDEX</h6>
            <input type="checkbox" ng-model="noindex"> 
        </div>
        <div>
            <h6>Robots Meta NOFOLLOW</h6>
            <input type="checkbox" ng-model="nofollow"> 
        </div>
        <h5>Tag Preview</h5>
        <code>
            &lt;meta name=&quot;robots&quot; content=&quot;<span>{{robots}}</span>&quot; /&gt;
        </code>
    </div>
</div>

Controller:

angular.module("umbraco")
    .controller("MetaRobotsController",
    function ($scope, editorState, entityResource, contentEditingHelper, $http, $rootScope) {


        $scope.noindex = $scope.model.value.noindex;
        $scope.nofollow = $scope.model.value.nofollow;



        $scope.$watch("noindex", function () {
            $scope.UpdateModel();
        });

        $scope.$watch("nofollow", function () {
            $scope.UpdateModel();
        });

        $scope.UpdateModel = function () {
            var r1 = "";
            if ($scope.noindex == true || $scope.nofollow == true) {
                r1 += $scope.noindex == true ? "noindex," : "index,";
                r1 += $scope.nofollow == true ? "nofollow" : "follow";
            }
            $scope.robots = r1;

            $scope.model.value = {
                noindex: $scope.noindex, nofollow: $scope.nofollow,
                robots: r1
            };
        };
    });

This works, but my question now is, how to actually get the code into my template. When rendering the field in the tempalte, I get the following:

{ "noindex": true, "nofollow": false, "robots": "noindex,follow" }

How should I go about, to just get the actual "noindex,follow" (from the example above), printed in my empty tag? And can I put a default content (index,follow), when neither noindex nor nofollow is selected

Copy Link

Henrik Vincent 122 posts 616 karma points

Jun 14, 2018 @ 13:50

Okay. So I did a little trial and error and ended up with the following changes to my controller, and got it working.

So first of I changed a little in the vars, to get index,follow when none of the checkboxes were checked:

var r1 = "index";
var r2 = "follow";

Next off, instead of adding to the r1, I set r1 to only handle noindex/index and r2 to only handle nofollow/follow.

r1 = $scope.noindex == true ? "noindex" : "index";
r2 = $scope.nofollow == true ? "nofollow" : "follow";

I also removed the comma inside the noindex/index, added r1 and r2 to an array and then joined it:

$scope.robots = [r1,r2].join();

Then for the other part on how to render it in the template, I changed the last object to a string and added the surrounding meta-tag:

$scope.model.value = '<meta name="robots" content="'+$scope.robots+'">';

The final controller looks like this:

angular.module("umbraco")
    .controller("MetaRobotsController",
    function ($scope, editorState, entityResource, contentEditingHelper) {


        $scope.noindex = $scope.model.value.noindex;
        $scope.nofollow = $scope.model.value.nofollow;

        $scope.$watch("noindex", function () {
            $scope.UpdateModel();
        });

        $scope.$watch("nofollow", function () {
            $scope.UpdateModel();
        });

        $scope.UpdateModel = function () {
            var r1 = "index";
            var r2 = "follow";
            if ($scope.noindex == true || $scope.nofollow == true) {
                r1 = $scope.noindex == true ? "noindex" : "index";
                r2 = $scope.nofollow == true ? "nofollow" : "follow";
            }
            $scope.robots = [r1,r2].join();

            $scope.model.value = '<meta name="robots" content="'+$scope.robots+'">';
        };
    });

Copy Link

Nik 1614 posts 7260 karma points MVP 7x c-trib

Jun 14, 2018 @ 14:08

Nice work on getting it working :-)

Property editors are great things, I highly recommending looking into them more, but remember sometimes it's best to use whats there than build your own. Umbraco strives to keep editor experience simple and fluid so just keep that in mind when thinking about making your own editors :-)

Congrats again :-)

Copy Link

Henrik Vincent 122 posts 616 karma points

Jun 15, 2018 @ 06:27

Thanks Nik

Yea they're awesome, and definitely something I'll look more into.

I aware that sometimes the built-in editors are preferable, but it's fun learning new stuff, and I like that you can style the elements in the back office with the property editors. Also started doing alot of custom views for different page types, which is also awesome for editors.

Thanks again for suggesting uSEO which was a great starting point to getting started with the property editor.

Have a great weekend!

Best

Henrik

Copy Link

is working on a reply...

Flag this post as spam?

Using CheckBoxList for meta robots content