me and my sharepoint < />: JavaScript

Showing posts with label JavaScript. Show all posts

Friday, July 22, 2016

jQuery - Searching a multi-dimensional array

Last days ago, I had an issue to search multi-dimensional arrays in JavaScript / jQuery.
This post will give you a quick example how it works.

First we create an multi-dimensional array.
In my example we create an array for each employee...

var hansi = { firstName: "Hansi", lastName: "Hansen", wage: "2000" };
var paul = { firstName: "Paul", lastName: "Paulsen", wage: "1900" };
var otto = { firstName: "Otto", lastName: "Ottensen", wage: "1500" };
var thomas = { firstName: "Thomas", lastName: "Tomate", wage: "2500" };

...and then push them all together in another array. And here is our multi-dimensional array:

var employees = [hansi, paul, otto, thomas];

Now we want to search for an employee with the first name "Thomas", so we define a variable with the search term:

var searchValue = "Thomas";

Then we use the grep function from jQuery to search for the term "Thomas" in our multi-dimensional array:

var result = $.grep(employees, function (e) {
return e.firstName == searchValue;
});

Now we just need to check our results variable:

if (result.length == 0) {
alert('Error: ' + searchValue + ' not found');
} else if (result.length == 1) {
employee = result[0];
} else {
alert('Error: Multiple items found');
}

See the results:

Employee Details: First Name: Thomas / Last Name: Tomate / Wage: 2500

Here is the complete code again:

<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {

var hansi = { firstName: "Hansi", lastName: "Hansen", wage: "2000" };
var paul = { firstName: "Paul", lastName: "Paulsen", wage: "1900" };
var otto = { firstName: "Otto", lastName: "Ottensen", wage: "1500" };
var thomas = { firstName: "Thomas", lastName: "Tomate", wage: "2500" };

var employees = [hansi, paul, otto, thomas];

var searchValue = "Thomas";
var result = $.grep(employees, function (e) {
return e.firstName == searchValue;
});

if (result.length == 0) {
alert('Error: ' + searchValue + ' not found');
} else if (result.length == 1) {
employee = result[0];
} else {
alert('Error: Multiple items found');
}

document.write("Employee Details: ");
document.write("First Name: " + employee.firstName + " / ");
document.write("Last Name: " + employee.lastName + " / ");
document.write("Wage: " + employee.wage + " ");
});
</script>
</head>
<body>
</body>
</html>

Friday, June 24, 2016

SharePoint - JavaScript - Get parameter from current URL

Today, just one short code snippet to read out an URL parameter with the SharePoint JavaScript libraries:

GetUrlKeyValue(parameter, noDecode, url) is a JavasSript function which we can use to get a query string parameter either from url in the browser or a url we specify.

parameter (string): Query string parameter from the url.

noDecode (bool)(optional): Specifies whether the value has to be encoded or not. If false value is decoded, else returned as it is.

url (string)(optional): the url from which Query string values are to be retrieved.(Optional)

Example:

alert(GetUrlKeyValue('a', false, 'www.abc.com?a=te%20sting'));
The above statement will return the value ‘te sting’ from the url paramter a. Here we are specifying our own url.

alert(GetUrlKeyValue('a', false));
The above statement will look for a query string variable a in the browser url, and returns the decoded value.

alert(GetUrlKeyValue('a'));
The above statement will look for a query string variable a in the browser url.

Tuesday, July 22, 2014

SharePoint 2010 - JavaScript Client - Updating items with visual feedback to user

I had created a custom action for a document library in SharePoint 2010.
When the user presses the custom action button in the ribbon bar, the selected documents should be updated in a special field ("Document Status").
I noticed, that the procedure to update the selected documents takes long time. During the update process the user cannot see what is happening, because of the asynchronous update request via JavaScript.
I thought, this is not very user-friendly, so I created a screen, where the user can see what the system is doing in this moment.
Here is my code with some screenshots.

function ApproveDocuments() {
var ApprovalProcess = this;
ApprovalProcess.SiteCollectionUrl = '';
var counter = 0;
var fileItems = [], item, docsSentToApproval = [];

var ClientContext = SP.ClientContext.get_current();
var LibraryID = SP.ListOperation.Selection.getSelectedList();
var Library = ClientContext.get_web().get_lists().getById(LibraryID); //Gets the current Library
var SelectedDocuments = SP.ListOperation.Selection.getSelectedItems(ClientContext);
var SiteCollection = ClientContext.get_site();
ClientContext.load(SiteCollection);
ClientContext.executeQueryAsync(function (s, a) {
jQuery('#myCloseInfoDivButton').click(function () {
window.location.href = SiteCollection.get_url() + '/Lists/Document Center';
ApprovalProcess.SiteCollectionUrl = SiteCollection.get_url();
});
});

var newDiv = '<div id="myCoverAll" style="background-color:#182738;width:100%;height:100%;position:fixed;top:0px;left:0px;display:block;z-index:1000;filter:alpha(opacity=70);-ms-filter:alpha(opacity=70);opacity:0.7;"></div>';
newDiv += '<DIV id="myInfoDivContainer" class="ms-dlgBorder" style="background-color:#ffffff;HEIGHT: 345px; WIDTH: 609px; position:absolute; left:50%; margin-left:-304px; top:50%; margin-top:-172px;z-index:1001;">';
newDiv += ' <DIV class="ms-dlgTitle" style="CURSOR: default; WIDTH: 609px">';
newDiv += ' <SPAN class="ms-dlgTitleText" id="dialogTitleSpan" style="WIDTH: 545px">Approve Documents</SPAN>';
newDiv += '</DIV>';
newDiv += '<DIV id="myInfoDivData" class="ms-dlgFrameContainer" style="background-color:#ffffff;padding-top:20px;"></DIV>';
newDiv += '<div id="myButtonCloseDiv" style="position:relative;width:100px;left:50%;margin-left:-50px;background-color:#ffffff;padding-top:20px;"><input class="ms-toolbar" type="button" name="myCloseInfoDivButton" id="myCloseInfoDivButton" value=" Close " /></DIV>';
newDiv += '</DIV>';
jQuery("#aspnetForm").after(newDiv);
if (SelectedDocuments.length > 0) {
jQuery('#myCloseInfoDivButton').attr('disabled', 'disabled');
}

for (var currentItem in SelectedDocuments) {
item = Library.getItemById(SelectedDocuments[currentItem].id);
fileItems.push(item);
ClientContext.load(item, 'FileLeafRef','Id','DocumentStatus');
}

var newElementHtmlHeader;
newElementHtmlHeader = '<div style="position:relative;width:100px;left:50%;margin-left:-50px;display:block;vertical-align:middle; text-align:center;" id="myLoadingBar"><img src="' + ApprovalProcess.SiteCollectionUrl + '_layouts/images/mySPProject/busy.gif" /><br />Loading...</div>';
newElementHtmlHeader += '<div style="font-weight:bold;float:left;padding:3px;width:50px;display:table-cell; vertical-align:middle; text-align:center;">Approval Status</div>';
newElementHtmlHeader += '<div style="font-weight:bold;float:left;padding:3px;">Document</div>';
newElementHtmlHeader += '<div style="font-weight:bold;float:left;padding:3px;"></div>';
newElementHtmlHeader += '<div style="clear:both;"></div>';
jQuery("#myInfoDivData").append(newElementHtmlHeader);

ClientContext.executeQueryAsync(Function.createDelegate(this, function () {
var newElementHtml;
for (var i = 0; i < fileItems.length; i++) {
newElementHtml = '<div style="float:left;padding:3px;width:50px;display:table-cell; vertical-align:middle; text-align:right;" id="item' + fileItems[i].get_id() + '">';
if (fileItems[i].get_item('DocumentStatus') != 'Waiting for Approval') {
newElementHtml += '<img src="' + ApprovalProcess.SiteCollectionUrl + '_layouts/images/mySPProject/docError.png" style="border:0px;width:15px;height:12px;" alt="Document approval error"></img>';
}
newElementHtml += '</div>';
newElementHtml += '<div style="float:left;padding:3px;">' + fileItems[i].get_item('FileLeafRef') + '</div>';

if (fileItems[i].get_item('DocumentStatus') == 'Waiting for Approval') {
newElementHtml += '<div style="float:left;padding:3px;" id="approvalStatus' + fileItems[i].get_id() + '">';
newElementHtml += '</div>';
}
else {
newElementHtml += '<div style="float:left;padding:3px;color:#F60000;" id="approvalStatus' + fileItems[i].get_id() + '">';
newElementHtml += 'Error: Document not in "Waiting for Approval"-State';
newElementHtml += '</div>';
}
newElementHtml += '<div style="clear:both;"></div>';
jQuery("#myInfoDivData").append(newElementHtml);
if (fileItems[i].get_item('DocumentStatus') == 'Waiting for Approval') {
fileItems[i].set_item('DocumentStatus', 'Approved');
fileItems[i].update();
docsSentToApproval[counter] = fileItems[i];
counter++;
}
}
ClientContext.executeQueryAsync(Function.createDelegate(this, function () {
for (var i = 0; i < docsSentToApproval.length; i++) {
jQuery('#item' + docsSentToApproval[i].get_id()).html('<img src="' + ApprovalProcess.SiteCollectionUrl + '_layouts/images/mySPProject/docApproved2.png" style="border:0px;width:15px;height:12px;" alt="Document approved"></img>');
jQuery('#approvalStatus' + docsSentToApproval[i].get_id()).css('color', '#368131');
jQuery('#approvalStatus' + docsSentToApproval[i].get_id()).html('Success');
if(i == (docsSentToApproval.length - 1))
{
jQuery('#myCloseInfoDivButton').removeAttr("disabled");
jQuery('#myLoadingBar').css('display','none');
}
}
}), Function.createDelegate(this, function (sender, args) {
// handle error somehow
}));
}), Function.createDelegate(this, this.onLoadItemFailure));
}

and here how it looks like:

Full Screen Layer with "PopUp"

After updating the properties of the selected documents

Maybe this is useful for someone.

me and my sharepoint < />

Friday, July 22, 2016

jQuery - Searching a multi-dimensional array

Friday, June 24, 2016

SharePoint - JavaScript - Get parameter from current URL

Tuesday, July 22, 2014

SharePoint 2010 - JavaScript Client - Updating items with visual feedback to user

Labels

Followers

Beliebte Posts