diff --git a/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.css b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.css
new file mode 100644
index 0000000..ffeac0a
--- /dev/null
+++ b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.css
@@ -0,0 +1,48 @@
+/* css for sample app custom view */
+
+#ov-sample-custom {
+    padding: 20px;
+}
+.light #ov-sample-custom {
+    color: navy;
+}
+.dark #ov-sample-custom {
+    color: #88f;
+}
+
+#ov-sample-custom .button-panel {
+    margin: 10px;
+    width: 200px;
+}
+
+.light #ov-sample-custom .button-panel {
+    background-color: #ccf;
+}
+.dark #ov-sample-custom .button-panel {
+    background-color: #444;
+}
+
+#ov-sample-custom .my-button {
+    cursor: pointer;
+    padding: 4px;
+    text-align: center;
+}
+
+.light #ov-sample-custom .my-button {
+    color: white;
+    background-color: #99d;
+}
+.dark #ov-sample-custom .my-button {
+    color: black;
+    background-color: #aaa;
+}
+
+#ov-sample-custom .number {
+    font-size: 140%;
+    text-align: right;
+}
+
+#ov-sample-custom .quote {
+    margin: 10px 20px;
+    font-style: italic;
+}
\ No newline at end of file
diff --git a/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.html b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.html
new file mode 100644
index 0000000..34204b4
--- /dev/null
+++ b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.html
@@ -0,0 +1,54 @@
+<!-- partial HTML of patch panel app -->
+<div id="ov-sample-custom" ng-controller="OvSampleCustomCtrl">
+    <div class="button-panel">
+        <div class="my-button" ng-click="getData()">
+            Load Devices
+        </div>
+
+    </div>
+    <div class="data-panel">
+        <div>
+            <label>Devices:
+                <select ng-model="myDev" ng-options="dev.name for dev in devices"></select>
+            </label>
+
+        </div>
+    </div>
+    <div class="button-panel">
+        <div class="my-button" ng-click="loadPorts()">
+            Load Ports
+        </div>
+    </div>
+    <div class="data-panel2">
+        <label>First Port:
+            <select ng-model="myPort1" ng-options="port.name for port in ports"></select>
+        </label>
+        <label>Second Port:
+            <select ng-model="myPort2" ng-options="port.name for port in ports"></select>
+        </label>
+    </div>
+    <div class="button-panel">
+        <div class="my-button" ng-click="done()">
+            Patch!
+        </div>
+    </div>
+    <div class="data-panel3">
+        <p>
+            <span class="quote">{{data.message}} </span>
+        </p>
+         <pre>
+
+
+        </pre>
+    </div>
+    <div class="button-panel">
+        <div class="my-button" ng-click="used()">
+            ConnectPoints in use
+        </div>
+    </div>
+    <div class="data-panel4">
+        <p>
+            <span class="quote">{{data.cpoints}} </span>
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.js b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.js
new file mode 100644
index 0000000..08902e3
--- /dev/null
+++ b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.js
@@ -0,0 +1,122 @@
+// js for patch panel app custom view
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, $scope, wss, ks;
+
+    // constants
+    var dataReq = 'sampleCustomDataRequest',
+        dataResp = 'sampleCustomDataResponse';
+    var dataReq2 = 'sampleCustomDataRequest2',
+        dataResp2 = 'sampleCustomDataResponse2';
+    var dataReq3 = 'sampleCustomDataRequest3',
+        dataResp3 = 'sampleCustomDataResponse3';
+
+
+    function addKeyBindings() {
+        var map = {space: [getData, 'Fetch data from server'], _helpFormat: [['space']]};
+        ks.keyBindings(map);
+
+    }
+
+    function getData() {
+       wss.sendEvent(dataReq);
+    }
+    function used() {
+        wss.sendEvent(dataReq3);
+    }
+    function loadPorts(){
+        $scope.ports = [];
+        var i;
+        var index;
+        for(i = 0; i < $scope.cps.length ; i++){
+            if($scope.cps[i] == $scope.myDev){
+                index = i;
+            }
+        }
+        var j = index+1;
+        while( $scope.data.cps[j].indexOf("o") != 0){
+            var tempi = {name : $scope.data.cps[j]};
+            $scope.ports.push(tempi);
+            j++;
+        }
+    }
+    function done(){
+        var temp = [$scope.myDev.name, $scope.myPort1.name, $scope.myPort2.name];
+        var temp1 = {result : temp};
+        wss.sendEvent(dataReq2, temp1);
+
+    }
+    function respDataCb(data) {
+        $scope.data = data;
+        $scope.cps = [];
+        $scope.devices = [];
+        var i;
+        for(i = 0; i < $scope.data.cps.length; i++){
+            $scope.cps.push(temp);
+            if($scope.data.cps[i].indexOf("o") == 0){
+                var temp = {name : $scope.data.cps[i]};
+                $scope.devices.push(temp);
+            }
+        }
+        $scope.$apply();
+    }
+    function respDataCb2(data) {
+        $scope.data = data;
+        $scope.$apply();
+    }
+    function respDataCb3(data) {
+        $scope.data = data;
+        $scope.$apply();
+    }
+
+    var app = angular.module('ovSampleCustom', [])
+        .controller('OvSampleCustomCtrl',
+        ['$log', '$scope', 'WebSocketService', 'KeyService',
+
+        function (_$log_, _$scope_, _wss_, _ks_) {
+            $log = _$log_;
+            $scope = _$scope_;
+            wss = _wss_;
+            ks = _ks_;
+
+            $scope.cps = [];
+            $scope.devices = [];
+            $scope.ports = [];
+            $scope.myDev = $scope.devices[0];
+            $scope.myPort1 = $scope.ports[0];
+            $scope.myPort2 = $scope.ports[0];
+
+
+            var handlers = {};
+            $scope.data = {};
+            
+            // data response handler
+            handlers[dataResp] = respDataCb;
+            handlers[dataResp2] = respDataCb2;
+            handlers[dataResp3] = respDataCb3;
+            wss.bindHandlers(handlers);
+
+            addKeyBindings();
+
+            // custom click handler
+            $scope.getData = getData;
+            $scope.loadPorts = loadPorts;
+            $scope.used = used;
+            $scope.done = done;
+
+            // cleanup
+            $scope.$on('$destroy', function () {
+                wss.unbindHandlers(handlers);
+                ks.unbindKeys();
+                $log.log('OvSampleCustomCtrl has been destroyed');
+            });
+
+            $log.log('OvSampleCustomCtrl has been created');
+        }]);
+
+
+
+}());
+