How to export User Detail pdf while using OrgChart.Js Library & Laravel

Question

Hey There Developers I am facing some Problem While Using the OrgChart.Js library

I Was able to successfully Create my Tree hierarchy system as you can see in the Screen shot

Now this is the Sample Code That I am using in my Laravel 11 Controller

public function showHierarchy()
{
    // Fetch the admin (role_id = 3)
    $admin = User::where('role_id', 3)->first();
    if (!$admin) {
        return 'No admin found!';
    }

    // Prepare the nodes array to pass to the view
    $nodes = [];

    // Fetch profile picture for admin
    $adminProfile = Profile::where('user_id', $admin->id)->first();
    $adminPic = $adminProfile ? $adminProfile->profile_pic : 'default.jpg';

    // Add Admin to nodes
    $nodes[] = [
        'id' => $admin->id,
        'name' => $admin->first_name . ' ' . $admin->last_name,
        'role' => 'Admin',
        'img' => asset($adminPic),
        'email' => $admin->email,
        'date_of_birth' => $adminProfile ? $adminProfile->date_of_birth : 'N/A',
        'date_of_joining' => $adminProfile ? $adminProfile->date_of_joining : 'N/A',
        'reporting_person' => 'N/A', // Admin has no reporting person
        'personal_number' => $adminProfile ? $adminProfile->personal_number : 'N/A',
        'address' => $adminProfile ? $adminProfile->address : 'N/A',
        'pid' => 0  // Admin is the root node

    ];

    // Fetch all users who have valid values for both team_id and team_rank
    $users = User::whereNotNull('team_id')
                  ->whereNotNull('team_rank')
                  ->where('id', '!=', $admin->id)
                  ->get();

    foreach ($users as $user) {
        // Fetch profile picture for each user
        $userProfile = Profile::where('user_id', $user->id)->first();
        $userPic = $userProfile ? $userProfile->profile_pic : 'default.jpg';
          // Fetch the reporting person (manager)
        $reportingPerson = User::where('id',$user->team_lead_id)->first();
        // dd($reportingPerson->first_name);
        // $reportingName = $reportingPerson ? $reportingPerson->first_name . ' ' . $reportingPerson->last_name : 'N/A';
        $reportingName = '';
        if ($user->team_lead_id == 0) {
            $reportingName = $admin->first_name . ' ' . $admin->last_name;
            $parentId = $admin->id;
        } else {
            $reportingPerson = User::find($user->team_lead_id);
            $reportingName = $reportingPerson ? $reportingPerson->first_name . ' ' . $reportingPerson->last_name : 'N/A';
            $parentId = $reportingPerson ? $reportingPerson->id : $admin->id;
        }

        // Determine the parent node (pid)
        // If the user has team_lead_id = 0, the user reports directly to the admin
        // Otherwise, the user reports to the person defined in team_lead_id (only if team_id is the same)
        if ($user->team_lead_id == 0) {
            // If team_lead_id is 0, user reports directly to admin
            $parentId = $admin->id;
        } else {
            // Check if the person in team_lead_id belongs to the same team (team_id)
            $teamLead = User::where('id', $user->team_lead_id)
                            ->where('team_id', $user->team_id)  // Ensure same team
                            ->first();

            // If team_lead_id is valid, use it as parent; else, default to admin
            if ($teamLead) {
                $parentId = $teamLead->id;  // Reports to team lead in the same team
            } else {
                $parentId = $admin->id;  // If no valid team lead, report to admin
            }
        }

        // Determine the user's role based on team_rank
        $role = ($user->team_rank == 1) ? 'Manager' : (($user->team_rank == 3) ? 'Team Lead' : 'Team Member');

        // Add user to the nodes array
        $nodes[] = [
            'id' => $user->id,
            'pid' => $parentId,
            'name' => $user->first_name . ' ' . $user->last_name,
            'role' => $role,
            'img' => asset($userPic),
            'email' => $user->email,
            'date_of_birth' => $userProfile ? $userProfile->date_of_birth : 'N/A',
            'date_of_joining' => $userProfile ? $userProfile->date_of_joining : 'N/A',
            'reporting_person' => $reportingName,
            'personal_number' => $userProfile ? $userProfile->personal_number : 'N/A',
            'address' => $userProfile ? $userProfile->address : 'N/A'
        ];
    }
    // dd($nodes);
    return view('test', compact('nodes'));
}

and this is the Js That I am using to formulate the Tree Structure

<script>
    const chart = new OrgChart(document.getElementById("tree"), {
        template: "isla", // Template for the tree nodes
        // template: "rony", // Template for the tree nodes
        nodeBinding: {
            field_0: "name", // Bind "name" from your data
            field_1: "role", // Bind "role" from your data
            img_0: "img",
        },
        nodes: {!! json_encode($nodes) !!}, // Pass the $nodes array from your Laravel controller

        collapse: {
            level: 2, // Collapse nodes below the Manager level
            allChildren: true // Collapse all children under the Managers
        },
        // Layout configuration
        layout: OrgChart.compact,  // Use the compact layout to force horizontal alignment
        siblingSeparation: 30,  // Control horizontal space between nodes
        subTreeSeparation: 40,  // Space between different subtrees (managers)
        nodeSize: [160, 100],  // Define node size to better fit horizontal display

        // Zoom and scroll settings
        zoom: {
            zoomIn: true,
            zoomOut: true,
            fit: true
        },
        mouseScrool: OrgChart.action.scroll,  // Enable scrolling with mouse wheel
        enableSearch: true,  // Enable search functionality
    });
</script>

Now The Problem that I am facing starts when I clicks on any Node & it Opens a default side panel as shown in the screenshot

Now, when I am clicking on the Download pdf button it downloads a default template ,but I want to download a custom pdf on click of this same pdf button. The Pdf that I want to download on click of this button is stored at this location, "resources/views/card.blade.php" in my Laravel Project

in that file I want to populate it with some dynamic data like "Name" , "Image" , "Date_of_Birth", etc. Where as all of this data is already being passed from the Controller & is currently displayed in the side panel as well

Answer 1

You can remove this button, setting it to null:

editForm: {
    buttons:  {
        pdf: null
    }
}

and add a custom one that looks the same way.

Here are the icons: https://code.balkan.app/org-chart-js/icons#JS