Sitefinity - Widget Designer

DesignerView-Simple.js

(function () {

    //add the following snippet before the definition of the custom controller:
    angular.module('designer').controller('SimpleCtrl', ['$scope', 'propertyService', function ($scope, propertyService) {

        propertyService.get().then(function (data) {
            if (data) {
                $scope.properties = propertyService.toAssociativeArray(data.Items);

                var leftModelJson = $scope.properties.LeftModelJson.PropertyValue;
                if (leftModelJson != "") {
                    $scope.leftModel = JSON.parse(leftModelJson);
                } else {
                    $scope.leftModel = [];
                }

                var rightModelJson = $scope.properties.RightModelJson.PropertyValue;
                if (rightModelJson != "") {
                    $scope.rightModel = JSON.parse(rightModelJson);
                } else {
                    $scope.rightModel = [];
                }
            }
        });

        $scope.addLeftModel = function () {
            var obj = JSON.parse('{\"Position\": 0,\"Link\": \"\",\"LinkTitle\": \"\",\"OpenNewTab\": false}');
            var position = 1;
            var length = $scope.leftModel.length;
            if (length > 0) {
                position = $scope.leftModel[length - 1].Position + 1;
            }
            obj.Position = position;
            $scope.leftModel.push(obj);
        }

        $scope.addRightModel = function () {
            var obj = JSON.parse('{\"Position\": 0,\"Link\": \"\",\"LinkTitle\": \"\",\"OpenNewTab\": false}');
            var position = 1;
            var length = $scope.rightModel.length;
            if (length > 0) {
                position = $scope.rightModel[length - 1].Position + 1;
            }
            obj.Position = position;
            $scope.rightModel.push(obj);
        }

        $scope.$watch('leftModel', function (newValue, oldValue) {
            if (newValue) {
                $scope.properties.LeftModelJson.PropertyValue = JSON.stringify(newValue);
            }
        }, true);

        $scope.$watch('rightModel', function (newValue, oldValue) {
            if (newValue) {
                $scope.properties.RightModelJson.PropertyValue = JSON.stringify(newValue);
            }
        }, true);
    }]);
})();

DesignerView.Simple.cshtml

<style>
    .tab-content {
        margin-top: 10px;
    }
</style>

<div>
    <ul class="nav nav-tabs" id="settingTab" role="tablist">
        <li class="nav-item active">
            <a class="nav-link" id="general-tab" data-toggle="tab" href="#general" role="tab" aria-controls="general" aria-selected="true">General</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="text-tab" data-toggle="tab" href="#text" role="tab" aria-controls="text" aria-selected="true">Text</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="left-link-tab" data-toggle="tab" href="#left-link" role="tab" aria-controls="left-link" aria-selected="false">Left Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="right-link-tab" data-toggle="tab" href="#right-link" role="tab" aria-controls="right-link" aria-selected="false">Right Link</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane active" id="general" role="tabpanel" aria-labelledby="general-tab">
            <!-- Current View -->
            <div class="form-group row">
                <label for="CurrentView" class="col-3 col-form-label">Current View</label>
                <select id="CurrentView" class="form-control col-9" ng-model="properties.CurrentView.PropertyValue">
                    <option value="">- Please choose a diplay view -</option>
                    <option value="Landing">Landing</option>
                    <option value="VegetationFire">Vegetation Fire</option>
                    <option value="RSS">RSS</option>
                </select>
            </div>

            <!-- CSS Class -->
            <div class="form-group row">
                <label for="CssClass" class="col-3 col-form-label">CSS class</label>
                <input type="text" id="CssClass" class="form-control col-9" ng-model="properties.CssClass.PropertyValue" />
            </div>
        </div>
        <div class="tab-pane" id="text" role="tabpanel" aria-labelledby="text-tab">
            <!-- Footer Title -->
            <div class="form-group row">
                <label for="FooterTitle" class="col-3 col-form-label">Footer Title</label>
                <input type="text" id="FooterTitle" class="form-control col-9" ng-model="properties.FooterTitle.PropertyValue" />
            </div>

            <!-- Best Support Note -->
            <div class="form-group row">
                <label for="BestSupport" class="col-3 col-form-label">Best Support Note</label>
                <textarea class="col-9 form-control" rows="3" ng-model="properties.BestSupport.PropertyValue"></textarea>
            </div>

            <!-- All Right Reserved 1 -->
            <div class="form-group row">
                <label for="AllRightReservedPart1" class="col-3 col-form-label">Copyright</label>
                <input type="text" id="AllRightReservedPart1" class="form-control col-9" ng-model="properties.AllRightReservedPart1.PropertyValue" />
            </div>

            <!-- All Right Reserved 2 -->
            <div class="form-group row">
                <label for="AllRightReservedPart2" class="col-3 col-form-label">Copyright Text</label>
                <input type="text" id="AllRightReservedPart2" class="form-control col-9" ng-model="properties.AllRightReservedPart2.PropertyValue" />
            </div>

            <!-- Last Updated 1 -->
            <div class="form-group row">
                <label for="LastUpdatedPart1" class="col-3 col-form-label">Last Updated Text</label>
                <input type="text" id="LastUpdatedPart1" class="form-control col-9" ng-model="properties.LastUpdatedPart1.PropertyValue" />
            </div>

            <!-- Last Updated Date Format -->
            <div class="form-group row">
                <label for="LastUpdatedDateFormat" class="col-3 col-form-label">Last Updated Date Format</label>
                <input type="text" id="LastUpdatedDateFormat" class="form-control col-9" ng-model="properties.LastUpdatedDateFormat.PropertyValue" />
            </div>
        </div>
        <div class="tab-pane" id="left-link" role="tabpanel" aria-labelledby="left-link-tab">
            <button ng-click="addLeftModel()">Add</button>
            <div class="row">
                <div class="col">
                    <label class="col-form-label">Position</label>
                </div>
                <div class="col">
                    <label class="col-form-label">Link</label>
                </div>
                <div class="col">
                    <label class="col-form-label">Link Title</label>
                </div>
                <div class="col">
                    <label class="col-form-label">Open New Tab</label>
                </div>
            </div>
            <div ng-repeat="model in leftModel track by model.Position">
                <div class="row" style="margin-bottom: 5px">
                    <div class="col">
                        <input type="number" class="form-control" ng-model="model.Position" />
                    </div>
                    <div class="col">
                        <input type="text" class="form-control" ng-model="model.Link" />
                    </div>
                    <div class="col">
                        <input type="text" class="form-control" ng-model="model.LinkTitle" />
                    </div>
                    <div class="col">
                        <input type="checkbox" class="form-check-input" ng-model="model.OpenNewTab" />
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="right-link" role="tabpanel" aria-labelledby="right-link-tab">
            <button ng-click="addRightModel()">Add</button>
            <div class="row">
                <div class="col">
                    <label class="col-form-label">Position</label>
                </div>
                <div class="col">
                    <label class="col-form-label">Link</label>
                </div>
                <div class="col">
                    <label class="col-form-label">Link Title</label>
                </div>
                <div class="col">
                    <label class="col-form-label">Open New Tab</label>
                </div>
            </div>
            <div ng-repeat="model in rightModel track by model.Position">
                <div class="row" style="margin-bottom: 5px">
                    <div class="col">
                        <input type="number" class="form-control" ng-model="model.Position" />
                    </div>
                    <div class="col">
                        <input type="text" class="form-control" ng-model="model.Link" />
                    </div>
                    <div class="col">
                        <input type="text" class="form-control" ng-model="model.LinkTitle" />
                    </div>
                    <div class="col">
                        <input type="checkbox" class="form-check-input" ng-model="model.OpenNewTab" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

FooterModel.cs

    public class FooterModel
    {
        public string CurrentView { get; set; } = "Landing";
        public string CssClass { get; set; }

        public string FooterTitle { get; set; } = "Meteorological Service Singapore";
        public string BestSupport { get; set; } = "This website supports the current and the previous release of <br/> Chrome, Firefox, Safari and Microsoft browsers (Edge & IE 11)";
        public string AllRightReserved { get { return AllRightReservedPart1 + DateTime.Now.Year.ToString() + AllRightReservedPart2; } }
        public string AllRightReservedPart1 { get; set; } = "&copy;";
        public string AllRightReservedPart2 { get; set; } = string.Format(" {0} {1}", "National Environment Agency.", "All Rights Reserved.");
        public string LastUpdated { get; set; }
        public string LastUpdatedPart1 { get; set; } = "Last updated on ";
        public string LastUpdatedDateFormat { get; set; } = "dd MMMM yyyy";

        public List<LinkModel> LeftModel { get; set; } = new List<LinkModel>();
        public List<LinkModel> RightModel { get; set; } = new List<LinkModel>();
        public string LeftModelJson { get; set; } = "";
        public string RightModelJson { get; set; } = "";
    }

    public class LinkModel
    {
        public int Position { get; set; }
        public string Link { get; set; }
        public string LinkTitle { get; set; }
        public bool OpenNewTab { get; set; }
    }