Angular JS Controller file

-
//HTML references:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../SiteAssets/CSS/bootstrap.min.css">
<link href="../SiteAssets/CSS/SPstyles.css" rel="stylesheet" />
<link rel="stylesheet" href="../SiteAssets/font-awesome/font-awesome/CSS/font-awesome.css" />
<link rel="stylesheet" href="../SiteAssets/CSS/homepage.css" />
<script src="../SiteAssets/JS/jquery3.3.1.js"></script>
//Jquery UI - used for custom date picker etc..features
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="/_layouts/15/1033/strings.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.js"></script>
<script type="text/javascript" src="/_layouts/15/clienttemplates.js"></script>
<script type="text/javascript" src="/_layouts/15/clientforms.js"></script>
<script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"></script>
<script type="text/javascript" src="/_layouts/15/autofill.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script src="../SiteAssets/Js/SPRibbon.js"></script>
<script src="../SiteAssets/Js/angular.min.js"></script>
<script src="../SiteAssets/Js/angular-sanitize.js"></script>
<script src="../SiteAssets/Js/angular-filter.js"></script>

//Custom date picker input tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.8/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.js"></script>
//Your controller js file
<script src="../SiteAssets/Js/customcontroller.js"></script>
//CRUD opertions
<script src="../SiteAssets/Js/factoryDevice.js"></script>
//Custom file upload
<script type="text/javascript" src="../SiteAssets/JS/jquery.multifile.js"></script>

<body>
<!--Attachment upload button-->
<div class="form-group"> <label for="">Attachment</label> <div class="datepickerinput"> <input id="file_input" type="file" name="files[]" ng-model="file_input"> </div> </div>
<!--Bootstrap model popup-->
<div class="btnnewtask btn" ng-click="openPopUp()" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-plus-circle" aria-hidden="true"></i>Open popup
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="closepopup()">&times;</button>
<h4 class="modal-title">Here is header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="">Project Name</label>
<input type="text" class="form-control" id="" placeholder="Enter project name">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="addItemToList()">Save</button>
</div>
</div>
</div>
</div>
<div class="modelpop"></div>
</body>
var app = angular.module('myApp', ['angular.filter']) //, 'ngTagsInput'
app.controller('allItemsCntrl', ["$scope", "$filter", "$http", "$sce", "RESTService", function ($scope, $filter, $http, $sce, RESTService) {
//site URL
$scope.siteURL = _spPageContextInfo.webAbsoluteUrl;
$scope.pageLoad = function(){ setTimeout(function(){ $('#file_input').multifile(); },1000); }
//CRUD - Read
$scope.readDataFromFactoryServices = function(){ $scope.QueryData = "$select=*,ProductProject/ID,ProductProject/Title&$expand=ProductProject&$filter=ProductProject/Id eq "+$scope.projectIDURL+"&$orderby=Modified desc"; RESTService.getItems("ListName", $scope.QueryData).then(function (response) { $scope.mydata = response; }); }
//CRUD - Read list file attachment
$scope.loadProjects = function () {
$scope.ProductProjectURL = "$select=*,ProjectLead/Name,ProjectLead/EMail,ProjectLead/Title,ProjectLead/Id&$expand=ProjectLead&$orderby=Modified desc";
RESTService.getItems("ProductProject", $scope.ProductProjectURL).then(function (response) {
$scope.productProjectListData = response;
angular.forEach($scope.productProjectListData, function(item1,index){
$scope.docURL = "(" + item1.ID + ")/AttachmentFiles"
RESTService.getAttachements("ProductProject", $scope.docURL).then(function (response) {
if(response.length!=0){
angular.forEach(response, function(item,index){
item1.FileLeafRef = item.FileName;
item1.FileRef = item.ServerRelativeUrl;
});
}
});  
});
});
}
//CRUD - ADD list item
$scope.saveFunding = function () {
$scope.saveJSONItemdata = {
__metadata: {
type: "SP.Data.GeneralInvestmentCostResultsListItem"
},
Title: "",
ProductProjectId: $scope.projectIDURL,
QualityGatesId: $scope.qualityGateIDURL,
GeneralInvestmentCostJSON: JSON.stringify($scope.caliculatedvalues)
};
RESTService.addItem($scope.saveJSONItemdata, "GeneralInvestmentCostResults").then(function (response) {
alert("Saved successfully");
});
}
//CRUD - UPdate List Item
$scope.updateFunding = function () {
$scope.updateJSONItemdata = {
__metadata: {
type: "SP.Data.GeneralInvestmentCostResultsListItem"
},
ID: $scope.readFundingInfo[0].ID,
Title: "",
ProductProjectId: $scope.projectIDURL,
QualityGatesId: $scope.qualityGateIDURL,
GeneralInvestmentCostJSON: JSON.stringify($scope.caliculatedvalues)
};
RESTService.postItem($scope.updateJSONItemdata, "GeneralInvestmentCostResults").then(function (response) {
alert("Updated successfully");
$scope.readCaliculationsFlag = true;
$scope.readFunding();
});
}

 //Decimal value render 2 digits
$scope.renderDecimal = function (n) {
//return Math.floor(n * 100) / 100;
var multiplier = Math.pow(10, 2 || 0);
return Math.round(n * multiplier) / multiplier;
}
//global variables var arraycount = 0; var fileUploadeCount = 0; //Upload list attachment code //First we need to add item to a list before uploading attachment $scope.addItemToList = function(){ var fileArray = []; $("#file_input").each(function () { if ($(this)[0].files[0]) { fileArray.push({ "Attachment": $(this)[0].files[0] }); } }); arraycount = fileArray.length; $scope.dataJSON = { __metadata: { type: "SP.Data.ProductProjectListItem" }, Title: $scope.projectName?$scope.projectName:"", ProjectLeadId: $scope.projectLeadUserId, PlannedStartDate: $scope.projectStartDate?$scope.projectStartDate:"" }; RESTService.addItem($scope.dataJSON, "YourListName").then(function (response) { console.log("Item created successfully in List"); console.log(response); var id = response.d.Id; if (fileArray.length != 0) { for (i = 0; i <= fileArray.length - 1; i++) { $scope.loopFileUpload("ProductProject", id, fileArray, i).then( function () {}, function (sender, args) { alert("Error in uploading attachment"); dfd.reject(sender, args); } ); } } }); } $scope.loopFileUpload = function(listName, id, fileArray, fileCount){ $("#preloader").show(); var dfd = $.Deferred(); $scope.uploadFile(listName, id, fileArray[fileCount].Attachment); return dfd.promise(); } $scope.uploadFile = function(listname, ID, file) { var getFileBuffer = function (file) { var deferred = $.Deferred(); var reader = new FileReader(); reader.onload = function (e) { deferred.resolve(e.target.result); } reader.onerror = function (e) { deferred.reject(e.target.error); } reader.readAsArrayBuffer(file); return deferred.promise(); }; getFileBuffer(file).then(function (buffer) { $.ajax({ url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listname + "')/items(" + ID + ")/AttachmentFiles/add(FileName='" + file.name + "')", method: 'POST', async: false, data: buffer, processData: false, headers: { "Accept": "application/json; odata=verbose", "content-type": "application/json; odata=verbose", "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value }, success: onAttachmentSucess }); }); function onAttachmentSucess() { fileUploadeCount++; if (arraycount == fileUploadeCount) { console.log('attachment uploaded successfully'); $("#preloader").fadeOut('slow'); } } } //SharePoint model popup $scope.addnewProductProject = function(){ var options = { url: $scope.siteURL + '/Lists/ProductProject/NewForm.aspx?Source=https://team.uat.sp.wp.corpintra.net/sites/07467/LP/SitePages/homepage.aspx', title: 'Create Product Project', allowMaximize: false, showClose: true, width: 600, height: 400 }; SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options); return false; } //bootstrap model popup //To open popup $scope.openPopUp = function(){ setTimeout(function(){ $("div").removeClass('modal-backdrop fade in'); $('#exampleModal').trigger('focus'); $(".modelpop").addClass("modal-backdrop fade in"); },1000); } $scope.closepopup = function(){ $("#preloader").show(); setTimeout(function(){ $("div").removeClass('modal-backdrop fade in'); $("#preloader").fadeOut('slow'); },1000); }
}]).controller('htmlCtrl', ['$scope', '$http', '$sce', function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };
        $scope.renderUrl = function (htmlCode) {
            return $sce.trustAsResourceUrl(htmlCode);
        };
    }])
    .filter('unique', function () {
        return function (input, key) {
            var unique = {};
            var uniqueList = [];
            if (input != undefined) {
                for (var i = 0; i < input.length; i++) {
                    if (typeof unique[input[i][key]] == "undefined") {
                        unique[input[i][key]] = "";
                        uniqueList.push(input[i]);
                    }
                }
                return uniqueList;
            }
        };
    })
    .filter('groupBy', ['$parse', 'pmkr.filterStabilize', function ($parse, filterStabilize) {
        function groupBy(input, prop) {
            if (!input) {
                return;
            }
            var grouped = {};
            input.forEach(function (item) {
                var key = $parse(prop)(item);
                grouped[key] = grouped[key] || [];
                grouped[key].push(item);
            });
            return grouped;
        }
        return filterStabilize(groupBy);
    }])
//custom date picker field
.directive('datePicker', function(){
        return{
          restrict: 'A',
          require: 'ngModel',
          link: function(scope, elm, attr, ctrl){
            
            // Format date on load
            ctrl.$formatters.unshift(function(value) {
              if(value && moment(value).isValid()){
                   return moment(new Date(value)).format('MM/DD/YYYY');
              }
              return value;
            })
            
            //Disable Calendar
            scope.$watch(attr.ngDisabled, function (newVal) {
              if(newVal === true)
                $(elm).datepicker("disable");
              else
                $(elm).datepicker("enable");
            });
            
            // Datepicker Settings
            elm.datepicker({
              autoSize: true,
              changeYear: true,
              changeMonth: true,
              dateFormat: attr["dateformat"] || 'mm/dd/yy',
              showOn: 'button',
              buttonText: '<i class="glyphicon glyphicon-calendar"></i>',
              onSelect: function (valu) {
                scope.$apply(function () {
                    ctrl.$setViewValue(valu);
                });
                elm.focus();
              },
                beforeShow: function(){
                if(attr["minDate"] != null)
                    $(elm).datepicker('option', 'minDate', attr["minDate"]);
                  
                if(attr["maxDate"] != null )
                    $(elm).datepicker('option', 'maxDate', attr["maxDate"]);
              },
            });
          }
        }
      });

Comments

Post a Comment

Popular posts from this blog

Powerapps overcome 2000 item limit from any datasource

-
First go through delegation concept https://tejasadventure.blogspot.com/2020/05/power-apps-understanding.html In powerapps, we observe by default 500 item limit has set with in the app level for any data source. In order to overcome, we have option to set the limit of 2000 item limit maximum in the app. Now using code, MaximoFacility is my data source name contains 3000 items. ColFacilityDropdown is the collection storing the count of items from data source. We expect to see more than 2000 items. Based on StartWith function filtering the data with respective to the charectors and numbers as mentioned below. Code: Place the below code in a button on select property. Add label with code CountRows(ColFacilityDropdown) ClearCollect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "A" ))); Collect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "B" ))); Collect(ColFacilit...
Read more

PowerApps multiselect cascading dropdown and save an item to SharePoint List

-
Image
 I have one scenario as below List 1: Division List has title field List 2: District List has Title and Division Field(LookUp from Division List) List 3: Facility List has Title, District Field(LookUp field from District List) List 4: County List has Title, Facility Field(LookUp field from Facility List) Main List: Spill Report is the main list  Division Field( Look up from Division List) District Field(Look up field from District List) Facility Field(Look up field from Facility List) County Field(Look up field from County List) List Screenshots provided below can be refered for clarification. ----------------------------------------------------------------------------------------------------- PowerApps Canvas Apps In Power Apps Canvas App, We need to first design the app with the 4 respective fields Since those fields are multiselect, then it is to combo box. Generally power apps are not supported for multiselect cascasding dropdown. Refere microsoft documentation, Know Limit...
Read more

Multi select cascading dropdown in Power Apps

-
Image
  Left(Concat(ColDivisionSelectedValues, Title & ";"),Len(Concat(ColDivisionSelectedValues, Title & ";")) -1) Plus icon Set(_popup,true); Set(DivisionGalleryViewing,true); Set(DropdownName,"Division"); Gallery Division: SortByColumns(ColDivisionDropdown, "Title") Check box OnCheck: Collect(ColDivisionSelectedValues, ThisItem) OnUnCheck: Remove(ColDivisionSelectedValues,ThisItem); Remove(     ColDistrictSelectedValues,     Filter(         ColDistrictSelectedValues,         Division.Value = ChkBoxDivision_1.Text     ) );
Read more