Custom Action in Toolbar of QlistView trigerring JavaScript

Custom Action in Toolbar of QlistView trigerring JavaScript

Home Forums QuickApps Forum Custom Action in Toolbar of QlistView trigerring JavaScript

  • This topic is empty.
Viewing 1 reply thread
  • Author
    • #4427


      I am looking for some assistance with the following scenario :-

      I am using javascript / jQuery / SPServices to add/update list items in a Master / Child relationship held in 2 seperate SharePoint Lists, I am trigerring the execution of the code from various action / button columns that contain HTML in the format of buttons.

      So there are various buttons available to the end user on each data line displayed via Qlistview.

      Now I would like to create a global Action button on the toolbar of Qlistview that triggers a JavaScript function, which works on the selected items on the page being displayed.


      How do I execute JavaScript code from the Custom Action feature

      How do I access in JavaScript the “selected” item List ID’s when the user has selected multiple items.

      I want to develop the equivalent of the “Replace” action to allow the Super User to change a specified “Name Field” from “Joe Bloggs to “Fred Smith” on specified items selected by the user. I want to then force the same modification on “Task” items where the original user has been assigned workflow tasks.

      I In principle I have “Contract Obligation” assigned to a specified person, who in turn receives emails / tasks from SharePoint workflows. When the user leaves the company I want to “reassign” a batch of “Obligation”s to another user and change the tasks at the same time.

      I have sufficient javaScript / SPServices generic code from another project to be able to do this, but dont know how to reteieve the “selected” Item ID’s from Qlistview and initially how to execute JavaScript from a Custom Action.

      Can someone give me some guidelines.


    • #5431


      QuickApps allow users to extend the default behavior by implementing custom action classes that can be plugged into the system and configure to use and attached to UI (context menu or toolbar button). The QuickApps installation comes with sample C# solution/project that illustrates how to develop custom actions to perform server side processing. Once you are done with developing the custom code, deploy to your SharePoint environment, and configure Web Part's Action or Custom Action property to associate it as "Custom" action. When you click on the associated UI (menu or button), your custom logic will be executed.

      In this particular case where you would like to use client JavaScript function rather than implementing and extending custom action, this is also possible with some workarounds.

      First, you would still need to define your toolbar button, providing button text, whether to perform validation or not and etc. But do not add any pre-built action classes or specifying your own custom action classes. This will allow the web part to render the button for you but not to execute any server side code. The rest will need to be taken care of from client side using JavaScript.

      For example, on the same page, drop a Script Editor (under Media and Content web part category) or HTML Form Web Part (under Form category) so you may inject custom JavaScript and modify the HTML Form Web Part source to include some JavaScript function, which allows you to locate the button and attach onclick event so it can take over the execution of your custom JavaScript function to do whatever you would like.

      Here is the code snippet (using jquery in this case):

      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script type="text/javascript">
        function loadButton() {
          // as a workaround as currently even if you specify ID for the custom action item
          // the ID is not attached to the UI element, so you will have to come up with your
          // own jquery selector to locate the custom action button/menu
          $('a.rmRootLink').click(function(evt) {
            alert("Run my function...");



      To get to the selected items from client JavaScript, I would recommend that you check out Telerik ASP.NET Controls RadGrid and its client side API. Below is the little script just to illustrate the idea (you can put after the alert statement in the above script):

      // an alternative way to get the RadGrid client id
      var divid = $('div.RadGrid').attr('id');
      var grid = $find(divid);
      // use Telerik javascript client API
      var MasterTable = grid.get_masterTableView();
      // if we have at least one row in grid selected
      if(MasterTable.get_selectedItems().length>0) {
         // get the DataKeyValue of selected item
         var dataKeyValue = MasterTable.get_selectedItems()[0].getDataKeyValue("ID");
         // print out the selected list item ID

      I hope this helps.

Viewing 1 reply thread

You must be logged in to reply to this topic.