SharePoint/O365 JSOM – App(Add-In) – Updating list items and making your custom action behave like a popup window

I am a bit lazy today so I will not go into too much detail on the code below. It is rather self explanatory. The first piece of the code is getting selected list items and the second part is updating fields in a list item.


var context;
var web;
var user;
var spHostUrl;
var parentContext;
var listItems;
var listItem;
var listItemID;
var listID;
var parsedListItemIDs;

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
// Get the URLs for the add-in web the host web URL from the query string.
$(document).ready(function () {

 DisplaySelectedItems();
 
});

function DisplaySelectedItems() {

 // Get the query strings parameter to operate on the desired list and list items
 var params = document.URL.split("?")[1].split("&");

 for (var i = 0; i < params.length; i = i + 1) {
 params[i] = decodeURIComponent(params[i]);

 if (params[i].split("=")[0] == "SPListId") {
 listID = params[i].split("=")[1];
 }

 if (params[i].split("=")[0] == "SPHostUrl") {
 spHostUrl = params[i].split("=")[1];
 }
 if (params[i].split("=")[0] == "SPListItemId") {
 listItemID = params[i].split("=")[1];
 parsedListItemIDs = listItemID.split(",");

 }
 }

 // Open a client context
 context = new SP.ClientContext.get_current();
 // Create a parent context(to the target web where the list and list items are located, not in the app web)
 parentContext = new SP.AppContextSite(context, spHostUrl);
 web = parentContext.get_web();

 // Get the list
 var list = web.get_lists().getById(listID);

 var camlQuery = SP.CamlQuery.createAllItemsQuery();

 listItems = list.getItems(camlQuery);
 context.load(listItems);

 // Request O365 to perform the operations on list items
 context.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded),
 Function.createDelegate(this, onQueryFailed));
}

function ProcessSelectedItemsFor()
{
 
 // Get the query strings parameter to operate on the desired list and list items
 var params = document.URL.split("?")[1].split("&");

 for (var i = 0; i < params.length; i = i + 1) {
 params[i] = decodeURIComponent(params[i]);

 if (params[i].split("=")[0] == "SPListId") {
 listID = params[i].split("=")[1];
 }

 if (params[i].split("=")[0] == "SPHostUrl") {
 spHostUrl = params[i].split("=")[1];
 }
 if (params[i].split("=")[0] == "SPListItemId") {
 listItemID = params[i].split("=")[1];
 parsedListItemIDs = listItemID.split(",");

 }
 }


 // Open a client context
 context = new SP.ClientContext.get_current();
 // Create a parent context(to the target web where the list and list items are located, not in the app web)
 parentContext = new SP.AppContextSite(context, spHostUrl);
 web = parentContext.get_web();

 // Get the list
 var list = web.get_lists().getById(listID);

 // Go through the list items and process them
 for (var i = 0; i < parsedListItemIDs.length; i++) {
 listItem = list.getItemById(parsedListItemIDs[i]);
 listItem.set_item('your list item field name', 'false');

 listItem.set_item('your list item field name', 'true');
 listItem.update();
 }


 // Request O365 to perform the operations on list items
 context.executeQueryAsync(Function.createDelegate(this, onQuerySucceededAlternate),
 Function.createDelegate(this, onQueryFailed));
}

function CloseChildDialog() {
 //SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Closed with OK result');
 SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancelled');
}


function onQuerySucceeded() {
 $("#selectedItems").empty();
 var listInfo = '';
 var listEnumerator = listItems.getEnumerator();

 listInfo += "Chosen filest:<br/><table><tr><th>ID</th><th>File name</th></tr>";

 while (listEnumerator.moveNext()) {
 var listItem = listEnumerator.get_current();
 for (var i = 0; i < parsedListItemIDs.length; i++) {
 if (listItem.get_item('ID') == parsedListItemIDs[i]) {
 listInfo += '<tr><td>' + listItem.get_item('ID') + '</td>'
 + '<td>' + listItem.get_item('FileLeafRef') + '</td>'
 + '</tr>\n';
 }
 }
 }
 $("#message").empty();



 listInfo += '</table>';

 $("#selectedItems").html(listInfo);
}

function onQuerySucceededAlternate() {
 $("#results").empty();
 

 $("#results").html("Success");
 $("#divActionArea").hide();
}

function onQueryFailed(sender, args) {
 $("#results").empty();
 $("#results").text('Request failed. ' + args.get_message() +
 '\n' + args.get_stackTrace());
}


 Making an app custom action in O365 to behave like a popup

to make your custom action to “pop up” into a window you need to add the following details in your custom action definition file(the bolded text):

<?xml version=”1.0″ encoding=”utf-8″?>
<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”&gt;
<CustomAction Id=”afa59853-4390-4b16-876a-6be2338f4186.”
RegistrationType=”List”
RegistrationId=”101″
Location=”CommandUI.Ribbon”
Sequence=”10001″
Title=”Invoke &apos;&apos; action”
HostWebDialog=”true”
HostWebDialogHeight=”400″
HostWebDialogWidth=”300″>
<CommandUIExtension>
<!–
Update the UI definitions below with the controls and the command actions
that you want to enable for the custom action.
–>
<CommandUIDefinitions>
<CommandUIDefinition Location=”Ribbon.Documents.Manage.Controls._children”>
<Button Id=”Ribbon.Documents.Manage.Button”
Alt=”Request ”
Sequence=”100″
Command=”Invoke_ButtonRequest”
LabelText=”Request ”
TemplateAlias=”o1″
Image32by32=”_layouts/15/images/placeholder32x32.png”
Image16by16=”_layouts/15/images/placeholder16x16.png” />
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler Command=”Invoke_ButtonRequest”
CommandAction=”~appWebUrl/Pages/Default.aspx?{StandardTokens}&amp;DisplayType=iframe&amp;SPListItemId={SelectedItemId}&amp;SPListId={SelectedListId}”/>
</CommandUIHandlers>
</CommandUIExtension >
</CustomAction>
</Elements>

You also need to add the following bolded line of definition in your ASPX file:

<asp:Content ContentPlaceHolderID=”PlaceHolderMain” runat=”server”>

<WebPartPages:AllowFraming runat=”server” />

</asp:Content>

More info, I recommend reading the link below on “clickjacking” related to AllowFraming definition:

http://blogs.msdn.com/b/officeapps/archive/2012/12/12/iframing-sharepoint-hosted-pages-in-apps.aspx 

https://msdn.microsoft.com/ENUS/library/microsoft.sharepoint.webpartpages.allowframing.aspx

http://blogs.msdn.com/b/officeapps/archive/2012/12/12/iframing-sharepoint-hosted-pages-in-apps.aspx

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s