Merge branch 'newpolicy' into 'master'

Create the App usage time configuration policy

See merge request entgra/carbon-device-mgt-plugins!117

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.operation-mod/public/js/operation-mod.js

@@ -111,7 +111,8 @@ var androidOperationModule = function () {
         "DISALLOW_REMOVE_USER": "DISALLOW_REMOVE_USER",
         "DISALLOW_DATA_ROAMING": "DISALLOW_DATA_ROAMING",
         "CERT_ADD_OPERATION_CODE": "INSTALL_CERT",
-        "DISPLAY_MESSAGE_CONFIGURATION_OPERATION_CODE": "DISPLAY_MESSAGE_CONFIGURATION"
+        "DISPLAY_MESSAGE_CONFIGURATION_OPERATION_CODE": "DISPLAY_MESSAGE_CONFIGURATION",
+        "APPLICATION_LIST_OPERATION_CODE": "APPLICATION_LIST"
     };
 
     /**
@@ -344,6 +345,12 @@ var androidOperationModule = function () {
                     "disabledSettingSupportMessage": operationPayload["disabledSettingSupportMessage"]
                 };
                 break;
+            case androidOperationConstants["APPLICATION_LIST_OPERATION_CODE"]:
+                payload = {
+                    "appUsageTimeCategory": "screenUsageTime",
+                    "appTimeData": operationPayload["appTimeData"]
+                };
+                break;
         }
         return payload;
     };
@@ -740,6 +747,15 @@ var androidOperationModule = function () {
                     }
                 };
                 break;
+            case androidOperationConstants["APPLICATION_LIST_OPERATION_CODE"]:
+                operationType = operationTypeConstants["PROFILE"];
+                payload = {
+                    "operation": {
+                        "appUsageTimeCategory": "screenUsageTime",
+                        "appTimeData": operationData["appTimeData"]
+                    }
+                };
+                break;
             default:
                 // If the operation is neither of above, it is a command operation
                 operationType = operationTypeConstants["COMMAND"];

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.policy-edit/public/js/android-policy-edit.js

@@ -61,7 +61,9 @@ var androidOperationConstants = {
     "ENROLLMENT_APP_INSTALL_CODE": "ENROLLMENT_APP_INSTALL",
     "CERT_ADD_OPERATION_CODE": "INSTALL_CERT",
     "DISPLAY_MESSAGE_CONFIGURATION_OPERATION": "display-message-configuration",
-    "DISPLAY_MESSAGE_CONFIGURATION_OPERATION_CODE": "DISPLAY_MESSAGE_CONFIGURATION"
+    "DISPLAY_MESSAGE_CONFIGURATION_OPERATION_CODE": "DISPLAY_MESSAGE_CONFIGURATION",
+    "APP_USAGE_TIME_CONFIGURATION_OPERATION": "application-list",
+    "APP_USAGE_TIME_CONFIGURATION_OPERATION_CODE": "APPLICATION_LIST"
 };
 
 /**
@@ -665,7 +667,7 @@ var validatePolicyProfile = function () {
         }
 
         // Validating DISPLAY MESSAGE CONFIGURATION
-        if ($.inArray(androidOperationConstants["DISPLAY_MESSAGE_CONFIGURATION_OPERATION_CODE"], configuredOperations) != -1) {
+        if ($.inArray(androidOperationConstants["DISPLAY_MESSAGE_CONFIGURATION_OPERATION_CODE"], configuredOperations) !== -1) {
             // if DISPLAY_MESSAGE_CONFIGURATION policy is configured
             operation = androidOperationConstants["DISPLAY_MESSAGE_CONFIGURATION_OPERATION"];
             // initializing continueToCheckNextInputs to true
@@ -695,6 +697,262 @@ var validatePolicyProfile = function () {
             validationStatusArray.push(validationStatus);
         }
 
+        // Validating APP_USAGE_TIME_CONFIGURATION
+        if ($.inArray(androidOperationConstants["APP_USAGE_TIME_CONFIGURATION_OPERATION_CODE"], configuredOperations) !== -1) {
+            // if APP_USAGE_TIME_CONFIGURATION policy is configured
+            operation = androidOperationConstants["APP_USAGE_TIME_CONFIGURATION_OPERATION"];
+            // initializing continueToCheckNextInputs to true
+            continueToCheckNextInputs = true;
+
+            // var usageTimeType = $("#app-usage-time-category").val();
+            var usageTimeApplicationsGridChildInputs = "div#app-usage-time .child-input";
+
+            // if (!usageTimeType) {
+            //     validationStatus = {
+            //         "error": true,
+            //         "subErrorMsg": "App usage type is not provided.",
+            //         "erroneousFeature": operation
+            //     };
+            //     continueToCheckNextInputs = false;
+            // }
+
+            if (continueToCheckNextInputs) {
+                if ($(usageTimeApplicationsGridChildInputs).length === 0) {
+                    validationStatus = {
+                        "error": true,
+                        "subErrorMsg": "Applications are not provided in application list.",
+                        "erroneousFeature": operation
+                    };
+                    continueToCheckNextInputs = false;
+                } else {
+                    childInputCount = 0;
+                    childInputArray = [];
+                    emptyChildInputCount = 0;
+                    inputs = 0;
+
+                    // Looping through each child input
+                    $(usageTimeApplicationsGridChildInputs).each(function () {
+                        childInputCount++;
+
+                        // If child input is of second column
+                        childInput = $(this).val();
+                        childInputArray.push(childInput);
+                        // Updating emptyChildInputCount
+                        if (!childInput) {
+                            // If child input field is empty
+                            emptyChildInputCount++;
+                        }
+                    });
+
+                    // Updating validationStatus
+                    if (emptyChildInputCount > 0) {
+                        // If empty child inputs are present
+                        validationStatus = {
+                            "error": true,
+                            "subErrorMsg": "One or more package names of applications are empty.",
+                            "erroneousFeature": operation
+                        };
+                        continueToCheckNextInputs = false;
+
+                    } else {
+                        allowTimeArray = [];
+                        periodTimeArray = [];
+
+                        var appList = $("#app-usage-time").find(".child-input");
+                        var i = 0;
+                        var loopcount = 1;
+                        for (var j = 1; j < appList.length; j += i) {
+                            if (loopcount % 2 !== 1) {
+                                i = 3;
+                                periodTimeArray.push($(appList[j]).val());
+                            } else {
+                                i = 2;
+                                allowTimeArray.push($(appList[j]).val());
+                            }
+                            loopcount++;
+                        }
+                        result = periodTimeArray.map(function (item, i) {
+                            return Number(item) >= Number(allowTimeArray[i]);
+
+                        });
+
+                        for (var a = 0; a <= result.length; a++) {
+                            if (result[a] === false) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Allowed time type should be minimum or " +
+                                                   "equal than period time.",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+
+                        //check the duplicate values for package name
+                        var q = 0;
+                        duplicateValue = [];
+                        for (var k = 0; k < appList.length; k += q) {
+
+                            duplicateValue.push($(appList[k]).val());
+                            q = 5;
+                        }
+                        for (var b = 0; b <= duplicateValue.length; b++) {
+                            for (var c = 0; c <= duplicateValue.length; c++) {
+                                if (c !== b) {
+                                    if (String(duplicateValue[b]).valueOf() ===
+                                        String(duplicateValue[c]).valueOf()) {
+                                        validationStatus = {
+                                            "error": true,
+                                            "subErrorMsg": "Duplicate values exist with " +
+                                                           "for package names.",
+                                            "erroneousFeature": operation
+                                        };
+                                        continueToCheckNextInputs = false;
+                                    }
+                                }
+                            }
+                        }
+
+                        periodTimeValue = [];
+                        allowTimeValue = [];
+                        var checkNumber = 0;
+                        var e = 1;
+                        var timeCount = 1;
+                        for (var d = 2; d < appList.length; d += e) {
+                            if (timeCount % 2 !== 1) {
+                                e = 3;
+                                periodTimeValue.push($(appList[d]).val());
+                            } else {
+                                e = 2;
+                                allowTimeValue.push($(appList[d]).val());
+                            }
+                            timeCount++;
+                        }
+
+                        //check the limit of the time
+                        allowTimeValueResult = allowTimeArray.map(function (item, i) {
+                            if (Number(item) === 60) {
+                                return Number(allowTimeValue[i]) < 60;
+                            } else if (Number(item) === 3600) {
+                                return Number(allowTimeValue[i]) < 24;
+                            } else if (Number(item) === 86400) {
+                                return Number(allowTimeValue[i]) < 7;
+                            } else {
+                                return Number(allowTimeValue[i]) < 4;
+                            }
+                        });
+
+                        for (var a = 0; a <= allowTimeValueResult.length; a++) {
+                            if (allowTimeValueResult[a] === false) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Allow time values must be a number and " +
+                                                   "the maximum values are " +
+                                                   "(minutes = 59,hours = 23,day = 6," +
+                                                   "week = 3,month = 1).",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+                        //check whether the value is a positive number and the integer number
+                        for (var c = 0; c < allowTimeValue.length; c++) {
+                            checkNumber = Number(allowTimeValue[c]);
+                            if (Number.isInteger(checkNumber) === false || checkNumber <= 0) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Allow time must be a integer and a " +
+                                                   "positive number.",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+
+                        //check the limit of the time
+                        periodValueResult = periodTimeArray.map(function (item, i) {
+                            if (Number(item) === 60) {
+                                return Number(periodTimeValue[i]) < 60;
+                            } else if (Number(item) === 3600) {
+                                return Number(periodTimeValue[i]) < 24;
+                            } else if (Number(item) === 86400) {
+                                return Number(periodTimeValue[i]) < 7;
+                            } else if (Number(item) === 604800) {
+                                return Number(periodTimeValue[i]) < 4;
+                            } else {
+                                return Number(periodTimeValue[i]) < 29;
+                            }
+                        });
+                        for (var a = 0; a <= periodValueResult.length; a++) {
+                            if (periodValueResult[a] === false) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Period time values must be a number and " +
+                                                   "the maximum values are " +
+                                                   "(minutes = 59,hours = 23,day = 6," +
+                                                   "week = 3) and can select 1 to 28 days for the month .",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+                        //check whether the value is a positive number and the integer number
+                        for (var c = 0; c < periodTimeValue.length; c++) {
+                            checkNumber = Number(periodTimeValue[c]);
+                            if (Number.isInteger(checkNumber) === false || checkNumber <= 0) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Period time must be a integer and a " +
+                                                   "positive number.",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+
+                        //check the period time value is greater than allow time value when the
+                        // both have the same time type
+                        var checkValueResult = [];
+
+                        typeResult = periodTimeArray.map(function (item, i) {
+                            return Number(item) === Number(allowTimeArray[i]);
+                        });
+                        for (var x = 0; x <= typeResult.length; x++) {
+                            if (typeResult[x] === true) {
+                                checkValueResult = periodTimeValue.map(function (item, i) {
+                                    return Number(item) < Number(allowTimeValue[i]);
+                                });
+                            }
+                        }
+                        for (var r = 0; r <= checkValueResult.length; r++) {
+                            if (checkValueResult[r] === true) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Allowed time value should be minimum or " +
+                                                   "equal than period time value when both have " +
+                                                   "the same time type.",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+                    }
+                }
+            }
+
+            // at-last, if the value of continueToCheckNextInputs is still true
+            // this means that no error is found
+            if (continueToCheckNextInputs) {
+                validationStatus = {
+                    "error": false,
+                    "okFeature": operation
+                };
+            }
+
+            // updating validationStatusArray with validationStatus
+            validationStatusArray.push(validationStatus);
+        }
+
         // Validating PROXY
         if ($.inArray(androidOperationConstants["GLOBAL_PROXY_OPERATION_CODE"], configuredOperations) !== -1) {
             // if PROXY is configured
@@ -1135,6 +1393,81 @@ var changeAndroidWifiPolicyEAP = function (select, superSelect) {
     }
 };
 
+//This function will display apps allowed and period time as a sentence
+function onCreateSentence() {
+    childInputCount = 0;
+    childInputArray = [];
+    var usageTimeApplicationsGridChildInputs = "div#app-usage-time .child-input";
+    $(usageTimeApplicationsGridChildInputs).each(function () {
+        childInputCount++;
+        var childInput = $(this).val();
+        childInputArray.push(childInput);
+    });
+    if(childInputArray.length !== 0) {
+        var allowType = null, periodType = null, allowTimeType, periodTimeType;
+        var packageName = childInputArray[(childInputArray.length-5)];
+        var allowTime = childInputArray[(childInputArray.length-3)];
+        var periodTime = childInputArray[(childInputArray.length-1)];
+        var convertAllowTimeType = childInputArray[(childInputArray.length-4)];
+        var convertPeriodTimeType = childInputArray[(childInputArray.length-2)];
+
+        switch (convertAllowTimeType) {
+            case "60":
+                allowType = "minute";
+                break;
+            case "3600":
+                allowType = "hour";
+                break;
+            case "86400":
+                allowType = "day";
+                break;
+            case "604800":
+                allowType = "week";
+        }
+        if (allowTime > 1) {
+            allowTimeType = (allowType + "s");
+        } else {
+            allowTimeType = allowType;
+        }
+
+        switch (convertPeriodTimeType) {
+            case "60":
+                periodType = "minute";
+                break;
+            case "3600":
+                periodType = "hour";
+                break;
+            case "86400":
+                periodType = "day";
+                break;
+            case "604800":
+                periodType = "week";
+                break;
+            case "2592000":
+                periodType = "month";
+        }
+        if (periodType !== "month") {
+            if (periodTime > 1) {
+                periodTimeType = (periodType + "s");
+            } else {
+                periodTimeType = periodType;
+            }
+            if (packageName != null) {
+                document.getElementById("demoSentence").innerHTML = "<strong>" + packageName + "</strong>" + " package can be use for " + "<strong>" +
+                                                                    allowTime + "</strong>" + " " + "<strong>" + allowTimeType + "</strong>" + " with in " +
+                                                                    "<strong>" + periodTime + "</strong>" + " " + "<strong>" + periodTimeType + "</strong>" + " period.";
+            }
+        } else {
+            periodTimeType = periodType;
+            if (packageName != null) {
+                document.getElementById("demoSentence").innerHTML = "<strong>" + packageName + "</strong>" + " package can be use for " + "<strong>" +
+                                                                    allowTime + "</strong>" + " " + "<strong>" + allowTimeType + "</strong>" + " and the apps usage is calculated on " +
+                                                                    "<strong>" + periodTime + "</strong>" + " th of every " + "<strong>" + periodTimeType + "</strong>" + ".";
+            }
+        }
+    }
+}
+
 /**
  * Pass a div Id and a check box to view or hide div content based on checkbox value
  */

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.policy-edit/public/templates/android-policy-edit.hbs

@@ -174,6 +174,17 @@
              <span id="display-message-configuration-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
         </a>
 
+        <a href="javascript:void(0)" class="application-list" onclick="showAdvanceOperation('application-list', this)">
+            <span class="wr-hidden-operations-icon fw-stack">
+              <i class="fw fw-clock fw-stack-2x"></i>
+            </span>
+             App Usage Time Configuration
+             <span id="application-list-configured" class="has-configured status-icon hidden"><i
+                     class="fw fw-success"></i></span>
+             <span id="application-list-ok" class="has-success status-icon hidden"><i class="fw fw-success"></i></span>
+             <span id="application-list-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
+        </a>
+
     </div>
 
     <div class="wr-hidden-operations-content col-lg-8">
@@ -3428,6 +3439,158 @@
         </div>
         <!--/Display Message Configuration-->
 
+        <!--App Usage Time Configuration-->
+        <div class="wr-hidden-operation" data-operation="application-list">
+                <div class="panel panel-default operation-data" data-operation="application-list" data-operation-code="APPLICATION_LIST">
+                        <div id="application-list-policy-heading" class="panel-heading" role="tab">
+                            <h2 class="sub-title panel-title">
+                                App Usage Time Configuration
+                                <label id="application-list-policy-lbl" class="wr-input-control switch" data-toggle="collapse"
+                                       data-target="#application-list-policy-body">
+                                    <input type="checkbox"/>
+                                    <span class="helper"></span>
+                                    <span class="text"></span>
+                                </label>
+                            </h2>
+                            <div class="panel-title-description">
+                                Configure these settings to manage the applications usage time.
+                            </div>
+                        </div>
+                        <div id="application-list-policy-body" class="panel-collapse panel-body collapse" role="tabpanel"
+                             aria-labelledby="app-usage-configuration-policy-body">
+                            <hr/>
+                        <br>
+                        <div>
+                            <ul class="message message-info">
+                                <i class="icon fw fw-info"></i>
+                                This policy works only for Android 5.1 (Lolipop) or later versions.
+                            </ul>
+                            <br><br>
+                        </div>
+                        <div id="application-list-feature-error-msg" class="alert alert-danger hidden" role="alert">
+                             <i class="icon fw fw-error"></i><span></span>
+                        </div>
+{{!--                             <div class="wr-input-control"> --}}
+{{!--                                 <div id="global-data-select"> --}}
+{{!--                                     <div class="wr-input-control"> --}}
+{{!--                                         <label class="wr-input-label" for="application-usage-category"> --}}
+{{!--                                             App Usage Time Category --}}
+{{!--                                         </label> --}}
+{{!--                                         <select id="app-usage-time-category" --}}
+{{!--                                                 class="form-control operationDataKeys" --}}
+{{!--                                                 data-key="appUsageTimeCategory"> --}}
+{{!--                                             <option value="" selected="selected">None</option> --}}
+{{!--                                             <option value="screenUsageTime">App Screen Usage Time</option> --}}
+{{!--                                         </select> --}}
+{{!--                                     </div> --}}
+{{!--                                 </div> --}}
+{{!--                             </div> --}}
+                            <div class="wr-input-control">
+                                 <label class="wr-input-label" for="application-list-applications">
+                                     <br><br>Set app-specific time.
+                                 </label>
+                                 <br/>
+                                 <a href="#app-usage-time-grid" class="btn btn-secondary grid-input-add "
+                                    data-click-event="add-form">
+                                     <span class="icon fw-stack">
+                                         <i class="fw fw-add fw-stack-1x"></i>
+                                         <i class="fw fw-circle-outline fw-stack-2x"></i>
+                                     </span>
+                                     Add Application
+                                 </a>
+                                 <div id="app-usage-time"
+                                      class="operationDataKeys grouped-array-input multi-column-key-value-pair-array"
+                                      data-key="appTimeData" data-column-count="5">
+                                      <table class="table table-responsive table-striped">
+                                         <thead>
+                                         <tr>
+                                             <th>No:</th>
+                                             <th>Package Name</th>
+                                             <th>Allowed Time Type</th>
+                                             <th>Allowed Time</th>
+                                             <th>Period Time Type</th>
+                                             <th>Period Time</th>
+                                             <th></th>
+                                         </tr>
+                                         </thead>
+                                         <tbody data-add-form-container="#app-usage-time-grid">
+                                         <tr data-help-text="add-form">
+                                             <td colspan="7">
+                                                 No entries added yet .
+                                             </td>
+                                         </tr>
+                                         </tbody>
+                                      </table>
+                                      <table class="template hidden">
+                                         <tbody data-add-form="#app-usage-time-grid">
+                                         <tr data-add-form-element="clone" onChange="onCreateSentence()">
+                                             <td data-title="No:">
+                                                 <span class="index"></span>
+                                             </td>
+                                             <td data-title="Package Name">
+                                                 <input id="package-name" type="text"
+                                                        class="form-control grid-input-text"
+                                                        data-child-key="packageName"
+                                                        maxlength="50" data-default="" placeholder="[ com.google.android.pay ]"/>
+                                             </td>
+                                             <td data-title="Allowed Time Type">
+                                                 <select id="app-usage-policy-allowed-time-type"
+                                                         class="form-control operationDataKeys"
+                                                         data-child-key="allowedTimeType">
+                                                     <option value="" selected="selected">None</option>
+                                                     <option value="60">Minute</option>
+                                                     <option value="3600">Hour</option>
+                                                     <option value="86400">Day</option>
+                                                     <option value="604800">Week</option>
+                                                 </select>
+                                             </td>
+                                             <td data-title="Allowed Time">
+                                                 <input id="allowed-time" type="text" class="form-control grid-input-text"
+                                                        data-child-key="allowedTime" maxlength="10" data-default=""
+                                                        placeholder="[ 5 min ]"/>
+                                             </td>
+                                             <td data-title="Period Time Type">
+                                                 <select id="app-usage-policy-period-time-type"
+                                                         class="form-control operationDataKeys"
+                                                         data-child-key="periodTimeType">
+                                                     <option value="" selected="selected">None</option>
+                                                     <option value="60">Minute</option>
+                                                     <option value="3600">Hour</option>
+                                                     <option value="86400">Day</option>
+                                                     <option value="604800">Week</option>
+                                                     <option value="2592000">Month</option>
+                                                 </select>
+                                             </td>
+                                             <td data-title="Period Time">
+                                                <input  id="period" type="text" class="form-control grid-input-text"
+                                                        data-child-key="periodTime" maxlength="10" data-default=""
+                                                        placeholder="[ time ]"/>
+                                             </td>
+                                             <td>
+                                                 <span class="list-group-item-actions">
+                                                     <a href="#app-usage-time-grid"
+                                                        class="grid-input-remove"
+                                                        data-click-event="remove-form">
+                                                         <span class="fw-stack helper" title="Remove Entry">
+                                                             <i class="fw fw-circle-outline fw-stack-2x"></i>
+                                                             <i class="fw fw-delete fw-stack-1x"></i>
+                                                         </span>
+                                                     </a>
+                                                 </span>
+                                             </td>
+                                         </tr>
+                                         </tbody>
+                                      </table>
+                                 </div>
+                            </div>
+                            <div id="demoSentence">
+                            </div>
+                        </div>
+                </div>
+        </div>
+        <!--/App Usage Time Configuration-->
+
+
     </div>
     <script type="text/javascript">applyDataTable();</script>
 </div>

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.policy-view/public/templates/android-policy-view.hbs

@@ -156,6 +156,17 @@
              <span id="display-message-configuration-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
         </a>
 
+        <a href="javascript:void(0)" class="application-list" onclick="showAdvanceOperation('application-list', this)">
+            <span class="wr-hidden-operations-icon fw-stack">
+              <i class="fw fw-clock fw-stack-2x"></i>
+            </span>
+             App Usage Time Configuration
+             <span id="application-list-configured" class="has-configured status-icon hidden"><i
+                     class="fw fw-success"></i></span>
+             <span id="application-list-ok" class="has-success status-icon hidden"><i class="fw fw-success"></i></span>
+             <span id="application-list-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
+        </a>
+
     </div>
     <div class="wr-hidden-operations-content col-lg-8">
         <!-- passcode-policy -->
@@ -3341,6 +3352,156 @@
         </div>
         <!--/Display Message Configuration-->
 
+        <!--App Usage Time Configuration-->
+        <div class="wr-hidden-operation" data-operation="application-list">
+                <div class="panel panel-default operation-data" data-operation="application-list" data-operation-code="APPLICATION_LIST">
+                        <div id="application-list-policy-heading" class="panel-heading" role="tab">
+                            <h2 class="sub-title panel-title">
+                                App Usage Time Configuration
+                                <label id="application-list-policy-lbl" class="wr-input-control switch hidden" data-toggle="collapse"
+                                       data-target="#application-list-policy-body">
+                                    <input type="checkbox"/>
+                                    <span class="helper"></span>
+                                    <span class="text"></span>
+                                </label>
+                            </h2>
+                            <div class="panel-title-description">
+                                Configure these settings to manage the applications usage time.
+                            </div>
+                        </div>
+                        <div id="application-list-policy-body" class="panel-collapse panel-body collapse" role="tabpanel"
+                             aria-labelledby="application-list-policy-body">
+                            <hr/>
+                        <br>
+                        <div>
+                            <ul class="message message-info">
+                                <i class="icon fw fw-info"></i>
+                                This policy works only for Android 5.1 (Lolipop) or later versions.
+                            </ul>
+                            <br><br>
+                        </div>
+                        <div id="application-list-feature-error-msg" class="alert alert-danger hidden" role="alert">
+                             <i class="icon fw fw-error"></i><span></span>
+                        </div>
+{{!--                             <div class="wr-input-control"> --}}
+{{!--                                 <div id="global-data-select"> --}}
+{{!--                                     <div class="wr-input-control"> --}}
+{{!--                                         <label class="wr-input-label" for="application-usage-category"> --}}
+{{!--                                             App Usage Time Category --}}
+{{!--                                         </label> --}}
+{{!--                                         <select id="app-usage-time-category" --}}
+{{!--                                                 class="form-control operationDataKeys" --}}
+{{!--                                                 data-key="appUsageTimeCategory" disabled> --}}
+{{!--                                             <option value="" selected="selected">None</option> --}}
+{{!--                                             <option value="screenUsageTime">App Screen Usage Time</option> --}}
+{{!--                                         </select> --}}
+{{!--                                     </div> --}}
+{{!--                                 </div> --}}
+{{!--                             </div> --}}
+                            <div class="wr-input-control">
+                                 <label class="wr-input-label" for="application-list-applications">
+                                     <br><br>Set app-specific time.
+                                 </label>
+                                 <br/>
+                                 <a href="#app-usage-time-grid" class="btn btn-secondary grid-input-add "
+                                    data-click-event="add-form" style="display:none;">
+                                     <span class="icon fw-stack">
+                                         <i class="fw fw-add fw-stack-1x"></i>
+                                         <i class="fw fw-circle-outline fw-stack-2x"></i>
+                                     </span>
+                                     Add Application
+                                 </a>
+                                 <div id="app-usage-time"
+                                      class="operationDataKeys grouped-array-input multi-column-key-value-pair-array"
+                                      data-key="appTimeData" data-column-count="5">
+                                      <table class="table table-responsive table-striped">
+                                         <thead>
+                                         <tr>
+                                             <th>No:</th>
+                                             <th>Package Name</th>
+                                             <th>Allowed Time Type</th>
+                                             <th>Allowed Time</th>
+                                             <th>Period Time Type</th>
+                                             <th>Period Time</th>
+                                             <th></th>
+                                         </tr>
+                                         </thead>
+                                         <tbody data-add-form-container="#app-usage-time-grid">
+                                         <tr data-help-text="add-form">
+                                             <td colspan="7">
+                                                 No entries added yet .
+                                             </td>
+                                         </tr>
+                                         </tbody>
+                                      </table>
+                                      <table class="template hidden">
+                                         <tbody data-add-form="#app-usage-time-grid">
+                                         <tr data-add-form-element="clone">
+                                             <td data-title="No:">
+                                                 <span class="index"></span>
+                                             </td>
+                                             <td data-title="Package Name">
+                                                 <input id="package-name" type="text"
+                                                        class="form-control grid-input-text"
+                                                        data-child-key="packageName"
+                                                        maxlength="50" data-default="" placeholder="[ com.google.android.pay ]" disabled/>
+                                             </td>
+                                             <td data-title="Allowed Time Type">
+                                                 <select id="app-usage-policy-allowed-time-type"
+                                                         class="form-control operationDataKeys"
+                                                         data-child-key="allowedTimeType" disabled>
+                                                     <option value="" selected="selected">None</option>
+                                                     <option value="60">Minute</option>
+                                                     <option value="3600">Hour</option>
+                                                     <option value="86400">Day</option>
+                                                     <option value="604800">Week</option>
+                                                 </select>
+                                             </td>
+                                             <td data-title="Allowed Time">
+                                                 <input id="allowed-time" type="text" class="form-control grid-input-text"
+                                                        data-child-key="allowedTime" maxlength="10" data-default=""
+                                                        placeholder="[ time ]" disabled/>
+                                             </td>
+                                             <td data-title="Period Time Type">
+                                                 <select id="app-usage-policy-period-time-type"
+                                                         class="form-control operationDataKeys"
+                                                         data-child-key="periodTimeType" disabled>
+                                                     <option value="" selected="selected">None</option>
+                                                     <option value="60">Minute</option>
+                                                     <option value="3600">Hour</option>
+                                                     <option value="86400">Day</option>
+                                                     <option value="604800">Week</option>
+                                                     <option value="2592000">Month</option>
+                                                 </select>
+                                             </td>
+                                             <td data-title="Period Time">
+                                                <input  id="period" type="text" class="form-control grid-input-text"
+                                                        data-child-key="periodTime" maxlength="10" data-default=""
+                                                        placeholder="[ time ]" disabled/>
+                                             </td>
+                                             <td>
+                                                 <span class="list-group-item-actions">
+                                                     <a href="#app-usage-time-grid"
+                                                        class="grid-input-remove"
+                                                        data-click-event="remove-form"
+                                                        style="display:none;">
+                                                         <span class="fw-stack helper" title="Remove Entry" >
+                                                             <i class="fw fw-circle-outline fw-stack-2x"></i>
+                                                             <i class="fw fw-delete fw-stack-1x"></i>
+                                                         </span>
+                                                     </a>
+                                                 </span>
+                                             </td>
+                                         </tr>
+                                         </tbody>
+                                      </table>
+                                 </div>
+                            </div>
+                        </div>
+                </div>
+        </div>
+        <!--/App Usage Time Configuration-->
+
     </div>
     <script type="text/javascript">applyDataTable();</script>
 </div>

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.policy-wizard/public/js/android-policy-operations.js

@@ -58,7 +58,9 @@ var androidOperationConstants = {
     "ENROLLMENT_APP_INSTALL_CODE": "ENROLLMENT_APP_INSTALL",
     "CERTIFICATE_INSTALL": "INSTALL_CERT",
     "DISPLAY_MESSAGE_CONFIGURATION_OPERATION": "display-message-configuration",
-    "DISPLAY_MESSAGE_CONFIGURATION_OPERATION_CODE": "DISPLAY_MESSAGE_CONFIGURATION"
+    "DISPLAY_MESSAGE_CONFIGURATION_OPERATION_CODE": "DISPLAY_MESSAGE_CONFIGURATION",
+    "APP_USAGE_TIME_CONFIGURATION_OPERATION": "application-list",
+    "APP_USAGE_TIME_CONFIGURATION_OPERATION_CODE": "APPLICATION_LIST"
 };
 
 /**
@@ -626,6 +628,262 @@ var validatePolicyProfile = function () {
             validationStatusArray.push(validationStatus);
         }
 
+        // Validating APP_USAGE_TIME_CONFIGURATION
+        if ($.inArray(androidOperationConstants["APP_USAGE_TIME_CONFIGURATION_OPERATION_CODE"], configuredOperations) !== -1) {
+            // if APP_USAGE_TIME_CONFIGURATION policy is configured
+            operation = androidOperationConstants["APP_USAGE_TIME_CONFIGURATION_OPERATION"];
+            // initializing continueToCheckNextInputs to true
+            continueToCheckNextInputs = true;
+
+            // var usageTimeType = $("#app-usage-time-category").val();
+            var usageTimeApplicationsGridChildInputs = "div#app-usage-time .child-input";
+
+            // if (!usageTimeType) {
+            //     validationStatus = {
+            //         "error": true,
+            //         "subErrorMsg": "App usage type is not provided.",
+            //         "erroneousFeature": operation
+            //     };
+            //     continueToCheckNextInputs = false;
+            // }
+
+            if (continueToCheckNextInputs) {
+                if ($(usageTimeApplicationsGridChildInputs).length === 0) {
+                    validationStatus = {
+                        "error": true,
+                        "subErrorMsg": "Applications are not provided in application list.",
+                        "erroneousFeature": operation
+                    };
+                    continueToCheckNextInputs = false;
+                } else {
+                    childInputCount = 0;
+                    childInputArray = [];
+                    emptyChildInputCount = 0;
+                    inputs = 0;
+
+                    // Looping through each child input
+                    $(usageTimeApplicationsGridChildInputs).each(function () {
+                        childInputCount++;
+
+                        // If child input is of second column
+                        childInput = $(this).val();
+                        childInputArray.push(childInput);
+                        // Updating emptyChildInputCount
+                        if (!childInput) {
+                            // If child input field is empty
+                            emptyChildInputCount++;
+                        }
+                    });
+
+                    // Updating validationStatus
+                    if (emptyChildInputCount > 0) {
+                        // If empty child inputs are present
+                        validationStatus = {
+                            "error": true,
+                            "subErrorMsg": "One or more package names of applications are empty.",
+                            "erroneousFeature": operation
+                        };
+                        continueToCheckNextInputs = false;
+
+                    } else {
+                        allowTimeArray = [];
+                        periodTimeArray = [];
+
+                        var appList = $("#app-usage-time").find(".child-input");
+                        var i = 0;
+                        var loopcount = 1;
+                        for (var j = 1; j < appList.length; j += i) {
+                            if (loopcount % 2 !== 1) {
+                                i = 3;
+                                periodTimeArray.push($(appList[j]).val());
+                            } else {
+                                i = 2;
+                                allowTimeArray.push($(appList[j]).val());
+                            }
+                            loopcount++;
+                        }
+                        result = periodTimeArray.map(function (item, i) {
+                            return Number(item) >= Number(allowTimeArray[i]);
+
+                        });
+
+                        for (var a = 0; a <= result.length; a++) {
+                            if (result[a] === false) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Allowed time type should be minimum or " +
+                                                   "equal than period time.",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+
+                        //check the duplicate values for package name
+                        var q = 0;
+                        duplicateValue = [];
+                        for (var k = 0; k < appList.length; k += q) {
+
+                            duplicateValue.push($(appList[k]).val());
+                            q = 5;
+                        }
+                        for (var b = 0; b <= duplicateValue.length; b++) {
+                            for (var c = 0; c <= duplicateValue.length; c++) {
+                                if (c !== b) {
+                                    if (String(duplicateValue[b]).valueOf() ===
+                                        String(duplicateValue[c]).valueOf()) {
+                                        validationStatus = {
+                                            "error": true,
+                                            "subErrorMsg": "Duplicate values exist with " +
+                                                           "for package names.",
+                                            "erroneousFeature": operation
+                                        };
+                                        continueToCheckNextInputs = false;
+                                    }
+                                }
+                            }
+                        }
+
+                        periodTimeValue = [];
+                        allowTimeValue = [];
+                        var checkNumber = 0;
+                        var e = 1;
+                        var timeCount = 1;
+                        for (var d = 2; d < appList.length; d += e) {
+                            if (timeCount % 2 !== 1) {
+                                e = 3;
+                                periodTimeValue.push($(appList[d]).val());
+                            } else {
+                                e = 2;
+                                allowTimeValue.push($(appList[d]).val());
+                            }
+                            timeCount++;
+                        }
+
+                        //check the limit of the allow time
+                        allowTimeValueResult = allowTimeArray.map(function (item, i) {
+                            if (Number(item) === 60) {
+                                return Number(allowTimeValue[i]) < 60;
+                            } else if (Number(item) === 3600) {
+                                return Number(allowTimeValue[i]) < 24;
+                            } else if (Number(item) === 86400) {
+                                return Number(allowTimeValue[i]) < 7;
+                            } else {
+                                return Number(allowTimeValue[i]) < 4;
+                            }
+                        });
+
+                        for (var a = 0; a <= allowTimeValueResult.length; a++) {
+                            if (allowTimeValueResult[a] === false) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Allow time values must be a number and " +
+                                                   "the maximum values are " +
+                                                   "(minutes = 59,hours = 23,day = 6," +
+                                                   "week = 3).",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+                        //check whether the value is a positive number and the integer number
+                        for (var c = 0; c < allowTimeValue.length; c++) {
+                            checkNumber = Number(allowTimeValue[c]);
+                            if (Number.isInteger(checkNumber) === false || checkNumber <= 0) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Allow time must be a integer and a " +
+                                                   "positive number.",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+
+                        //check the limit of the period time
+                        periodValueResult = periodTimeArray.map(function (item, i) {
+                            if (Number(item) === 60) {
+                                return Number(periodTimeValue[i]) < 60;
+                            } else if (Number(item) === 3600) {
+                                return Number(periodTimeValue[i]) < 24;
+                            } else if (Number(item) === 86400) {
+                                return Number(periodTimeValue[i]) < 7;
+                            } else if (Number(item) === 604800) {
+                                return Number(periodTimeValue[i]) < 4;
+                            } else {
+                                return Number(periodTimeValue[i]) < 29;
+                            }
+                        });
+                        for (var a = 0; a <= periodValueResult.length; a++) {
+                            if (periodValueResult[a] === false) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Period time values must be a number and " +
+                                                   "the maximum values are " +
+                                                   "(minutes = 59,hours = 23,day = 6," +
+                                                   "week = 3) and can select 1 to 28 days for the month .",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+                        //check whether the value is a positive number and the integer number
+                        for (var c = 0; c < periodTimeValue.length; c++) {
+                            checkNumber = Number(periodTimeValue[c]);
+                            if (Number.isInteger(checkNumber) === false || checkNumber <= 0) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Period time must be a integer and a " +
+                                                   "positive number.",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+
+                        //check the period time value is greater than allow time value when the
+                        // both have the same time type
+                        var checkValueResult = [];
+
+                        typeResult = periodTimeArray.map(function (item, i) {
+                            return Number(item) === Number(allowTimeArray[i]);
+                        });
+                        for (var x = 0; x <= typeResult.length; x++) {
+                            if (typeResult[x] === true) {
+                                checkValueResult = periodTimeValue.map(function (item, i) {
+                                    return Number(item) < Number(allowTimeValue[i]);
+                                });
+                            }
+                        }
+                        for (var r = 0; r <= checkValueResult.length; r++) {
+                            if (checkValueResult[r] === true) {
+                                validationStatus = {
+                                    "error": true,
+                                    "subErrorMsg": "Allowed time value should be minimum or " +
+                                                   "equal than period time value when both have " +
+                                                   "the same time type.",
+                                    "erroneousFeature": operation
+                                };
+                                continueToCheckNextInputs = false;
+                            }
+                        }
+                    }
+                }
+            }
+
+            // at-last, if the value of continueToCheckNextInputs is still true
+            // this means that no error is found
+            if (continueToCheckNextInputs) {
+                validationStatus = {
+                    "error": false,
+                    "okFeature": operation
+                };
+            }
+
+            // updating validationStatusArray with validationStatus
+            validationStatusArray.push(validationStatus);
+        }
+
         // Validating PROXY
         if ($.inArray(androidOperationConstants["GLOBAL_PROXY_OPERATION_CODE"], configuredOperations) !== -1) {
             // if PROXY is configured
@@ -1108,6 +1366,81 @@ var changeAndroidWifiPolicyEAP = function (select, superSelect) {
     }
 };
 
+//This function will display apps allowed and period time as a sentence
+function onCreateSentence() {
+    childInputCount = 0;
+    childInputArray = [];
+    var usageTimeApplicationsGridChildInputs = "div#app-usage-time .child-input";
+    $(usageTimeApplicationsGridChildInputs).each(function () {
+        childInputCount++;
+        var childInput = $(this).val();
+        childInputArray.push(childInput);
+    });
+    if(childInputArray.length !== 0) {
+        var allowType = null, periodType = null, allowTimeType, periodTimeType;
+        var packageName = childInputArray[(childInputArray.length-5)];
+        var allowTime = childInputArray[(childInputArray.length-3)];
+        var periodTime = childInputArray[(childInputArray.length-1)];
+        var convertAllowTimeType = childInputArray[(childInputArray.length-4)];
+        var convertPeriodTimeType = childInputArray[(childInputArray.length-2)];
+
+        switch (convertAllowTimeType) {
+            case "60":
+                allowType = "minute";
+                break;
+            case "3600":
+                allowType = "hour";
+                break;
+            case "86400":
+                allowType = "day";
+                break;
+            case "604800":
+                allowType = "week";
+        }
+        if (allowTime > 1) {
+            allowTimeType = (allowType + "s");
+        } else {
+            allowTimeType = allowType;
+        }
+
+        switch (convertPeriodTimeType) {
+            case "60":
+                periodType = "minute";
+                break;
+            case "3600":
+                periodType = "hour";
+                break;
+            case "86400":
+                periodType = "day";
+                break;
+            case "604800":
+                periodType = "week";
+                break;
+            case "2592000":
+                periodType = "month";
+        }
+        if (periodType !== "month") {
+            if (periodTime > 1) {
+                periodTimeType = (periodType + "s");
+            } else {
+                periodTimeType = periodType;
+            }
+            if (packageName != null) {
+                document.getElementById("demoSentence").innerHTML = "<strong>" + packageName + "</strong>" + " package can be use for " + "<strong>" +
+                                                                    allowTime + "</strong>" + " " + "<strong>" + allowTimeType + "</strong>" + " with in " +
+                                                                    "<strong>" + periodTime + "</strong>" + " " + "<strong>" + periodTimeType + "</strong>" + " period.";
+            }
+        } else {
+            periodTimeType = periodType;
+            if (packageName != null) {
+                document.getElementById("demoSentence").innerHTML = "<strong>" + packageName + "</strong>" + " package can be use for " + "<strong>" +
+                                                                    allowTime + "</strong>" + " " + "<strong>" + allowTimeType + "</strong>" + " and the apps usage is calculated on " +
+                                                                    "<strong>" + periodTime + "</strong>" + " th of every " + "<strong>" + periodTimeType + "</strong>" + ".";
+            }
+        }
+    }
+}
+
 /**
  * Pass a div Id and a check box to view or hide div content based on checkbox value
  */

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.policy-wizard/public/templates/android-policy-operations.hbs

@@ -182,6 +182,17 @@
              <span id="display-message-configuration-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
          </a>
 
+          <a href="javascript:void(0)" class="application-list" onclick="showAdvanceOperation('application-list', this)">
+            <span class="wr-hidden-operations-icon fw-stack">
+              <i class="fw fw-clock fw-stack-2x"></i>
+            </span>
+             App Usage Time Configuration
+             <span id="application-list-configured" class="has-configured status-icon hidden"><i
+                     class="fw fw-success"></i></span>
+             <span id="application-list-ok" class="has-success status-icon hidden"><i class="fw fw-success"></i></span>
+             <span id="application-list-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
+          </a>
+
     </div>
 
     <div class="wr-hidden-operations-content col-lg-8">
@@ -3444,6 +3455,159 @@
                 </div>
         </div>
         <!--/Display Message Configuration-->
+
+        <!--App Usage Time Configuration-->
+        <div class="wr-hidden-operation" data-operation="application-list">
+                <div class="panel panel-default operation-data" data-operation="application-list" data-operation-code="APPLICATION_LIST">
+                        <div id="application-list-policy-heading" class="panel-heading" role="tab">
+                            <h2 class="sub-title panel-title">
+                                App Usage Time Configuration
+                                <label id="application-list-policy-lbl" class="wr-input-control switch" data-toggle="collapse"
+                                       data-target="#application-list-policy-body">
+                                    <input type="checkbox"/>
+                                    <span class="helper"></span>
+                                    <span class="text"></span>
+                                </label>
+                            </h2>
+                            <div class="panel-title-description">
+                                Configure these settings to manage the applications usage time.
+                            </div>
+                        </div>
+                        <div id="application-list-policy-body" class="panel-collapse panel-body collapse" role="tabpanel"
+                             aria-labelledby="app-usage-configuration-policy-body">
+                            <hr/>
+                        <br>
+                        <div>
+                            <ul class="message message-info">
+                                <i class="icon fw fw-info"></i>
+                                This policy works only for Android 5.1 (Lolipop) or later versions.
+                            </ul>
+                            <br><br>
+                        </div>
+                        <div id="application-list-feature-error-msg" class="alert alert-danger hidden" role="alert">
+                             <i class="icon fw fw-error"></i><span></span>
+                        </div>
+{{!--                             <div class="wr-input-control"> --}}
+{{!--                                 <div id="global-data-select"> --}}
+{{!--                                     <div class="wr-input-control"> --}}
+{{!--                                         <label class="wr-input-label" for="application-usage-category"> --}}
+{{!--                                             App Usage Time Category --}}
+{{!--                                         </label> --}}
+{{!--                                         <select id="app-usage-time-category" --}}
+{{!--                                                 class="form-control operationDataKeys" --}}
+{{!--                                                 data-key="appUsageTimeCategory"> --}}
+{{!--                                             <option value="" selected="selected">None</option> --}}
+{{!--                                             <option value="screenUsageTime">App Screen Usage Time</option> --}}
+{{!--                                         </select> --}}
+{{!--                                     </div> --}}
+{{!--                                 </div> --}}
+{{!--                             </div> --}}
+                            <div class="wr-input-control">
+                                 <label class="wr-input-label" for="application-list-applications">
+                                     <br><br>Set app-specific time.
+                                 </label>
+                                 <br/>
+                                 <a href="#app-usage-time-grid" class="btn btn-secondary grid-input-add "
+                                    data-click-event="add-form">
+                                     <span class="icon fw-stack">
+                                         <i class="fw fw-add fw-stack-1x"></i>
+                                         <i class="fw fw-circle-outline fw-stack-2x"></i>
+                                     </span>
+                                     Add Application
+                                 </a>
+                                 <div id="app-usage-time"
+                                      class="operationDataKeys grouped-array-input multi-column-key-value-pair-array"
+                                      data-key="appTimeData" data-column-count="5">
+                                      <table class="table table-responsive table-striped">
+                                         <thead>
+                                         <tr>
+                                             <th>No:</th>
+                                             <th>Package Name</th>
+                                             <th>Allowed Time Type</th>
+                                             <th>Allowed Time</th>
+                                             <th>Period Time Type</th>
+                                             <th>Period Time</th>
+                                             <th></th>
+                                         </tr>
+                                         </thead>
+                                         <tbody data-add-form-container="#app-usage-time-grid">
+                                         <tr data-help-text="add-form">
+                                             <td colspan="7">
+                                                 No entries added yet .
+                                             </td>
+                                         </tr>
+                                         </tbody>
+                                      </table>
+                                      <table class="template hidden">
+                                         <tbody data-add-form="#app-usage-time-grid">
+                                         <tr data-add-form-element="clone" onChange="onCreateSentence()">
+                                             <td data-title="No:">
+                                                 <span class="index"></span>
+                                             </td>
+                                             <td data-title="Package Name">
+                                                 <input id="package-name" type="text"
+                                                        class="form-control grid-input-text"
+                                                        data-child-key="packageName"
+                                                        maxlength="50" data-default="" placeholder="[ com.google.android.pay ]"/>
+                                             </td>
+                                             <td data-title="Allowed Time Type">
+                                                 <select id="app-usage-policy-allowed-time-type"
+                                                         class="form-control operationDataKeys"
+                                                         data-child-key="allowedTimeType">
+                                                     <option value="" selected="selected">None</option>
+                                                     <option value="60">Minute</option>
+                                                     <option value="3600">Hour</option>
+                                                     <option value="86400">Day</option>
+                                                     <option value="604800">Week</option>
+                                                 </select>
+                                             </td>
+                                             <td data-title="Allowed Time">
+                                                 <input id="allowed-time" type="text" class="form-control grid-input-text"
+                                                        data-child-key="allowedTime" maxlength="10" data-default=""
+                                                        placeholder="[ time ]"/>
+                                             </td>
+                                             <td data-title="Period Time Type">
+                                                 <select id="app-usage-policy-period-time-type"
+                                                         class="form-control operationDataKeys"
+                                                         data-child-key="periodTimeType"
+                                                         onchange="changeAndroidAppUsagePolicy(this)">
+                                                     <option value="" selected="selected">None</option>
+                                                     <option value="60">Minute</option>
+                                                     <option value="3600">Hour</option>
+                                                     <option value="86400">Day</option>
+                                                     <option value="604800">Week</option>
+                                                     <option value="2592000">Month</option>
+                                                 </select>
+                                             </td>
+                                             <td data-title="Period Time">
+                                                    <input  id="period" type="text" class="form-control grid-input-text"
+                                                        data-child-key="periodTime" maxlength="10" data-default=""
+                                                        placeholder="[ time ]"/>
+                                             </td>
+                                             <td>
+                                                 <span class="list-group-item-actions">
+                                                     <a href="#app-usage-time-grid"
+                                                        class="grid-input-remove"
+                                                        data-click-event="remove-form">
+                                                         <span class="fw-stack helper" title="Remove Entry">
+                                                             <i class="fw fw-circle-outline fw-stack-2x"></i>
+                                                             <i class="fw fw-delete fw-stack-1x"></i>
+                                                         </span>
+                                                     </a>
+                                                 </span>
+                                             </td>
+                                         </tr>
+                                         </tbody>
+                                      </table>
+                                 </div>
+                            </div>
+                            <div id="demoSentence">
+                            </div>
+                        </div>
+                </div>
+        </div>
+        <!--/App Usage Time Configuration-->
+
     </div>
     <script type="text/javascript">applyDataTable();</script>
 </div>