Showing posts with label EcmaScript. Show all posts
Showing posts with label EcmaScript. Show all posts

Tuesday, June 14, 2011

How to enable/disable buttons in ribbon conditionally?

In this article I will cover how we can enable and disable the controls from ribbon based on any specific column value. For an instance I have a list column "State", if selected row is having status "active" then and then button should be enable in Ribbon, otherwise ribbon button should remain disable.

For how to write Ribbon declaration please refer my previous articles.


In above image you can see we have one button "New" in ribbon within group "Console". Please refer the source code for Ribbon's declaration. We are going to use delegate control for injecting ECMA script on fly for desired list.
Below are the events causes ribbons to refresh so button can be turned enable/disable.
  • Checkbox from every row
  • SelectAll/DeselectAll checkbox from header row
  • On every row select
On each of above events after executing their respective functionality they instruct the ribbon to refresh. On received of refresh event ribbon calls Enable script for each of its control. Enable Script is the attribute which points to JavaScript function which can contain the logic for deciding button to be enabled or disable. You can mention the JavaScript function name to Enable Script attribute while declaring the Ribbon XML element.
Now let's see how sample is going to work.
  • On page loads and when no row is selected button will be disable
  • When user clicks checkbox of row and that row is having "Active" as status value then button will get enable
  • When user clicks row and that row is having "Active" as status value then button will get enable
  • If row is selected and button is enable and user click select all checkbox then ribbon will get refresh and button will be disable
So to achieve required functionality what we need is,
  • A function which will return a Boolean flag for ribbon to enable/disable button
  • We need to attach our own events on row click, row checkbox click and header checkbox click
  • So in our own functions we will retrieve the row and it's all cell values
  • Based on status cell value we will set the global flag true/false.
  • Then we will call Ribbon refresh, which eventually will enable/disable the button
Let's see how we can attach our own functions to various click events,


var _isButtonEnable = false;
var statusIndex = 2;
var row;

_spBodyOnLoadFunctionNames.push("registerEvents");

function isButtonEnablefn() {
    if (_isButtonEnable != 'undefined')
    { return _isButtonEnable } else
        return false;
}

function registerEvents() {
    var ctxCur = GetCurrentCtx();
    var SPGridViewGuid = ctxCur.listName;
    var oTables = document.getElementsByTagName("TABLE");
    for (var i = 0; i < oTables.length; i++) {
        if (oTables[i].id != "") {
            var listGUID = oTables[i].id.split("-{");
            if (listGUID[0] == SPGridViewGuid) {
                var oRows = oTables[i].getElementsByTagName("TR");

                var chkbxs = oRows[0].getElementsByTagName('input');
                if (chkbxs != null) {
                    chkbxs[0].attachEvent('onclick', selectAllClicked);
                }

                for (var j = 0; j < oRows.length; j++) {
                    if (j != 0) {
                        oRows[j].attachEvent('onclick', rowClicked);
                        var chkbx = oRows[j].getElementsByTagName('input');
                        if (chkbx != null) {
                            chkbx[0].attachEvent('onclick', rowCbxClicked);
                        }
                    }
                }
            }
        }
    }
}

function selectAllClicked() {
    _isButtonEnable = false;
    RefreshCommandUI();
}

function rowClicked() {
    setSelectedItem();
}

function rowCbxClicked() {
    setSelectedItem();
}

function setSelectedItem() {
    var evt = null;
    //capture the curren event
    evt = window.event;
    //retrieve the source of event
    var o = GetEventSrcElement(evt);
    //if source element is ECB menu or link then return don't do anything
    if (o != null && ElementContainsLink(o))
        return;
    // Close ECB menu if it is already open   
    if (clearECBMenu(o)) {
        CancelEvent(evt);
        return false;
    }
    //Retrieve the Row from which the event has raised
    var tr = GetItemRow(evt);
    var ctxCur = CtxFromRow(tr);

    if (CountSelectedItems(ctxCur) == 1) {
        var items = GetSelectedItemsDict(ctx);
        var k
        for (k in items) {
            var itm = items[k];
            //alert('List GUID :' + ctxCur.listName + '-- Item ID:' + itm.id);
            // Keep selected row in backstore we will need this later on in ribbon events
            var curRow = saveCurrentRow(tr, itm.id);
            // If Row Item Status is Active then turn on New Button.
            (curRow.cells[statusIndex].outerText == SP.MyResource.Active) ? _isButtonEnable = true : _isButtonEnable = false;
        }
    }
    else { _isButtonEnable = false; }
    RefreshCommandUI();
}

function saveCurrentRow(tr, curSelectedItemId) {
    var tab = tr;
    while (tab.tagName != "TABLE")
        tab = tab.parentNode;
    var rows = tab.rows;
    var i = 0;
    //This loop will fix the index for Phase State
    for (i = 0; i < tab.cells.length; i++) {
        if (tab.cells[i].outerText.trim() == SP.MyResource.State.trim()) {
            statusIndex = i;
            break;
        }
    }
    var iid;
    var rgiid;
    //This loop will fix the current selected row
    for (i = 1; i <= rows.length; i++) {
        iid = rows[i].getAttribute("iid");
        rgiid = iid.split(",");
        if (rgiid[1] == curSelectedItemId) {
            if (typeof (row) == "undefined") row = [];
            row[curSelectedItemId.id] = rows[i];
            return rows[i];
        }
    }
    return null;
}

function NewButtonClick() {
    var url;
    var ctxCur = GetCurrentCtx();
    if (CountSelectedItems(ctxCur) == 1) {
        var items = GetSelectedItemsDict(ctx);
        var item
        for (item in items) {
            var itm = items[item];
            alert('List GUID :' + ctxCur.listName + '-- Item ID:' + itm.id);
        }
    }
}

// javaScript String object's extension method for trim operation
String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}

Wednesday, April 13, 2011

How to get current logged user information using JavaScript ?

This is post which is simple and not really needed. But when I started writing the code in ECMAScript I have faced problems in getting the logged in user information. So, my readers may feel good after see this post and really most the users are looking for this too.
By this time, we have really understood all about ECMAScript Client Object Model and debugging. So, it's easy for us to know it well.
Please find the code below to get the current user information.



<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

Now copy & paste this JavaScript code after above mentioned tag :

<script type="text/ecmascript">

        ExecuteOrDelayUntilScriptLoaded(getUserData, "sp.js"); 

       
    // To Get Current User Name
    var context = null; 
    var web = null; 
    var currentUser = null; 
    var currentUserId=''
    function getUserData() {

            context = new SP.ClientContext.get_current(); 
        web = context.get_web(); 
        currentUser = web.get_currentUser(); 
        currentUser.retrieve(); 
        context.load(web);
        context.executeQueryAsync(onSuccessMethod, onFaiureMethodl);
       
    } 
       
    function onSuccessMethod(sender, args) { 
        var userObject = web.get_currentUser(); 
        alert('User name:' + userObject.get_title() + '\n Login Name:' + userObject.get_loginName()); 

    }
   
    function onFaiureMethodl(sender, args) {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace()); 
    }
    //--- END Get Current User Name

</script>


Friday, April 8, 2011

Set default value for People Picker via JavaScript

First open entry form (NewForm.aspx / EditForm.aspx / DispForm.aspx) in advanced mode in sharepoint designer. Then search for tag :


<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">


Now copy & paste this JavaScript code after this tag :


<script type="text/ecmascript">
 //Function search for people picker by its no and set default value string type
 //If we have 2 people picker in entry form & we want to set value to 2nd no. then "pickerNo=2"
 function fillPeoplePickerWithCurrentUser(pickerNo,userLoginName )
   {
      if(userLoginName != null)
      {
         var pp = getPickerImputElement(pickerNo);
  
         if(pp != null)
         {
           pp.innerHTML = userLoginName;
         }
      }
   }

  function getPickerImputElement(pickerNo)
  {
    var result = '';
    var divs = document.getElementsByTagName('DIV');
    var j = 0;

     for(var i=0; i < divs.length; i++)
     {
        if(divs[i ].id.indexOf('UserField_upLevelDiv') > 0)
        {
           j++;
           if(j == pickerNo)
           {
            result = divs[i ];
            break;
           }
        }
     }
     return result;
  }
</script>

Sunday, February 13, 2011

Useful JavaScript global variables in SharePoint

If you’re using custom JavaScripts with SharePoint 2010 some global JavaScript variables may come in handy.
These variables work if you’re using SharePoint’s default or any other custom master page. 

L_Menu_BaseUrl – the base URL of the site / subsite. Very useful when you need to determine the absolute path of the site in JavaScript. Example: document.location = L_Menu_BaseUrl + ‘lists/calendar/allitems.aspx’ //redirects to Calendar list 

L_Menu_LCID – the LCID of the site you’re in. Useful if you need to determine the language of the site. The list of Locale IDs can be found here. 

_spUserId – the ID of the logged in user.