Sharepoint 2013 Open a Modal Dialog from a Custom Ribbon Action

This post is a sequence from this one (https://raquelalineblog.wordpress.com/2013/05/28/sharepoint-2013-custom-ribbon-action-to-update-a-list-item-field/).

In this post I’ll show how to call a modal dialog and get a value from that to update a list item field value.

The first thing was to create a mapped folder in my SharePoint 2013 project, to Layouts folder.

Then I add a new application page, where I have a text area to get data from user, an Ok button and a Cancel button.
My application page is this:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetCategory.aspx.cs" Inherits="SharePointCustomMenuAction.Layouts.SharePointCustomMenuAction.MoveDocs" DynamicMasterPageFile="~masterurl/default.master" %>

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

     <Sharepoint:ScriptLink ID="ScriptLink1" Name="sp.ui.dialog.js" LoadAfterUI="true" Localizable="false" runat="server"></Sharepoint:ScriptLink>
     <script type="text/javascript" language="javascript">

            function onCancel(sender, args) {
                SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, '');
            }

            function onOk(sender, args) {
                SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, document.getElementById('txtCategory').value);
            }
    </script>
    <form id="aspnetForm" action="">

        <p>
            <label id="label1">Enter Category Value</label>
        </p>
        <p>
            <textarea id="txtCategory" rows="1" cols="10"></textarea>

        </p>
        <p>
            <button  id="Ok" value="Ok" onclick="onOk();">Ok</button>&nbsp;&nbsp;<button id="Cancel" value="Cancel" onclick="onCancel();">Cancel</button>
        </p>
    </form>
</asp:Content>

<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
Get Category
</asp:Content>

<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
Get Category
</asp:Content>

I changed my Custom Action’s elements.xml file to call the modal dialog and get the result and value.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/"> 
    <CustomAction
    Id="Ribbon.Library.Actions.AddAButton"
    Location="CommandUI.Ribbon"
    RegistrationId="101"
    RegistrationType="List"
    Title="MoveDocs Ribbon Button">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
          Location="Ribbon.Library.Share.Controls._children">
          <Button Id="Ribbon.Library.Share.NewRibbonButton"
            Command="MoveDocsButtonCommand"
            LabelText="UpdateCategory"
            TemplateAlias="o2" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
          Command="MoveDocsButtonCommand"
          CommandAction="javascript:
            var context;
            var notifyId;
            var currentItem;
        
          function onQuerySucceededUpdate (sender, args) {
              alert('item updated');
          }    

          function onQueryFailedUpdate(sender, args) {
            alert('Error occured' + args.get_message());
          }  
          
          function UpdateCategory(val)
          {
             context = SP.ClientContext.get_current();
             var web = context.get_web();
             context.load(web, 'Title');  
             var currentlibid = SP.ListOperation.Selection.getSelectedList();
             var currentLib = web.get_lists().getById(currentlibid);
             var selectedItems = SP.ListOperation.Selection.getSelectedItems(context);
             for(var i in selectedItems)
              {
                currentItem = currentLib.getItemById(selectedItems[i].id);
                context.load(currentItem);
                if(currentItem != null) {
                  currentItem.set_item('Category', val);
                  currentItem.update();
                }
                context.executeQueryAsync(Function.createDelegate(this, onQuerySucceededUpdate), Function.createDelegate(this, onQueryFailedUpdate));
              }//End for
          }//End UpdateCategory


          var dlg=SP.UI.ModalDialog.showModalDialog({url: '{SiteUrl}/_Layouts/SharePointCustomMenuAction/GetCategory.aspx', dialogReturnValueCallback:function(res, val) {       
                if(res=='1')
                  {
                    UpdateCategory(val);
                  }
                else
                {
                  alert('Operação Cancelada');
                }
               }
              });
          
          
           
"/>
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
  
  <Module Name="CustomAction">
  </Module>
</Elements>
Advertisements

Tags: , ,

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

%d bloggers like this: