Part 2: View Detail Custom Ribbon For Task List

Step 1: Create  new list TotalLeaveFormOfEmployee type Task List  include Fields:

Employee: Lookup

Employee:ID: Lookup (Employee:ID is created below)

EmployeeLogin: Person or Group

LeavedDays: Number

RemainingLeavingDays: Calculated (=TotalDaysCanBeLeave-LeavedDays)

TotalDaysCanBeLeave: Number

Step 2: Add New Data:

Step 3: Create new List CollectDataLeaveForm include Fields:

UserName: Person or Group

StartDate: Date and Time

EndDate: Date and Time

Reason: Multiple lines of text

NumberDay: Number

Department: Lookup

Position: Lookup

Manager: Person or Group

TypeOfLeave: Choice (Sick, Personal, Annual, Maternity, Marriage, Funeral, Working Accident)

Add new data

Step 4: Open visual Studio 2010 | Create new Empty Sharepoint Project name is CustomRibbon

Step 5: Add new Item | choose Empty Element name is EmptyElement1

Step 6: Copy Folder Images and Folder Layouts to your Project

Step 7: Open File Elements.xml and copy code in tag <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> code here </Elements>

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <CustomAction Id="Ribbon.HelloWorld"

                RegistrationId="107"

                RegistrationType="List"

                Location="CommandUI.Ribbon"

                Title="View Detail ribbon">

    <CommandUIExtension>

      <CommandUIDefinitions>

        <CommandUIDefinition Location="Ribbon.ListItem.Actions.Controls._children">

          <Button Id="Ribbon.HelloWorld.Button"

                  LabelText="View Detail"

                  TemplateAlias="o1"

                  Image32by32="/_layouts/images/CustomAssignedDoc/AssignedDocTo32x32.png"

                  Sequence="5"

                  Command="HelloWorld" />

        </CommandUIDefinition>

      </CommandUIDefinitions>

      <CommandUIHandlers>

        <CommandUIHandler Command="HelloWorld"

                          CommandAction="javascript:Load();"

                          EnabledScript="javascript:Enable();"/>

      </CommandUIHandlers>

    </CommandUIExtension>

  </CustomAction>

  <CustomAction Id="Ribbon.Library.Actions.Scripts"

                Location="ScriptLink"

                ScriptSrc="/_layouts/CustomAssignedDoc/CustomActions.js" />

</Elements>

Step 8: Open File CustomActions.js and paste code below:

//Kiem tra neu la List TotalLeaveFormOfEmployee thi moi enable Icon Ribbon

function Enable() {

    //return false; //lock the custom ribbon action

    var items = SP.ListOperation.Selection.getSelectedItems();

    var itemCount = CountDictionary(items);

    selectedListTitle = $(".s4-titletext h2 a:first").html(); //requires JQuery to get list name from ribbon breadcrumb

    //alert("selectedListTitle: " + selectedListTitle);

    if (selectedListTitle != "TotalLeaveFormOfEmployee")

        return false;

    return (itemCount > 0);

}

var myItems;

function Load() {   

    SP.UI.Notify.addNotification('View detail total leave');

    var ctx = SP.ClientContext.get_current();

    var items = SP.ListOperation.Selection.getSelectedItems(ctx);   

    var k;

    for (k in items) {

        myItems = items[k].id;

    }   

    ctx.executeQueryAsync(getWebSuccess, getWebFailure);

}

function getWebSuccess(sender, args) {   

    var ctx = new SP.ClientContext.get_current();

    var docLib = ctx.get_web().get_lists().getByTitle('TotalLeaveFormOfEmployee');

    //var query = '<View Scope=\'All Items\'><Query><Where><Eq><FieldRef Name="ID" /><Value Type="Counter">"' + myItems + '"</Value></Eq></Where></Query></View>';

    var query = '<View Scope=\'All Items\'>' +

                            '<Query>' +

                                '<Where>' +

                                '<Eq>' +

                                    '<FieldRef Name=\'ID\'/>' +

                                    '<Value Type=\'Text\'>' + myItems + '</Value>' +

                                '</Eq>' +                               

                                '</Where>' +

                            '</Query>' +

                 '</View>';

    var camlQuery = new SP.CamlQuery();

    camlQuery.set_viewXml(query);

    selectedDocs = docLib.getItems(camlQuery);

    ctx.load(selectedDocs);

    ctx.executeQueryAsync(onQuerySucceeded, onQueryFailed);

}

function getWebFailure(sender, args) {

    alert('Failed to get web. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());

}

function onQuerySucceeded(sender, args) {

    var listEnumerator = selectedDocs.getEnumerator();

    while (listEnumerator.moveNext()) {

        var currentItem = listEnumerator.get_current();

        //alert(currentItem.get_item('Employee').get_lookupValue());

       

        GetUserNameFromListEmployees(currentItem.get_item('Employee').get_lookupValue());

       

    }

}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

}

function GetUserNameFromListEmployees(fullName) {

    var ctx = new SP.ClientContext.get_current();

    var list = ctx.get_web().get_lists().getByTitle('Employees');

    var query = '<View Scope=\'All Items\'>' +

                            '<Query>' +

                                '<Where>' +

                                '<Eq>' +

                                    '<FieldRef Name=\'FullName\'/>' +

                                    '<Value Type=\'Text\'>' + fullName + '</Value>' +

                                '</Eq>' +

                                '</Where>' +

                            '</Query>' +

                 '</View>';

    var camlQuery = new SP.CamlQuery();

    camlQuery.set_viewXml(query);

    selectedGetUserNameFromListEmployees = list.getItems(camlQuery);

    ctx.load(selectedGetUserNameFromListEmployees);

    ctx.executeQueryAsync(getUserNameFromListEmployeesWithQuerySuccess, getUserNameFromListEmployeesWithQueryFailure);

}

function getUserNameFromListEmployeesWithQuerySuccess(sender, args) {

    var listEnumerator = selectedGetUserNameFromListEmployees.getEnumerator();

    while (listEnumerator.moveNext()) {

        //alert(listEnumerator.get_current().get_item("UserName").get_lookupValue());

        //alert('itemid = {ItemId} \n itemurl = {ItemUrl} \n recurrenceid = {RecurrenceId} \n siteurl = {SiteUrl} \n listid = {ListId} \n source = {Source} \n selectedlist = {SelectedList} \n selecteditemid = {SelectedItemId}');

        var userName = listEnumerator.get_current().get_item("UserName").get_lookupValue();

        RedirectPage('../CollectDataLeaveForm/AllItems.aspx?FilterField1=UserName&FilterValue1=' + userName + '');

    }

}

function getUserNameFromListEmployeesWithQueryFailure(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

}

function RedirectPage(redirectLink) {

    location.href = redirectLink;

}

Step 9: Deploy Project

Step 10: Open Task List  and choose Item with Title ItLeader1 and see custom ribbon below

Step 11: Click to View Detail Ribbon see detail leave form of Employees ItLeader1

Step 12: Finish

How to Deploy Project

Step 1: Download File code herehttp://www.mediafire.com/file/qxi48rm8p8vw3vr/Custom%20Ribbon%20Display%20Detail%20Of%20Item.rar include (List template, Project)

Step 2: Restore lists to your site

Step 3: Open Project and change port to your port

Step 4: Click left mouse to project CustomRibbon

Step 5: Click properties and change Site Url to your  site

Step 6: Finish