Tutorial: How to add table view of linked documents within form

[Vesper_Solutions]

Hi,
Ok so the default way of viewing linked documents is via connections. So lets say for instance I want to view the tasks list for a particular project, either i can go to the tasks list view and add a filter or access them via the connections tab in the project form(which more or less does the same as the former). Instead i wanted to add a separate tab in the project form containing a html field which show a paginated table of all tasks for a particular project. So I added an html field to the project doctype called “tasks_list” and added a client side script.

Here’s the script:

frappe.ui.form.on("Project", {
  refresh: function(frm) {
    console.log("Inside refresh function");

    if (frm.fields_dict['tasks_list']) {
      var cur_field = frm.fields_dict['tasks_list'];
      console.log("cur_field found:", cur_field);

      // Function to fetch tasks
      function fetch_tasks(start, limit) {
        console.log("Fetching tasks from start:", start, "with limit:", limit);
        frappe.call({
          method: "frappe.client.get_list",
          args: {
            doctype: "Task",
            filters: [["project", "=", frm.doc.name]],
            fields: ["name", "status", "description"],
            limit_start: start,
            limit_page_length: limit,
          },
          callback: function(response) {
            console.log("Response received:", response);
            if (!response.message || response.message.length === 0) {
              cur_field.html("No linked tasks found for this project.");
              return;
            }

            try {
              var task_list_html = get_task_list_html(response.message);
              cur_field.$wrapper.html(task_list_html); // Set the HTML
              add_pagination_controls(cur_field.$wrapper, start, limit, response.message.length);
            } catch (error) {
              console.error("Error generating HTML:", error);
              cur_field.$wrapper.html("Failed to display linked tasks.");
            }
          },
          error: function(error) {
            console.error("Error in frappe call:", error);
            cur_field.$wrapper.html("Failed to fetch linked tasks.");
          }
        });
      }

      // Initial fetch with page 1
      fetch_tasks(0, 10);
    } else {
      console.error("Custom field 'tasks_list' not found.");
    }
  },
});

// Function to generate HTML
function get_task_list_html(data) {
  try {
    var table_html = '<div class="table-responsive"><table class="table table-bordered">';
    table_html += "<thead><tr>";
    table_html += "<th>Name</th><th>Status</th><th>Description</th>"; // Add table headers
    table_html += "</tr></thead><tbody>";

    // Iterate through fetched tasks and build table rows
    data.forEach(task => {
      table_html += "<tr>";
      table_html += `<td>${task.name || ""}</td>`;
      table_html += `<td>${task.status || ""}</td>`;
      table_html += `<td>${task.description || ""}</td>`;
      table_html += "</tr>";
    });

    table_html += "</tbody></table></div>";
    return table_html;
  } catch (error) {
    console.error("Error in get_task_list_html function:", error);
    throw error;
  }
}

// Function to add pagination controls
function add_pagination_controls(container, start, limit, fetched_count) {
  try {
    container = $(container); // Ensure container is a jQuery object
    var pagination_html = '<div class="pagination-controls">';
    if (start > 0) {
      pagination_html += `<button class="btn btn-secondary" onclick="fetch_tasks(${start - limit}, ${limit})">Previous</button>`;
    }
    if (fetched_count === limit) {
      pagination_html += `<button class="btn btn-secondary" onclick="fetch_tasks(${start + limit}, ${limit})">Next</button>`;
    }
    pagination_html += '</div>';
    container.append(pagination_html);
  } catch (error) {
    console.error("Error in add_pagination_controls function:", error);
    throw error;
  }
}

// Make fetch_tasks globally accessible
window.fetch_tasks = function(start, limit) {
  var frm = cur_frm; // Use the global cur_frm object
  if (frm.fields_dict['tasks_list']) {
    var cur_field = frm.fields_dict['tasks_list'];
    console.log("Fetching tasks for pagination from start:", start, "with limit:", limit);
    frappe.call({
      method: "frappe.client.get_list",
      args: {
        doctype: "Task",
        filters: [["project", "=", frm.doc.name]],
        fields: ["name", "status", "description"],
        limit_start: start,
        limit_page_length: limit,
      },
      callback: function(response) {
        console.log("Pagination response received:", response);
        if (!response.message || response.message.length === 0) {
          cur_field.$wrapper.html("No linked tasks found for this project.");
          return;
        }

        try {
          var task_list_html = get_task_list_html(response.message);
          cur_field.$wrapper.html(task_list_html); // Set the HTML
          add_pagination_controls(cur_field.$wrapper, start, limit, response.message.length);
        } catch (error) {
          console.error("Error generating HTML for pagination:", error);
          cur_field.$wrapper.html("Failed to display linked tasks.");
        }
      },
      error: function(error) {
        console.error("Error in frappe call for pagination:", error);
        cur_field.$wrapper.html("Failed to fetch linked tasks.");
      }
    });
  } else {
    console.error("Custom field 'tasks_list' not found.");
  }
};

Here’s a screenshot of the result:

This lets you view all linked doctypes for another doctype within the form in a list view.
You can change the fields as per your wishes and dont forget to remove all the console error handlers.
Cheerio!

[NCP]

Nice @Vesper_Solutions,

You can easily set all project tasks in the table.

This can be done using a server script, which might be helpful to someone. (You can put the script in the server script doctype.)

---

When tasks are saved, they will automatically be added to the project.

Script Type: DocType Event
Reference Document Type: Task
DocType Event: After Save

if doc.project:
    project = frappe.get_doc('Project', doc.project)
    found = False

    for total_task in project.total_tasks:
        if total_task.task == doc.name:
            total_task.subject = doc.subject
            total_task.status = doc.status
            total_task.description = doc.description
            found = True
            break

    if not found:
        project.append('total_tasks', {
            'task': doc.name,
            'subject': doc.subject,
            'status': doc.status,
            'description': doc.description
        })
    
    project.save()

When a user deletes a task, it will also be automatically removed from the project.

Script Type: DocType Event
Reference Document Type: Task
DocType Event: Before Delete

if doc.project:
    project = frappe.get_doc('Project', doc.project)
    to_remove = None
    
    for total_task in project.total_tasks:
        if total_task.task == doc.name:
            to_remove = total_task
            break

    if to_remove:
        project.remove(to_remove)
        project.save()

Output:

[Vesper_Solutions]

Of course. I just showing a proof of concept but your method is more comprehensive and allows more leeway.

[auliabismar]

@Vesper_Solutions solution is my preference, since I cannot find solution from frappe to ONLY show other doctype data. But I prefer using frappe.datatable instead of coding html from scratch.