We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

SharePoint 2016 on-prem viewing Task details on same page as Task list

Medium Priority
40 Views
Last Modified: 2020-06-17
On my webpage I have a SharePoint Task list (list view web part) with columns like below:

Task name    Assigned To     Ref   Description
-----------     -------------    ----   ------------
t999      person A        45     Internal process
t1000   person B         21     External process
t899      person C         54     EMEA

The 'Task Name' column contains links to the DispForm.aspx which contains further details about the task that is clicked on. My question is, instead of viewing the task details in the DispForm.aspx on another webpage, can I pass the task name link URL or a parameter to another web part on the same page as the task list, like below?

TASK LIST  -----------> WEB PART CONTAINING MORE DETAILS ABOUT THE TASK

I've tried using the SharePoint Query URL filter and Webpart filters to pass the Task Name link URL to a page view webpart without much success.

Any help with this will be much appreciated.
Comment
Watch Question

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
you mean you click on the Task name and the other webpart update without refreshing the page?

Author

Commented:
Yes that would be great if any Task name (in the initial task list) was clicked and the other webpart could dynamically display additional details like percentage complete, comments etc. about the clicked Task.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
you can use ajax to get the another webpage content displayed in the other webpart when user click on a Task name

Author

Commented:
I know that ajax/ java is possible, I did start experimenting with the following code, but don't  know how to extract the Task name URL and pass that to the page viewer web part or content viewer web part in code.... I have a click event that fires when clicked within a task row.. but stuck with extracting the task URL and passing that to the 'other' web part to view task details.....

<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function() {
$(".ms-listviewtable > tbody > tr").click(function(){
    setTimeout( function() {
   //alert("tasklist");
    var ctx = SP.ClientContext.get_current("http://everynet/GJEDashboard/Pages/default.aspx");

    var items = SP.ListOperation.Selection.getSelectedItems(ctx);
    var clientContext = new SP.ClientContext();
    var oList = clientContext.get_web().get_lists().getByTitle('TaskNameURL');
 alert(oListItem.val);....

//GET TASK URL
//PASS TO OTHER WEB PART
Walter CurtisSharePoint AED
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:

You can probably do what you want to do by using an additional view that has the information you want and adding it to the same page. Then you can connect the web parts so that when the focus changes on the top view the lower view will also change focus. No need for any coding. You may need to do some researching on how to connect web parts.


Good luck...

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
don't  know how to extract the Task name URL

do a right click on a task name and choose "Inspect" (on Chrome)
after that do a right click on the HTML and choose copy outerHTML to post it here so I can see it

Here what I get after a right click on the jquery link of your previous post :
outerhtml.png

Author

Commented:
This is the script when inspecting the task name link. The task name here is Case file... How would you capture or pass this URL to another web part to view further details of the clicked task?

<a class="ms-listlink" onfocus="OnLink(this)" href="http://everynet/GJEDashboard/_layouts/15/listform.aspx?PageType=4&ListId=%7B156FB074%2D741D%2D4B6D%2D9437%2D9AD2B312A778%7D&ID=1273&ContentTypeID=0x010800E2D0B22BC004AC4B998B349A8D7E5209" onclick="EditLink2(this,63);return false;" target="_self">Case file</a>
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
open the task detail page and do the same for the container of the whole task details
we need to find a class or id of the container
if you need help and if possible, post the whole content of the page (view source of the page)
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
here what we have :

$(document).ready(function() {
    $(".ms-listlink", ".ms-listviewtable > tbody > tr").click(function (event) {
        event.preventDefault();
        //GET TASK URL
        var tasklist = $(this).attr("href");
            $.("DIV OF THE OTHER WEB PART").load (href+ " COMTAINER-LIKE-A-DIV-OF-THE-TASK-DETAIL");
    });
});

Open in new window

SharePoint AED
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.